feat: show in-place in date series modal, resolves #385

feat: show start date for date series modal ranges, resolves #386
refactor: reformat date series modal to be more readable
fix: add message for malformed date series, resolves #388

src/app/modules/data/chips/edit-event-selection.html

@@ -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.
@@ -38,20 +38,39 @@
       *ngFor="let date of frequency.children"
       (click)="modified.emit(); date.selected = !date.selected; frequency.notifyChildChanged()"
     >
-      <ion-label *ngIf="date.item.dates.length > 1; else single_event" class="ion-text-wrap">
-        {{ date.item.duration | amDuration: 'hours' }}
-        {{ 'data.chips.add_events.popover.AT' | translate }}
-        {{ date.item.dates[0] | amDateFormat: 'HH:mm ddd' }}
-        {{ 'data.chips.add_events.popover.UNTIL' | translate }}
-        {{ date.item.dates[date.item.dates.length - 1] | amDateFormat: 'll' }}
+      <ion-label>
+        <ng-container *ngIf="date.item.dates.length > 1; else single_event">
+          <ion-text>
+            {{ date.item.dates[0] | amDateFormat: 'dddd, LT' }} -
+            {{ date.item.dates[0] | amAdd: date.item.duration | amDateFormat: 'LT' }}
+          </ion-text>
+          <br />
+          <ion-text>
+            {{ date.item.dates[0] | amDateFormat: 'LL' }} -
+            {{ date.item.dates[date.item.dates.length - 1] | amDateFormat: 'LL' }}
+          </ion-text>
+        </ng-container>
+        <ng-template #single_event>
+          <ion-text *ngIf="date.item.dates[0] as time; else noDates">
+            {{ time | amDateFormat: 'LL, LT' }} -
+            {{ time | amAdd: date.item.duration | amDateFormat: 'LT' }}
+          </ion-text>
+          <ng-template #noDates>
+            <ion-text color="danger">{{ 'data.chips.add_events.popover.DATA_ERROR' | translate }}</ion-text>
+            <br />
+            <ion-text *ngFor="let id of date.item.identifiers | keyvalue">
+              {{ id.key }}: {{ id.value }}
+            </ion-text>
+          </ng-template>
+        </ng-template>
+        <ng-container class="ion-align-items-center" *ngIf="date.item.inPlace">
+          <br />
+          <ion-text color="medium" class="place">
+            <ion-icon name="pin_drop"></ion-icon>
+            <span> {{ 'inPlace.name' | thingTranslate: date.item }}</span>
+          </ion-text>
+        </ng-container>
       </ion-label>
-      <ng-template #single_event>
-        <ion-label class="ion-text-wrap">
-          {{ date.item.duration | amDuration: 'hours' }}
-          {{ 'data.chips.add_events.popover.AT' | translate }}
-          {{ date.item.dates[date.item.dates.length - 1] | amDateFormat: 'll, HH:mm' }}
-        </ion-label>
-      </ng-template>
       <ion-checkbox slot="end" [checked]="date.selected"> </ion-checkbox>
     </ion-item>
   </ion-list>

src/app/modules/data/chips/edit-event-selection.scss

@@ -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.
@@ -42,3 +42,8 @@ ion-item-divider.ios > ion-checkbox {
 ion-list.md {
   padding-top: 0;
 }
+
+.place {
+  display: inline-flex;
+  align-items: center;
+}

src/assets/i18n/de.json

@@ -153,7 +153,8 @@
           "ALL": "Alle Termine",
           "AT": "um",
           "UNTIL": "bis",
-          "SINGLE": "Einzel"
+          "SINGLE": "Einzel",
+          "DATA_ERROR": "Fehlerhafte Daten"
         }
       }
     },

src/assets/i18n/en.json

@@ -153,7 +153,8 @@
           "ALL": "All Events",
           "AT": "at",
           "UNTIL": "until",
-          "SINGLE": "single"
+          "SINGLE": "single",
+          "DATA_ERROR": "Invalid data"
         }
       }
     },