feat: stad gent contact component

frontend/src/app/app.constants.ts

@@ -39,3 +39,10 @@ export const HOIColors = {
 export const institutions = [
     'UGent', 'HoGent', 'Arteveldehogeschool', 'StadGent', 'Luca', 'Odisee', 'Other'
 ];
+
+export const contact = {
+    'email': '[email protected]',
+    'address': 'Hoveniersberg 24, 9000 Gent',
+    'building': 'De Therminal',
+    'website': 'https://bloklocaties.stad.gent'
+};

frontend/src/app/components/dashboard/dashboard.component.html

@@ -1,120 +1,53 @@
 <section class="messages messages--error" *ngIf="showStagingWarning">
-<div  markdown *ngIf="currentLanguage() | async as currlan"
-src="assets/md/staging-warning.{{currlan}}.md">>
-</div>
+    <div markdown *ngIf="currentLanguage() | async as currlan" src="assets/md/staging-warning.{{currlan}}.md">>
+    </div>
 </section>
 
 <div *ngIf="locations !== undefined && successOnRetrievingLocations === true">
-  <div *ngIf="locations.length > 0; else noLocations">
-    <!-- Provide a panel group for filter -->
-    <!-- <div class="panel-group">
-      <!-- Heading -->
-      <!-- <div class="panel-heading">
-        <h3 class="panel-title">
-          <a data-toggle="collapse" href="#filterBody" aria-expanded="true">
-            <i class="glyphicon glyphicon-plus"></i>
-            <i class="glyphicon glyphicon-minus"></i>
-            {{('dashboard.filter.title' | translate)}}
-          </a>
-        </h3>
-      </div>
-
-      Body
-      <div class="panel-collapse in" id="filterBody" *ngIf="tagObs | async as tags">
-        <div class="panel-body" style="padding: 20px">
-          <div class="row">
-            <div class="col-sm-3">
-              <mat-form-field *ngIf="tags !== undefined" style="width: 100%" [formGroup]="tagFilterFormGroup">
-                <mat-label>{{'dashboard.filter.tagsFilterTitle' | translate}}</mat-label>
-                <mat-select multiple formControlName="filteredTags" [compareWith]="compareTagsInSelection"
-                  (selectionChange)="onTagsSelectionChange($event)">
-                  <mat-option style="border: 0;" *ngFor="let tag of tags" [value]="tag">
-                    {{currentLang === 'nl' ? tag.dutch : tag.english}}
-                  </mat-option>
-                </mat-select>
-              </mat-form-field>
-            </div>
-
-            <div class="col-sm-3">
-              <mat-form-field *ngIf="tags !== undefined" style="width: 100%" [formGroup]="buildingFilterFormGroup">
-                <mat-label>{{'dashboard.filter.buildingsFilterTitle' | translate}}</mat-label>
-                <mat-select formControlName="filteredBuilding" (selectionChange)="onBuildingSelectionChange($event)">
-                  <mat-option style="border: 0;" *ngFor="let building of buildingObs | async" [value]="building">
-                    {{building.name}}
-                  </mat-option>
-                </mat-select>
-              </mat-form-field>
-            </div>
-
-            <div class="col-sm-2">
-              <div class="form-group">
-                <input [(ngModel)]="locationSearch" (keyup.enter)="onSearchEnter()" id="search" class="form-control"
-                  type="text" placeholder="{{'dashboard.filter.searchPlaceholder' | translate}}">
-              </div>
-            </div>
-
-            <div class="col-sm-1">
-              <button class="btn btn-primary" (click)="onSearchEnter()">
-                {{'general.buttons.search' | translate}}
-              </button>
-            </div>
-
-            <div class="col-sm-2">
-              <button class="btn btn-primary" (click)="toggleShowOpen()">
-                {{showOpen ? ('dashboard.filter.showAll' | translate) : ('dashboard.filter.showOpen' | translate)}}
-              </button>
-            </div>
-            <div class="col-sm-1">
-              <button class="btn btn-secondary" (click)="onClearSearch()">
-                {{'general.buttons.clear' | translate}}
-              </button>
-            </div>
-          </div>
+    <div *ngIf="locations.length > 0; else noLocations">
+        <div class="dashboard-item-container" fxLayout="row wrap" fxLayoutGap="32px" fxLayoutAlign="flex-start"
+            *ngIf="filteredLocations && filteredLocations.length > 0; else noMatchesFromFilter">
+            <app-dashboard-item fxFlex="0 1 calc(33% - 32px);" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%"
+                *ngFor="let location of filteredLocations" [location]="location"
+                [nextReservableFrom]="locationNextReservableFroms.get(location.name)">
+            </app-dashboard-item>
         </div>
-      </div>
-    </div>
-
-    <hr> -->
-
-
-    <div class="dashboard-item-container" fxLayout="row wrap" fxLayoutGap="32px" fxLayoutAlign="flex-start"
-      *ngIf="filteredLocations && filteredLocations.length > 0; else noMatchesFromFilter">
-      <app-dashboard-item fxFlex="0 1 calc(33% - 32px);" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%"
-        *ngFor="let location of filteredLocations" [location]="location"
-        [nextReservableFrom]="locationNextReservableFroms.get(location.name)">
-      </app-dashboard-item>
     </div>
-  </div>
 </div>
 
+<app-contact
+    title="Hellaur"
+    content="Lorem ipsum dolor sit amet, yappa yappa yappa yappa yappa.">
+</app-contact>
+
 <!-- Feedback to the user when the locations are loading/can't be retrieved -->
 <div class="container-fluid">
-  <div class="alert alert-info" *ngIf="successOnRetrievingLocations === null">
-    {{'general.waitingForServer' | translate}}
-  </div>
+    <div class="alert alert-info" *ngIf="successOnRetrievingLocations === null">
+        {{'general.waitingForServer' | translate}}
+    </div>
 
-  <div class="alert alert-error" *ngIf="successOnRetrievingLocations === false">
-    {{'dashboard.error' | translate}}
-  </div>
+    <div class="alert alert-error" *ngIf="successOnRetrievingLocations === false">
+        {{'dashboard.error' | translate}}
+    </div>
 </div>
 
 <ng-template #noMatchesFromFilter>
-  <div class="alert alert-warning">
-    {{'dashboard.filter.noMatchesFromFilter' | translate}}
-  </div>
+    <div class="alert alert-warning">
+        {{'dashboard.filter.noMatchesFromFilter' | translate}}
+    </div>
 </ng-template>
 
 <ng-template #noLocations>
-  <div class="alert alert-warning">
-    {{'dashboard.noLocations' | translate}}
-  </div>
+    <div class="alert alert-warning">
+        {{'dashboard.noLocations' | translate}}
+    </div>
 </ng-template>
 
 <!-- Label to remove warning, not set -->
 <label for="search"></label>
 
 <section class="highlight highlight--top banner">
-  <div class="highlight__inner" markdown *ngIf="currentLanguage() | async as currlan"
-    src="assets/md/banner.{{currlan}}.md">>
-  </div>
-</section>
+    <div class="highlight__inner" markdown *ngIf="currentLanguage() | async as currlan"
+        src="assets/md/banner.{{currlan}}.md">>
+    </div>
+</section>

frontend/src/app/components/faq/faq-search/faq-search.component.html

@@ -27,10 +27,17 @@
             <p>{{ 'faq.search.noResults' | translate }}</p>
         </ng-container>
     </ng-container>
-    <h3 class="mb-4">{{ 'faq.search.popular' | translate }}</h3>
-    <ul class="icon-list mb-0" *ngIf="$pinned | async as pinned">
-        <li *ngFor="let item of pinned">
-            <i class="icon-arrow-right" aria-hidden="true"></i> <a [routerLink]="['/faq', item.id]">{{ item.title.translations[locale] }}</a>
-        </li>
-    </ul>
+    <h3 class="mb-4">
+        {{ 'faq.search.popular' | translate }}
+    </h3>
+    <ng-container *ngIf="$pinned | async as pinned">
+        <ul class="icon-list mb-0" *ngIf="pinned.length > 0">
+            <li *ngFor="let item of pinned">
+                <i class="icon-arrow-right" aria-hidden="true"></i> <a [routerLink]="['/faq', item.id]">{{ item.title.translations[locale] }}</a>
+            </li>
+        </ul>
+        <ng-container *ngIf="pinned.length === 0">
+            <p>{{ 'faq.search.noResults' | translate }}</p>
+        </ng-container>
+    </ng-container>
 </ng-container>

frontend/src/app/components/faq/faq.component.html

@@ -19,28 +19,10 @@
                 </div>
 
                 <!-- Contact footer -->
-                <section class="highlight contact-details highlight--top">
-                    <div class="highlight__inner">
-                        <h2 class="my-0">
-                            {{ 'faq.contact.title' | translate }}
-                        </h2>
-
-                        <p class="my-4">
-                            {{ 'faq.contact.subtitle' | translate }}
-                        </p>
-
-                        <div class="contact-details-column">
-                            <ul class="icon-list mb-0">
-                                <li><i class="icon-marker" aria-hidden="true"></i><strong>De Therminal</strong> — Hoveniersberg 24, 9000 Gent</li>
-                                <li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:[email protected]" alt="Person mail link">[email protected]</a></li>
-                                <li><i class="icon-url" aria-hidden="true"></i><a href="https://bloklocaties.stad.gent" alt="Website link">https://bloklocaties.stad.gent</a></li>
-                            </ul>
-                        </div>
-
-                        <div class="contact-details-column"></div>
-
-                    </div>
-                </section>
+                 <app-contact
+                    [title]="'faq.contact.title' | translate"
+                    [content]="'faq.contact.subtitle' | translate">
+                 </app-contact>
             </div>
         </div>
     </div>

frontend/src/app/components/management/faq-management/faq-management.component.ts

@@ -1,15 +1,15 @@
-import {Component, ViewChild} from '@angular/core';
-import {FaqService} from '@/services/api/faq/faq.service';
-import {BaseManagementComponent} from '@/components/management/base-management.component';
-import {FaqItem} from '@/model/FaqItem';
-import {ModalComponent} from '@/components/stad-gent-components/molecules/modal/modal.component';
-import {EMPTY, Observable} from 'rxjs';
-import {FaqCategory} from '@/model/FaqCategory';
-import {AbstractControl, FormBuilder, Validators} from '@angular/forms';
-import {TableMapper} from '@/model/Table';
-import {TranslateService} from '@ngx-translate/core';
+import { BaseManagementComponent } from '@/components/management/base-management.component';
+import { ModalComponent } from '@/components/stad-gent-components/molecules/modal/modal.component';
+import { FaqCategory } from '@/model/FaqCategory';
+import { FaqItem } from '@/model/FaqItem';
+import { TableMapper } from '@/model/Table';
+import { FaqService } from '@/services/api/faq/faq.service';
+import { Component, ViewChild } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
 import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
-import {startWith, switchMap, tap} from 'rxjs/operators';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 
 @Component({
     selector: 'app-faq-management',

frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.html

@@ -0,0 +1,33 @@
+<section class="highlight contact-details  highlight--top">
+    <div class="highlight__inner">
+        <h2 class="my-0">
+            {{ title }}
+        </h2>
+
+        <p class="my-4 w-100">
+            {{ content }}
+        </p>
+
+        <div class="contact-details-column">
+            <ul class="icon-list">
+                <li>
+                    <i class="icon-marker" aria-hidden="true"></i>
+                    <strong>{{ contact.building }}</strong> — {{ contact.address }}
+                </li>
+                <li>
+                    <i class="icon-envelope" aria-hidden="true"></i>
+                    <a [href]="contact.email" alt="Person mail link">
+                        {{ contact.email }}
+                    </a>
+                </li>
+                <li>
+                    <i class="icon-url" aria-hidden="true"></i>
+                    <a [href]="contact.website" alt="Website link">
+                        {{ contact.website }}
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</section>
+

frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactComponent } from './contact.component';
+
+describe('ContactComponent', () => {
+  let component: ContactComponent;
+  let fixture: ComponentFixture<ContactComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ContactComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ContactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.ts

@@ -0,0 +1,28 @@
+import { contact } from '@/app.constants';
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-contact',
+    templateUrl: './contact.component.html',
+    styleUrls: ['./contact.component.scss']
+})
+export class ContactComponent implements OnInit {
+    /* Component input attributes */
+    @Input() public title: string;
+    @Input() public content: string;
+
+    /* Component state */
+    public contact: any;
+
+    /**
+     * Constructor.
+     */
+    constructor() {
+        this.contact = contact;
+    }
+
+    ngOnInit(): void {
+
+    }
+
+}

frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.html

@@ -0,0 +1,11 @@
+<section class="highlight contact-details highlight--top">
+    <div class="highlight__inner">
+        <h2 class="my-0">
+            {{ title }}
+        </h2>
+
+        <p class="my-4">
+            {{ content }}
+        </p>
+    </div>
+</section>

frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HighlightComponent } from './highlight.component';
+
+describe('HighlightComponent', () => {
+  let component: HighlightComponent;
+  let fixture: ComponentFixture<HighlightComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HighlightComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HighlightComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-highlight',
+    templateUrl: './highlight.component.html',
+    styleUrls: ['./highlight.component.scss']
+})
+export class HighlightComponent implements OnInit {
+
+    /* Component input attributes */
+    @Input() public title: string;
+    @Input() public content: string;
+
+    ngOnInit(): void {
+
+    }
+
+}