feat: dish certifications

frontend/app/package.json

@@ -96,7 +96,7 @@
     "jsonpath-plus": "6.0.1",
     "leaflet": "1.9.3",
     "leaflet.markercluster": "1.5.3",
-    "material-symbols": "0.4.1",
+    "material-symbols": "0.10.0",
     "moment": "2.29.4",
     "ngx-logger": "5.0.12",
     "ngx-markdown": "13.1.0",

frontend/app/src/app/modules/data/data-icon.config.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -21,7 +21,7 @@ export const DataIcons: Record<SCThingType, string> = {
   'article': SCIcon`article`,
   'book': SCIcon`book`,
   'building': SCIcon`location_city`,
-  'certification': SCIcon`fact_check`,
+  'certification': SCIcon`contract`,
   'catalog': SCIcon`inventory_2`,
   'contact point': SCIcon`contact_page`,
   'course of study': SCIcon`school`,

frontend/app/src/app/modules/data/data.module.ts

@@ -101,6 +101,7 @@ import {browserFactory, SimpleBrowser} from '../../util/browser.factory';
 import {StappsRatingComponent} from './elements/rating.component';
 import {DishCharacteristicsComponent} from './types/dish/dish-characteristics.component';
 import {SkeletonListComponent} from './list/skeleton-list.component';
+import {CertificationsInDetailComponent} from './elements/certifications-in-detail.component';
 
 /**
  * Module for handling data
@@ -113,6 +114,7 @@ import {SkeletonListComponent} from './list/skeleton-list.component';
     AddressDetailComponent,
     CatalogDetailContentComponent,
     CatalogListItemComponent,
+    CertificationsInDetailComponent,
     DishCharacteristicsComponent,
     DataDetailComponent,
     DataDetailContentComponent,

frontend/app/src/app/modules/data/elements/certifications-in-detail.component.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {Component, Input} from '@angular/core';
+import {SCCertificationWithoutReferences} from '@openstapps/core';
+
+@Component({
+  selector: 'stapps-certifications-in-detail',
+  templateUrl: 'certifications-in-detail.html',
+  styleUrls: ['certifications-in-detail.scss'],
+})
+export class CertificationsInDetailComponent {
+  @Input() certifications: SCCertificationWithoutReferences[] = [];
+}

frontend/app/src/app/modules/data/elements/certifications-in-detail.html

@@ -0,0 +1,43 @@
+<!--
+  ~ Copyright (C) 2023 StApps
+  ~ This program is free software: you can redistribute it and/or modify it
+  ~ under the terms of the GNU General Public License as published by the Free
+  ~ Software Foundation, version 3.
+  ~
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
+  -->
+<ion-card>
+  <ion-card-header>{{ 'data.types.certification.TITLE' | translate }}</ion-card-header>
+  <ion-card-content>
+    <div class="certification-list">
+      <ng-container *ngFor="let cert of certifications">
+        <img
+          (click)="popover.present($event)"
+          [width]="72"
+          [src]="'image' | thingTranslate: cert"
+          [alt]="'description' | thingTranslate: cert"
+        />
+        <ion-popover #popover>
+          <ng-template>
+            <ion-content class="ion-padding">
+              <ion-card-title>{{ 'name' | thingTranslate: cert }}</ion-card-title>
+              <ion-card-subtitle> {{ 'description' | thingTranslate: cert }} </ion-card-subtitle>
+            </ion-content>
+          </ng-template>
+        </ion-popover>
+      </ng-container>
+    </div>
+    <ion-note>
+      <stapps-external-link
+        [link]="'data.types.certification.EXTERNAL_INFO_URL' | translate"
+        [text]="'data.types.certification.EXTERNAL_INFO' | translate"
+      ></stapps-external-link>
+    </ion-note>
+  </ion-card-content>
+</ion-card>

frontend/app/src/app/modules/data/elements/certifications-in-detail.scss

@@ -0,0 +1,33 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+.certification-list {
+  container-type: inline-size;
+  width: 100%;
+  height: fit-content;
+}
+
+img {
+  cursor: pointer;
+  width: 25cqw;
+  max-width: 96px;
+  padding-inline-end: 4px;
+}
+
+@media (prefers-color-scheme: dark) {
+  img {
+    filter: invert(1) hue-rotate(180deg) brightness(135%);
+  }
+}

frontend/app/src/app/modules/data/types/dish/dish-characteristics.html

@@ -13,14 +13,29 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 <ion-note>
+  <ng-container *ngIf="item.certifications">
+    <ng-container *ngFor="let cert of item.certifications">
+      <abbr [title]="'description' | thingTranslate: cert">
+        <img
+          *ngIf="cert.compactImage"
+          [src]="'compactImage' | thingTranslate: cert"
+          height="16"
+          [alt]="'name' | thingTranslate: cert"
+        />
+      </abbr>
+    </ng-container>
+  </ng-container>
+  <div class="sep">•</div>
   <ng-container *ngIf="item.characteristics">
     <ng-container *ngFor="let characteristic of 'characteristics' | thingTranslate: item">
       <!-- Abbr tag shows the actual name on hover -->
       <abbr
         [style.--background-url]="'url(' + characteristic.image + ')'"
         [title]="characteristic.name | titlecase"
+        class="mask-image"
       ></abbr>
     </ng-container>
   </ng-container>
+  <div class="sep">•</div>
   <ion-label> {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }} </ion-label>
 </ion-note>

frontend/app/src/app/modules/data/types/dish/dish-characteristics.scss

@@ -12,15 +12,22 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
+$size: 16px;
+
 ion-note {
   list-style: none;
   display: flex;
   flex-direction: row-reverse;
+  align-items: center;
   justify-content: flex-start;
 }
 
 abbr {
-  width: 16px;
+  height: $size;
+}
+
+.mask-image {
+  width: $size;
   aspect-ratio: 1;
 
   background: var(--ion-color-medium);
@@ -30,9 +37,18 @@ abbr {
   mask-position: center;
   mask-size: contain;
   mask-mode: alpha;
-
+}
-  + ion-label::after {
+
-    content: '•';
+img {
-    margin-inline: var(--spacing-xs);
+  height: 100%;
-  }
+  background: var(--background-url);
+}
+
+.sep {
+  display: none;
+  margin-inline: var(--spacing-xs);
+}
+
+abbr + .sep {
+  display: revert;
 }

frontend/app/src/app/modules/data/types/dish/dish-detail-content.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2018, 2019 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -24,8 +24,5 @@ import {SCDish} from '@openstapps/core';
   templateUrl: 'dish-detail-content.html',
 })
 export class DishDetailContentComponent {
-  /**
-   * TODO
-   */
   @Input() item: SCDish;
 }

frontend/app/src/app/modules/data/types/dish/dish-detail-content.html

@@ -15,6 +15,10 @@
 
 <stapps-dish-characteristics *ngIf="item.characteristics" [item]="item"></stapps-dish-characteristics>
 <stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
+<stapps-certifications-in-detail
+  *ngIf="item.certifications"
+  [certifications]="item.certifications"
+></stapps-certifications-in-detail>
 <!-- unwanted by swffm
 <ion-card *ngIf="item.nutrition">
   <ion-card-header>{{

frontend/app/src/app/translation/i18n.spec.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -32,6 +32,7 @@ const exceptions = new Set([
   'home',
   'email',
   'logins',
+  'https://www.swffm.de/essen-trinken/uebersicht/umweltscore',
 ]);
 
 const languages = [

frontend/app/src/assets/i18n/de.json

@@ -179,6 +179,11 @@
           "PROTEIN": "Protein"
         }
       },
+      "certification": {
+        "TITLE": "Umweltscore",
+        "EXTERNAL_INFO": "Weitere Informationen zum Umweltscore im Studierendenwerk Frankfurt am Main",
+        "EXTERNAL_INFO_URL": "https://www.swffm.de/essen-trinken/uebersicht/umweltscore"
+      },
       "origin": {
         "TITLE": "Ursprung",
         "USER": "Nutzer",

frontend/app/src/assets/i18n/en.json

@@ -179,6 +179,11 @@
           "PROTEIN": "Protein"
         }
       },
+      "certification": {
+        "TITLE": "Environment-impact score",
+        "EXTERNAL_INFO": "More info about the environment-impact score at the Studierendenwerk Frankfurt am Main",
+        "EXTERNAL_INFO_URL": "https://www.swffm.de/essen-trinken/uebersicht/umweltscore"
+      },
       "origin": {
         "TITLE": "origin",
         "USER": "user",

packages/core/src/index.ts

@@ -24,6 +24,7 @@ export * from './things/article.js';
 export * from './things/assessment.js';
 export * from './things/book.js';
 export * from './things/building.js';
+export * from './things/certification.js';
 export * from './things/catalog.js';
 export * from './things/contact-point.js';
 export * from './things/course-of-study.js';

pnpm-lock.yaml

@@ -849,8 +849,8 @@ importers:
         specifier: 1.5.3
         version: 1.5.3(leaflet@1.9.3)
       material-symbols:
-        specifier: 0.4.1
+        specifier: 0.10.0
-        version: 0.4.1
+        version: 0.10.0
       moment:
         specifier: 2.29.4
         version: 2.29.4
@@ -13985,8 +13985,8 @@ packages:
     engines: {node: '>= 12'}
     hasBin: true
 
-  /material-symbols@0.4.1:
+  /material-symbols@0.10.0:
-    resolution: {integrity: sha512-rFHdDlN0yzXo46lcUVuJY0ygFcFuzcbvIxWHWUqSPGsBTMb642AOVSPK4BVEx8YG5SMPBO6BRdbnEeFnDjjcHA==}
+    resolution: {integrity: sha512-/C4LI/s8o1lz1M4AUA0qVQ3zqYGe3eF30ftRrtT48OY3pGOmScJFZo0TX0CGhoRNF2D59PNrpoccAyBBmtXoig==}
     dev: false
 
   /md5@2.3.0:
@@ -17135,7 +17135,7 @@ packages:
     engines: {node: '>= 10'}
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.3
+      debug: 4.3.4(supports-color@8.1.1)
       socks: 2.7.1
     transitivePeerDependencies:
       - supports-color