feat: dish certifications

2026-01-21 09:03:02 +00:00 · 2023-07-18 14:42:30 +02:00
parent c9240f289e
commit b085850207
16 changed files with 175 additions and 28 deletions
--- a/frontend/app/src/app/modules/data/data-icon.config.ts
+++ b/frontend/app/src/app/modules/data/data-icon.config.ts
@@ -1,16 +1,16 @@
 /*
- * Copyright (C) 2022 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.
+ * 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.
+ * 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/>.
+ * 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 {SCThingType} from '@openstapps/core';
 import {SCIcon} from '../../util/ion-icon/icon';
@@ -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`,
--- a/frontend/app/src/app/modules/data/data.module.ts
+++ b/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,
--- a/frontend/app/src/app/modules/data/elements/certifications-in-detail.component.ts
+++ b/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[] = [];
+}
--- a/frontend/app/src/app/modules/data/elements/certifications-in-detail.html
+++ b/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>
--- a/frontend/app/src/app/modules/data/elements/certifications-in-detail.scss
+++ b/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%);
+  }
+}
--- a/frontend/app/src/app/modules/data/types/dish/dish-characteristics.html
+++ b/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>
--- a/frontend/app/src/app/modules/data/types/dish/dish-characteristics.scss
+++ b/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: '•';
-    margin-inline: var(--spacing-xs);
-  }
+}
+
+img {
+  height: 100%;
+  background: var(--background-url);
+}
+
+.sep {
+  display: none;
+  margin-inline: var(--spacing-xs);
+}
+
+abbr + .sep {
+  display: revert;
 }
--- a/frontend/app/src/app/modules/data/types/dish/dish-detail-content.component.ts
+++ b/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;
 }
--- a/frontend/app/src/app/modules/data/types/dish/dish-detail-content.html
+++ b/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>{{
--- a/frontend/app/src/app/translation/i18n.spec.ts
+++ b/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 = [
--- a/frontend/app/src/assets/i18n/de.json
+++ b/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",
--- a/frontend/app/src/assets/i18n/en.json
+++ b/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",
--- a/frontend/app/src/assets/icons.min.woff2
+++ b/frontend/app/src/assets/icons.min.woff2