refactor: improve canteen related views

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

@@ -79,6 +79,7 @@ import {SemesterListItemComponent} from './types/semester/semester-list-item.com
 import {VideoListItemComponent} from './types/video/video-list-item.component';
 import {OriginInListComponent} from './elements/origin-in-list.component';
 import {CoordinatedSearchProvider} from './coordinated-search.provider';
+import {Geolocation} from '@ionic-native/geolocation/ngx';
 
 /**
  * Module for handling data
@@ -157,6 +158,7 @@ import {CoordinatedSearchProvider} from './coordinated-search.provider';
     CoordinatedSearchProvider,
     DataProvider,
     DataFacetsProvider,
+    Geolocation,
     Network,
     ScheduleProvider,
     StAppsWebHttpClient,

src/app/modules/data/list/food-data-list.component.ts

@@ -26,6 +26,26 @@ export class FoodDataListComponent extends SearchPageComponent {
    * Sets the forced filter to present only places for eating/drinking
    */
   initialize() {
+    if (this.positionService.position) {
+      this.sortQuery = {
+        type: 'distance',
+        order: 'asc',
+        arguments: {
+          field: 'geo.point.coordinates',
+          position: [
+            this.positionService.position.longitude,
+            this.positionService.position.latitude,
+          ],
+        },
+      };
+    }
+
+    this.sortQuery = {
+      arguments: {field: 'name'},
+      order: 'asc',
+      type: 'ducet',
+    };
+
     this.forcedFilter = {
       arguments: {
         filters: [

src/app/modules/data/list/search-page.component.ts

@@ -29,6 +29,7 @@ import {ContextMenuService} from '../../menu/context/context-menu.service';
 import {SettingsProvider} from '../../settings/settings.provider';
 import {DataRoutingService} from '../data-routing.service';
 import {DataProvider} from '../data.provider';
+import {PositionService} from '../../map/position.service';
 
 /**
  * SearchPageComponent queries things and shows list of things as search results and filter as context menu
@@ -123,8 +124,52 @@ export class SearchPageComponent implements OnInit, OnDestroy {
     protected readonly logger: NGXLogger,
     protected dataRoutingService: DataRoutingService,
     protected router: Router,
+    protected positionService: PositionService,
   ) {
     this.initialize();
+
+    combineLatest([
+      this.queryTextChanged.pipe(
+        debounceTime(this.searchQueryDueTime),
+        distinctUntilChanged(),
+        startWith(this.queryText),
+      ),
+      this.contextMenuService.filterQueryChanged$.pipe(
+        startWith(this.filterQuery),
+      ),
+      this.contextMenuService.sortQueryChanged$.pipe(startWith(this.sortQuery)),
+    ]).subscribe(async query => {
+      this.queryText = query[0];
+      this.filterQuery = query[1];
+      this.sortQuery = query[2];
+      this.from = 0;
+      await this.fetchAndUpdateItems();
+      this.queryChanged.next();
+    });
+
+    this.fetchAndUpdateItems();
+
+    /**
+     * Subscribe to 'settings.changed' events
+     */
+    this.subscriptions.push(
+      this.settingsProvider.settingsActionChanged$.subscribe(
+        ({type, payload}) => {
+          if (type === 'stapps.settings.changed') {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const {category, name, value} = payload!;
+            this.logger.log(`received event "settings.changed" with category:
+            ${category}, name: ${name}, value: ${JSON.stringify(value)}`);
+          }
+        },
+      ),
+      this.dataRoutingService.itemSelectListener().subscribe(item => {
+        void this.router.navigate(['data-detail', item.uid]);
+      }),
+      this.positionService
+        .watchCurrentLocation({maximumAge: 30_000})
+        .subscribe(),
+    );
   }
 
   /**

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

@@ -1,24 +1,40 @@
-<stapps-simple-card
-  [title]="'categories' | propertyNameTranslate: item | titlecase"
-  [content]="'categories' | thingTranslate: item"
->
-</stapps-simple-card>
-<ion-card *ngIf="item.characteristics">
-  <ion-card-header>{{
-    'characteristics' | propertyNameTranslate: item | titlecase
-  }}</ion-card-header>
-  <ion-card-content
-    *ngFor="let characteristic of 'characteristics' | thingTranslate: item"
+<ion-card>
+  <ion-card-content>
+    <h1>{{ 'name' | thingTranslate: item }}</h1>
+    {{ 'description' | thingTranslate: item }}</ion-card-content
   >
-    <p>
-      <img
-        *ngIf="characteristic.image"
-        [src]="characteristic.image"
-        alt=""
-      /><span> {{ characteristic.name }}</span>
-    </p>
-  </ion-card-content>
 </ion-card>
+<ion-grid>
+  <ion-row>
+    <ion-col>
+      <stapps-simple-card
+        [title]="'categories' | propertyNameTranslate: item | titlecase"
+        [content]="'categories' | thingTranslate: item"
+      ></stapps-simple-card>
+    </ion-col>
+    <ion-col>
+      <ion-card *ngIf="item.characteristics">
+        <ion-card-header>{{
+          'characteristics' | propertyNameTranslate: item | titlecase
+        }}</ion-card-header>
+        <ion-card-content
+          *ngFor="
+            let characteristic of 'characteristics' | thingTranslate: item
+          "
+        >
+          <p>
+            <img
+              *ngIf="characteristic.image"
+              [src]="characteristic.image"
+              alt=""
+            /><span> {{ characteristic.name }}</span>
+          </p>
+        </ion-card-content>
+      </ion-card>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
 <stapps-offers-detail
   *ngIf="item.offers"
   [offers]="item.offers"

src/app/modules/data/types/dish/dish-list-item.html

@@ -3,7 +3,9 @@
     <ion-col>
       <div class="ion-text-wrap">
         <h2 class="name">{{ 'name' | thingTranslate: item }}</h2>
-        <p>{{ 'description' | thingTranslate: item }}</p>
+        <p class="ion-hide-sm-down">
+          {{ 'description' | thingTranslate: item }}
+        </p>
         <p>{{ 'categories' | thingTranslate: item | join: ', ' }}</p>
       </div>
     </ion-col>

src/app/modules/data/types/place/special/mensa/place-mensa.html

@@ -1,3 +1,9 @@
+<ion-card>
+  <ion-card-content>
+    <h1>{{ 'name' | thingTranslate: item }}</h1>
+    {{ 'description' | thingTranslate: item }}</ion-card-content
+  >
+</ion-card>
 <ng-container>
   <div *ngIf="dishes | async as dishes; else loading">
     <ion-segment [(ngModel)]="selectedDay" mode="md">