Commit f8aeda52 authored by philippelke's avatar philippelke

modal component

parent b12f780c
......@@ -44,6 +44,7 @@ import { BliEditorComponent } from './admin/bli-editor/bli-editor.component';
import { AutosuggestComponent } from './widget/autosuggest/autosuggest.component';
import { VersionInfoComponent } from './home/version-info/version-info.component';
import { HelpComponent } from './portal/help/help.component';
import { ModalsComponent } from './modals/modals.component';
enableProdMode();
......@@ -82,7 +83,8 @@ enableProdMode();
BliEditorComponent,
AutosuggestComponent,
VersionInfoComponent,
HelpComponent
HelpComponent,
ModalsComponent
//MatAutocompleteModule,
],
imports: [
......
<div class="modal-wrap modal">
<div class="container">
<p>Test</p>
</div>
</div>
<!-- search partner -->
<div class="modal-wrap modal">
<div class="container">
<h1>Netzwerkpartner suchen</h1>
<p>Netzwerkpartner sind...</p>
<form [formGroup]="searchForm" class="searchForm">
<div class="">
<input type="text" formControlName="searchPattern"
class="form-control searchinput" placeholder="z.B. Name eines Vereins" />
</div>
<div class="searchbutton float-right">
<div class="searchbuttonPrepend">
<button (click)="search()" class="btn search-button"
type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</div>
</div>
<div>
<div >
<div>
<i class="fa fa-map-marker fa-lg" aria-hidden="true"></i>
{{elem.name}}
<label class="switch"><input type="checkbox"><span class="slider round"></span> </label>
</div>
</div>
<div>
<button (click)="add()" class="btn add-button"
type="submit">Auswahl hinzufügen
</button>
</div>
</div>
</form>
</div>
</div>
<!-- add category -->
<div class="modal-wrap modal">
<div class="container">
<h1>Kategorie hinzufügen</h1>
<p>Kategorien sind Bereiche denen der Ort zugeordnet werden kann oder in denen der Ort aktiv ist.</p>
<form [formGroup]="searchForm" class="searchForm">
<div>
<div >
<div>
{{elem.name}}
<label class="switch"><input type="checkbox"><span class="slider round"></span> </label>
</div>
</div>
<div>
<button (click)="add()" class="btn add-button"
type="submit">Auswahl hinzufügen
</button>
</div>
</div>
</form>
</div>
</div>
<!-- login -->
<div class="modal-wrap modal">
<div class="container modalLogin">
<div *ngIf="!authService.loggedIn">
<h4>Anmeldung</h4>
<div class="login_ex exclamation">
<i class="fa fa-exclamation-triangle fa-lg" aria-hidden="true">&nbsp;</i>
<p>Nur angemeldete Nutz*innen können Orte des Guten Lebens anlegen und bearbeiten.</p>
</div>
<form [formGroup]="loginForm" (ngSubmit)="login()">
<div class="form-group">
<label for="username">Benutzername</label> <input type="text"
formControlName="username" class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
<div *ngIf="submitted && f.username.errors" class="invalid-feedback">
<div *ngIf="f.username.errors.required">Username is required</div>
</div>
</div>
<!--
<div class="form-group">
<label for="username">E-Mail</label> <input type="text"
formControlName="username" class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
<div *ngIf="submitted && f.email.errors" class="invalid-feedback">
<div *ngIf="f.email.errors.required">E-Mail is required</div>
</div>
</div>
-->
<div class="form-group">
<label for="password">Passwort</label> <input type="password"
formControlName="password" class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
<div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
</div>
</div>
<div class="form-check">
<input type="checkbox"
formControlName="savelogin" class="form-check-input"
[ngClass]="{ 'is-invalid': submitted && f.savelogin.errors }" />
<label class="form-check-label" for="savelogin">Eingeloggt bleiben</label>
</div>
<br>
<button [disabled]="sending && ! authService.loginFailed" class="btn btn-primary">Anmelden</button>
<div *ngIf="authService.loginFailed">Anmeldung fehlgeschlagen.</div>
<div class="divider"></div>
<div class="">
Neu beim Geoportal des Guten Lebens?
<br/><br/>
<button class="btn btn-secondary" routerLink="/register">Registrieren</button>
</div>
</form>
</div>
<div *ngIf="authService.loggedIn" class="widget-wrap">
<div> Sie sind bereits eingeloggt.</div>
</div>
</div>
</div>
<!-- unsafed content -->
<div class="modal-wrap modal">
<div class="container">
<h1>Achtung! Ungespeicherte Änderungen</h1>
<p>Du hast die Änderungen noch nicht veröffentlicht. Was möchtest Du machen?</p>
<br>
<button type="button" class="btn btn-primary btn-lg">Auf dieser Seite bleiben</button>
<button type="button" class="btn btn-secondary btn-lg">Änderungen verwerfen</button>
</div>
</div>
<!-- content public -->
<div class="modal-wrap modal">
<div class="container">
<h1>Deine Änderungen sind jetzt öffentlich!</h1>
<p>Danke für deine Angaben</p>
<br>
<button type="button" class="btn btn-primary btn-lg">Alles klar!</button>
<button type="button" class="btn btn-secondary btn-lg">Zurück zum Bearbeiten</button>
</div>
</div>
<!-- required fields -->
<div class="modal-wrap modal">
<div class="container">
<h1>Bitte fülle die Pflichtfelder aus!</h1>
<p>Ohne diese Angaben kann der Eintrag nicht gespeichert werden.</p>
<br>
<button type="button" class="btn btn-primary btn-lg">Alles klar!</button>
</div>
</div>
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ModalsComponent } from './modals.component';
describe('ModalsComponent', () => {
let component: ModalsComponent;
let fixture: ComponentFixture<ModalsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ModalsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ModalsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-modals',
templateUrl: './modals.component.html',
styleUrls: ['./modals.component.css']
})
export class ModalsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment