feat: sport course booking

frontend/app/src/app/app.module.ts

@@ -70,6 +70,7 @@ import {setDefaultOptions} from 'date-fns';
 import {DateFnsConfigurationService} from 'ngx-date-fns';
 import {Capacitor} from '@capacitor/core';
 import {SplashScreen} from '@capacitor/splash-screen';
+import {SportCoursesModule} from './modules/sport-courses/sport-courses.module';
 
 registerLocaleData(localeDe);
 
@@ -170,6 +171,7 @@ export function createTranslateLoader(http: HttpClient) {
     ScheduleModule,
     SettingsModule,
     StorageModule,
+    SportCoursesModule,
     ThingTranslateModule.forRoot(),
     TranslateModule.forRoot({
       defaultLanguage: 'en',

frontend/app/src/app/modules/data/chips/action-chip-list.component.ts

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component, Input} from '@angular/core';
-import {SCDateSeries, SCThingType, SCThings} from '@openstapps/core';
+import {SCThingType, SCThings} from '@openstapps/core';
 
 /**
  * Shows a horizontal list of action chips
@@ -47,9 +47,7 @@ export class ActionChipListComponent {
     const isNullIsland = maybeCoords ? maybeCoords[0] === 0 && maybeCoords[1] === 0 : false;
     this.applicable = {
       locate: false, // TODO: reimplement this at a later date
-      event:
-        item.type === SCThingType.AcademicEvent ||
-        (item.type === SCThingType.DateSeries && (item as SCDateSeries).dates.length > 0),
+      event: item.type === SCThingType.AcademicEvent || item.type === SCThingType.SportCourse,
       navigate: (hasDirectGeo || isInPlace) && !isNullIsland,
     };
   }

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

@@ -39,7 +39,7 @@ export const DataIcons: Record<SCThingType, string> = {
   'room': SCIcon`meeting_room`,
   'semester': SCIcon`date_range`,
   'setting': SCIcon`settings`,
-  'sport course': SCIcon`sports_soccer`,
+  'sport course': SCIcon`sports_gymnastics`,
   'study module': SCIcon`view_module`,
   'ticket': SCIcon`confirmation_number`,
   'todo': SCIcon`task`,

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

@@ -107,6 +107,8 @@ import {SemesterListItemComponent} from './types/semester/semester-list-item.com
 import {VideoDetailContentComponent} from './types/video/video-detail-content.component';
 import {VideoListItemComponent} from './types/video/video-list-item.component';
 import {ShareButtonComponent} from './elements/share-button.component';
+import {SanitizeHtmlPipe} from '../../util/sanitize-html.pipe';
+import {BypassTrustUrlPipe} from '../../util/bypass-trust-url.pipe';
 
 /**
  * Module for handling data
@@ -193,6 +195,8 @@ import {ShareButtonComponent} from './elements/share-button.component';
     MarkdownModule.forRoot(),
     MenuModule,
     IonIconModule,
+    SanitizeHtmlPipe,
+    BypassTrustUrlPipe,
     MomentModule.forRoot({
       relativeTimeThresholdOptions: {
         m: 59,

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

@@ -13,12 +13,23 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component, Input} from '@angular/core';
-import {SCAcademicPriceGroup, SCThingThatCanBeOfferedOffer} from '@openstapps/core';
+import {SCAcademicPriceGroup, SCThingThatCanBeOffered, SCThingType, SCThings} from '@openstapps/core';
+import {SimpleBrowser} from 'src/app/util/browser.factory';
+
+type WithRequired<T, K extends keyof T> = T & {[P in K]-?: T[P]};
 
 @Component({
   selector: 'stapps-offers-detail',
   templateUrl: 'offers-detail.html',
 })
 export class OffersDetailComponent {
-  @Input() offers: Array<SCThingThatCanBeOfferedOffer<SCAcademicPriceGroup>>;
+  @Input() item: SCThings & WithRequired<SCThingThatCanBeOffered<SCAcademicPriceGroup>, 'offers'>;
+
+  constructor(readonly browser: SimpleBrowser) {}
+
+  async submit(id: string) {
+    if (this.item.type === SCThingType.DateSeries && this.item.event.type === SCThingType.SportCourse) {
+      this.browser.open(`${this.item.event.sameAs}#${id}`);
+    }
+  }
 }

frontend/app/src/app/modules/data/elements/offers-detail.html

@@ -16,7 +16,7 @@
 <ion-card>
   <ion-card-header>{{ 'data.detail.offers.TITLE' | translate | titlecase }}</ion-card-header>
   <ion-card-content>
-    <div *ngFor="let offer of offers">
+    <div *ngFor="let offer of item.offers">
       <ion-grid>
         <ion-row>
           <ion-col *ngIf="offer.inPlace">
@@ -45,16 +45,24 @@
           </ng-container>
         </ion-row>
       </ion-grid>
-      <ion-grid *ngIf="offer.availability === 'out of stock'">
-        <ion-row>
-          <ion-col></ion-col>
-          <ion-col width-20 text-right>
-            <ion-text color="danger">
-              <p>{{ 'data.detail.offers.sold_out' | translate }}</p>
-            </ion-text>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
+      <ion-button
+        *ngIf="item.identifiers?.zfh as id; else availability"
+        (click)="submit(id)"
+        [color]="offer.availability === 'out of stock' ? 'danger' : offer.availability === 'limited availability' ? 'warning' :  'primary'"
+        >{{'data.detail.offers.' + offer.availability | translate}}</ion-button
+      >
+      <ng-template #availability>
+        <ion-grid *ngIf="offer.availability === 'out of stock'">
+          <ion-row>
+            <ion-col></ion-col>
+            <ion-col width-20 text-right>
+              <ion-text color="danger">
+                <p>{{ 'data.detail.offers.' + offer.availability | translate }}</p>
+              </ion-text>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+      </ng-template>
     </div>
   </ion-card-content>
 </ion-card>

frontend/app/src/app/modules/data/elements/offers-in-list.html

@@ -18,7 +18,7 @@
     <h2>{{ price | currency : 'EUR' : 'symbol' : undefined : 'de' }}</h2>
   </ion-text>
   <ion-text *ngIf="soldOut" color="danger" class="sold-out" style="white-space: nowrap">
-    <h2>{{ 'data.detail.offers.sold_out' | translate }}</h2>
+    <h2>{{ 'data.detail.offers.out of stock' | translate }}</h2>
   </ion-text>
   <p *ngIf="_offers[0].inPlace && !soldOut" class="place" style="white-space: nowrap">
     <ion-icon name="pin_drop"></ion-icon>{{ _offers[0].inPlace.name }}<span *ngIf="_offers.length > 1"

frontend/app/src/app/modules/data/elements/title-card.component.html

@@ -30,20 +30,5 @@
     <div *ngIf="$any(item).openingHours as openingHours" class="opening-hours">
       <stapps-opening-hours [openingHours]="openingHours"></stapps-opening-hours>
     </div>
-    <!-- TODO obviously this is bad style. Tbd where to put the differentiation. Job Postings always have a description, but it's going to be shown in `stapps-job-posting-detail-content` anyways, no need to repeat here. For this view, I would use other fields of the schema.org JobPosting like the `ThingWithCategory.category` -->
-    <div *ngIf="item.description && item.type !== 'job posting'" class="description">
-      <div class="text-accordion" [style.-webkit-line-clamp]="descriptionLinesToDisplay" #accordionTextArea>
-        {{ 'description' | thingTranslate: item }}
-      </div>
-    </div>
-    <!-- TODO see above -->
-    <ion-button
-      expand="full"
-      fill="clear"
-      *ngIf="item.description && item.type !== 'job posting' && buttonShown"
-      (click)="toggleDescriptionAccordion()"
-    >
-      <ion-icon [name]="buttonState" size="large"></ion-icon>
-    </ion-button>
   </ion-card-content>
 </ion-card>

frontend/app/src/app/modules/data/elements/title-card.component.scss

@@ -13,14 +13,6 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-.text-accordion {
-  overflow: hidden;
-  display: -webkit-box;
-  text-overflow: ellipsis;
-
-  -webkit-box-orient: vertical;
-}
-
 ion-card {
   --background: var(--ion-color-primary);
 
@@ -40,10 +32,6 @@ ion-card {
   ion-card-content {
     padding: 0 0 var(--header-spacing-bottom);
 
-    .description * {
-      color: var(--ion-color-primary-contrast);
-    }
-
     .opening-hours {
       color: var(--ion-color-primary-contrast);
     }

frontend/app/src/app/modules/data/elements/title-card.component.ts

@@ -13,81 +13,17 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Component, ElementRef, HostListener, Input, OnChanges, OnInit, ViewChild} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {SCThings} from '@openstapps/core';
-import {SCIcon} from '../../../util/ion-icon/icon';
-
-const AccordionButtonState = {
-  collapsed: SCIcon`expand_more`,
-  expanded: SCIcon`expand_less`,
-};
 
 @Component({
   selector: 'stapps-title-card',
   templateUrl: './title-card.component.html',
   styleUrls: ['./title-card.component.scss'],
 })
-export class TitleCardComponent implements OnInit, OnChanges {
+export class TitleCardComponent {
   /**
    * The item whose title (and description) to display
    */
   @Input() item: SCThings;
-
-  @ViewChild('accordionTextArea') accordionTextArea: ElementRef;
-
-  buttonState = AccordionButtonState.collapsed;
-
-  buttonShown = true;
-
-  descriptionLinesShown: number;
-
-  descriptionLinesTotal: number;
-
-  descriptionPreviewLines = 3;
-
-  descriptionLinesToDisplay = 0;
-
-  ngOnInit(): void {
-    if (this.item.description) {
-      this.descriptionLinesToDisplay = this.descriptionPreviewLines;
-      setTimeout(() => this.checkTextElipsis(), 100);
-    }
-  }
-
-  ngOnChanges() {
-    this.checkTextElipsis();
-  }
-
-  @HostListener('window:resize', ['$event'])
-  checkTextElipsis() {
-    if (this.accordionTextArea === undefined) {
-      return;
-    }
-    const element = this.accordionTextArea.nativeElement as HTMLElement;
-
-    const lineHeight = Number.parseInt(getComputedStyle(element).getPropertyValue('line-height'));
-    this.descriptionLinesTotal = element?.scrollHeight / lineHeight;
-    this.descriptionLinesShown = element?.offsetHeight / lineHeight;
-    if (this.buttonState === AccordionButtonState.expanded) {
-      this.descriptionLinesToDisplay = this.descriptionLinesTotal;
-    }
-    const isElipsed = element?.offsetHeight < element?.scrollHeight;
-    this.buttonShown =
-      (isElipsed && this.buttonState === AccordionButtonState.collapsed) ||
-      (!isElipsed && this.buttonState === AccordionButtonState.expanded);
-  }
-
-  toggleDescriptionAccordion() {
-    if (this.descriptionLinesToDisplay > 0) {
-      this.descriptionLinesToDisplay =
-        this.descriptionLinesToDisplay === this.descriptionPreviewLines
-          ? this.descriptionLinesTotal
-          : this.descriptionPreviewLines;
-    }
-    this.buttonState =
-      this.buttonState === AccordionButtonState.collapsed
-        ? AccordionButtonState.expanded
-        : AccordionButtonState.collapsed;
-    setTimeout(() => this.checkTextElipsis(), 0);
-  }
 }

frontend/app/src/app/modules/data/list/data-list-item-host.directive.ts

@@ -40,7 +40,7 @@ const DataListItemIndex: Partial<Record<SCThingType, Type<DataListItem>>> = {
   [SCThingType.Dish]: DishListItemComponent,
   [SCThingType.DateSeries]: DateSeriesListItemComponent,
   [SCThingType.AcademicEvent]: EventListItemComponent,
-  [SCThingType.SportCourse]: DateSeriesListItemComponent,
+  [SCThingType.SportCourse]: EventListItemComponent,
   [SCThingType.Favorite]: FavoriteListItemComponent,
   [SCThingType.Message]: MessageListItemComponent,
   [SCThingType.Organization]: OrganizationListItemComponent,

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

@@ -50,7 +50,7 @@
   [title]="'performers' | propertyNameTranslate : item | titlecase"
   [content]="item.performers"
 ></stapps-simple-card>
-<stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
+<stapps-offers-detail *ngIf="item.offers" [item]="$any(item)"></stapps-offers-detail>
 <ion-card>
   <ion-card-header> {{ 'event' | propertyNameTranslate : item | titlecase }} </ion-card-header>
   <ion-card-content>

frontend/app/src/app/modules/data/types/date-series/date-series-list-item.html

@@ -20,7 +20,7 @@
         <ion-label class="title">{{ 'event.name' | thingTranslate : item }}</ion-label>
         <p>
           <ion-icon name="calendar_today"></ion-icon>
-          <span *ngIf="item.dates[0] && item.dates[item.dates.length - 1]">
+          <span *ngIf="item.dates && item.dates[0] && item.dates[item.dates.length - 1]">
             <span *ngIf="item.repeatFrequency">
               {{ item.repeatFrequency | durationLocalized : true | sentencecase }}, {{ item.dates[0] |
               dateFormat : 'weekday:long' }}
@@ -30,7 +30,7 @@
             </span>
           </span>
         </p>
-        <ion-note *ngIf="item.event.type === 'academic event'"
+        <ion-note *ngIf="item.event?.type === 'academic event'"
           >{{ 'categories' | thingTranslate : item.event | join : ', ' }}</ion-note
         >
       </div>

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

@@ -14,7 +14,7 @@
   -->
 
 <stapps-dish-characteristics *ngIf="item.characteristics" [item]="item"></stapps-dish-characteristics>
-<stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
+<stapps-offers-detail *ngIf="item.offers" [item]="$any(item)"></stapps-offers-detail>
 <stapps-certifications-in-detail
   *ngIf="item.certifications"
   [certifications]="item.certifications"

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

@@ -13,7 +13,15 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component, Input} from '@angular/core';
-import {SCAcademicEvent, SCSportCourse, SCThing, SCThingTranslator, SCTranslations} from '@openstapps/core';
+import {
+  SCAcademicEvent,
+  SCDateSeries,
+  SCSportCourse,
+  SCThing,
+  SCThingType,
+  SCTranslations,
+} from '@openstapps/core';
+import {DataProvider} from '../../data.provider';
 
 /**
  * TODO
@@ -24,30 +32,41 @@ import {SCAcademicEvent, SCSportCourse, SCThing, SCThingTranslator, SCTranslatio
   styleUrls: ['event-detail-content.scss'],
 })
 export class EventDetailContentComponent {
-  /**
-   * TODO
-   */
-  @Input() item: SCAcademicEvent | SCSportCourse;
+  @Input() set item(value: SCAcademicEvent | SCSportCourse) {
+    this._item = value;
+    this.dateSeries = this.dataProvider
+      .search({
+        filter: {
+          type: 'boolean',
+          arguments: {
+            operation: 'and',
+            filters: [
+              {
+                type: 'value',
+                arguments: {
+                  field: 'type',
+                  value: SCThingType.DateSeries,
+                },
+              },
+              {
+                type: 'value',
+                arguments: {
+                  field: 'event.uid',
+                  value: value.uid,
+                },
+              },
+            ],
+          },
+        },
+      })
+      .then(result => result.data as SCDateSeries[]);
+  }
+
+  _item: SCAcademicEvent | SCSportCourse;
+
+  dateSeries: Promise<SCDateSeries[]>;
 
-  /**
-   * TODO
-   */
   @Input() language: keyof SCTranslations<SCThing>;
 
-  /**
-   * TODO
-   */
-  objectKeys = Object.keys;
-
-  /**
-   * TODO
-   */
-  translator: SCThingTranslator;
-
-  /**
-   * TODO
-   */
-  constructor() {
-    this.translator = new SCThingTranslator(this.language);
-  }
+  constructor(readonly dataProvider: DataProvider) {}
 }

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

@@ -12,39 +12,39 @@
   ~ You should have received a copy of the GNU General Public License along with
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
+<p *ngIf="'description' | thingTranslate: _item as description" [innerHtml]="description | sanitizeHtml"></p>
 
 <stapps-simple-card
-  *ngIf="item.type === 'academic event' && item.categories"
-  [title]="'categories' | propertyNameTranslate : item | titlecase"
-  [content]="'categories' | thingTranslate : item"
+  *ngIf="_item.type === 'academic event' && _item.categories"
+  [title]="'categories' | propertyNameTranslate : _item | titlecase"
+  [content]="'categories' | thingTranslate : _item"
 >
 </stapps-simple-card>
 
-<stapps-add-event-action-chip *ngIf="item.type === 'academic event'" [item]="item">
-</stapps-add-event-action-chip>
+<stapps-add-event-action-chip [item]="_item"></stapps-add-event-action-chip>
 
 <stapps-simple-card
-  *ngIf="item.performers"
-  [title]="'performers' | propertyNameTranslate : item | titlecase"
-  [content]="item.performers"
+  *ngIf="_item.performers"
+  [title]="'performers' | propertyNameTranslate : _item | titlecase"
+  [content]="_item.performers"
 ></stapps-simple-card>
 <stapps-simple-card
-  *ngIf="item.organizers"
-  [title]="'organizers' | propertyNameTranslate : item | titlecase"
-  [content]="item.organizers"
+  *ngIf="_item.organizers"
+  [title]="'organizers' | propertyNameTranslate : _item | titlecase"
+  [content]="_item.organizers"
 ></stapps-simple-card>
-<ng-container *ngIf="item.type === 'academic event'">
+<ng-container *ngIf="_item.type === 'academic event'">
   <stapps-simple-card
-    *ngIf="item.majors"
-    [title]="'majors' | propertyNameTranslate : item"
-    [content]="item.majors"
+    *ngIf="_item.majors"
+    [title]="'majors' | propertyNameTranslate : _item"
+    [content]="_item.majors"
   ></stapps-simple-card>
 </ng-container>
-<ion-card *ngIf="item.catalogs">
+<ion-card *ngIf="_item.catalogs">
   <ion-card-header>{{ 'superCatalogs' | propertyNameTranslate : 'catalog' | titlecase }}</ion-card-header>
   <ion-card-content>
     <event-route-path
-      *ngFor="let item of item.catalogs"
+      *ngFor="let item of _item.catalogs"
       [maxItems]="1"
       [itemsAfterCollapse]="1"
       [itemsBeforeCollapse]="0"
@@ -54,3 +54,4 @@
     </event-route-path>
   </ion-card-content>
 </ion-card>
+<stapps-simple-data-list [items]="dateSeries"></stapps-simple-data-list>

frontend/app/src/app/modules/data/types/event/event-detail-content.scss

@@ -13,6 +13,10 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
+p {
+  margin-inline: var(--spacing-md);
+}
+
 stapps-add-event-action-chip {
   position: absolute;
   top: 0;

frontend/app/src/app/modules/data/types/event/event-list-item.component.ts

@@ -22,6 +22,7 @@ import {DataListItemComponent} from '../../list/data-list-item.component';
 @Component({
   selector: 'stapps-event-list-item',
   templateUrl: 'event-list-item.html',
+  styleUrls: ['event-list-item.scss'],
 })
 export class EventListItemComponent extends DataListItemComponent {
   /**

frontend/app/src/app/modules/data/types/event/event-list-item.html

@@ -14,27 +14,25 @@
   -->
 
 <ion-grid>
-  <ion-row *ngIf="item.type === 'academic event'">
+  <ion-row>
     <ion-col>
       <div class="ion-text-wrap">
         <ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
-        <p *ngIf="item.description" class="title-sub">{{ 'description' | thingTranslate: item }}</p>
+        <p
+          *ngIf="'description' | thingTranslate: item as description"
+          class="title-sub"
+          [innerHtml]="description | sanitizeHtml"
+        ></p>
         <p *ngIf="item.academicTerms" class="title-sub">
           {{ 'name' | thingTranslate: item.academicTerms[0] }}
         </p>
-        <ion-note *ngIf="!item.categories">{{ 'type' | thingTranslate: item | titlecase }}</ion-note>
-        <ion-note *ngIf="item.categories">
-          {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
-        </ion-note>
+        <ng-container *ngIf="item.type === 'academic event'">
+          <ion-note *ngIf="!item.categories">{{ 'type' | thingTranslate: item | titlecase }}</ion-note>
+          <ion-note *ngIf="item.categories">
+            {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
+          </ion-note>
+        </ng-container>
       </div>
     </ion-col>
   </ion-row>
-  <ion-row *ngIf="item.type === 'sport course'">
-    <ion-col>
-      <ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
-      <p *ngIf="item.description" class="title-sub">{{ 'description' | thingTranslate: item }}</p>
-      <p *ngIf="item.academicTerms" class="title-sub">{{ 'name' | thingTranslate: item.academicTerms[0] }}</p>
-      <ion-note>{{ 'type' | thingTranslate: item }}</ion-note>
-    </ion-col>
-  </ion-row>
 </ion-grid>

frontend/app/src/app/modules/data/types/event/event-list-item.scss

@@ -0,0 +1,5 @@
+.title-sub {
+  max-height: 2.8rem;
+  overflow: hidden;
+  opacity: 0.8;
+}

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

@@ -29,4 +29,4 @@
   [content]="item.datePublished | amDateFormat : 'll'"
 >
 </stapps-simple-card>
-<stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
+<stapps-offers-detail *ngIf="item.offers" [item]="$any(item)"></stapps-offers-detail>

frontend/app/src/app/modules/sport-courses/sport-course-search-page.component.ts

@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {DataModule} from '../data/data.module';
+import {TranslateModule} from '@ngx-translate/core';
+import {SCSearchFilter, SCThingType} from '@openstapps/core';
+
+@Component({
+  selector: 'stapps-sport-course-search-page',
+  templateUrl: 'sport-course-search-page.html',
+  standalone: true,
+  imports: [DataModule, TranslateModule],
+})
+export class SportCourseSearchPageComponent {
+  forcedFilter: SCSearchFilter = {
+    type: 'value',
+    arguments: {
+      field: 'type',
+      value: SCThingType.SportCourse,
+    },
+  };
+}

frontend/app/src/app/modules/sport-courses/sport-course-search-page.html

@@ -0,0 +1,6 @@
+<stapps-search-page
+  [title]="'sportCourses.title' | translate"
+  [placeholder]="'sportCourses.placeholder' | translate"
+  [showDefaultData]="true"
+  [forcedFilter]="forcedFilter"
+></stapps-search-page>

frontend/app/src/app/modules/sport-courses/sport-courses.module.ts

@@ -0,0 +1,8 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {SportCourseSearchPageComponent} from './sport-course-search-page.component';
+
+@NgModule({
+  imports: [RouterModule.forChild([{path: 'sport-courses', component: SportCourseSearchPageComponent}])],
+})
+export class SportCoursesModule {}

frontend/app/src/app/translation/thing-translate.parser.ts

@@ -45,7 +45,7 @@ export class ThingTranslateDefaultParser extends ThingTranslateParser {
     let property = instance as any;
 
     for (const key of keyPathChain) {
-      property = property[key] ?? undefined;
+      property = property?.[key] ?? undefined;
     }
 
     return property;

frontend/app/src/app/util/bypass-trust-url.pipe.ts

@@ -0,0 +1,15 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+
+@Pipe({
+  name: 'bypassSecurityTrustResourceUrl',
+  standalone: true,
+  pure: true,
+})
+export class BypassTrustUrlPipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {}
+
+  transform(url: string) {
+    return this.sanitizer.bypassSecurityTrustUrl(url);
+  }
+}

frontend/app/src/app/util/sanitize-html.pipe.ts

@@ -0,0 +1,15 @@
+import {Pipe, PipeTransform, SecurityContext} from '@angular/core';
+import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
+
+@Pipe({
+  name: 'sanitizeHtml',
+  standalone: true,
+  pure: true,
+})
+export class SanitizeHtmlPipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {}
+
+  transform(value: string): SafeHtml {
+    return this.sanitizer.sanitize(SecurityContext.HTML, value)!;
+  }
+}

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

@@ -153,7 +153,10 @@
         "employee": "Angestellte",
         "guest": "Gäste",
         "student": "Studierende",
-        "sold_out": "Ausverkauft!"
+        "out of stock": "Ausverkauft!",
+        "in stock": "Verfügbar",
+        "limited availability": "Begrenzte Verfügbarkeit",
+        "online only": "Nur online"
       }
     },
     "chips": {
@@ -420,6 +423,10 @@
     "instruction": "Finde alle Informationen rund ums Studium und den Campus",
     "nothing_found": "Keine Ergebnisse"
   },
+  "sportCourses": {
+    "title": "Sportkurse",
+    "placeholder": "Sportkurse"
+  },
   "hebisSearch": {
     "title": "Bibliothekssuche",
     "type": "Bibliothek",

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

@@ -153,7 +153,10 @@
         "employee": "Employees",
         "guest": "Guests",
         "student": "Students",
-        "sold_out": "Sold Out!"
+        "out of stock": "Sold Out!",
+        "in stock": "Available",
+        "limited": "Limited availability",
+        "online only": "Online only"
       }
     },
     "chips": {
@@ -420,6 +423,10 @@
     "instruction": "Find all information related to your studies and campus",
     "nothing_found": "No results"
   },
+  "sportCourses": {
+    "title": "Sport Courses",
+    "placeholder": "Sport courses"
+  },
   "hebisSearch": {
     "title": "Library Search",
     "type": "Library",

frontend/app/src/config/profile-page-sections.ts

@@ -93,6 +93,28 @@ export const profilePageSections: SCSection[] = [
         },
         ...SCSectionLinkConstantValues,
       },
+      {
+        name: 'Sport Courses',
+        icon: SCIcon`sports_gymnastics`,
+        link: ['/sport-courses'],
+        translations: {
+          de: {
+            name: 'Sportkurse',
+          },
+        },
+        ...SCSectionLinkConstantValues,
+      },
+      {
+        name: 'Job Postings',
+        icon: SCIcon`work`,
+        link: ['/jobs'],
+        translations: {
+          de: {
+            name: 'Stellenangebote',
+          },
+        },
+        ...SCSectionLinkConstantValues,
+      },
       {
         name: 'Settings',
         icon: SCIcon`settings`,

frontend/app/src/environments/environment.ts

@@ -18,7 +18,7 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  backend_url: 'https://mobile.server.uni-frankfurt.de',
+  backend_url: 'http://localhost:3000',
   app_host: 'mobile.app.uni-frankfurt.de',
   custom_url_scheme: 'de.anyschool.app',
   backend_version: '4.1.0',