219 lines
9.8 KiB
HTML
219 lines
9.8 KiB
HTML
<ion-header [translucent]="true">
|
|
<ion-toolbar>
|
|
<ion-buttons slot="start">
|
|
<ion-menu-button></ion-menu-button>
|
|
</ion-buttons>
|
|
<ion-title>Stundenplan</ion-title>
|
|
|
|
<ion-buttons slot="end">
|
|
<ion-button *ngIf="courses?.length == 0 && showCourses" (click)="loadAllCourses(); defaultModal.present()"><ion-icon ios="arrow-down-circle-outline" md="arrow-down-circle-sharp" /></ion-button>
|
|
<ion-button (click)="onEditOrAdd()"><ion-icon ios="add-circle-outline" md="add-circle-sharp" /></ion-button>
|
|
|
|
<ion-modal #courseModal (willDismiss)="updateOrCreateCourse($event)">
|
|
<ng-template>
|
|
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-buttons slot="start">
|
|
<ion-button (click)="courseModal.dismiss(null, 'cancel')">Abbrechen</ion-button>
|
|
</ion-buttons>
|
|
<ion-title>{{currentCourse?.name || "Neuer Kurs"}}</ion-title>
|
|
<ion-buttons slot="end">
|
|
<ion-button (click)="courseModal.dismiss({id: id.value, short: short.value, name: name.value, color: color.value}, 'confirm')" [strong]="true">Fertig</ion-button>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
<ion-content class="ion-padding course-content">
|
|
<ion-item>
|
|
<ion-label position="stacked">Farbe</ion-label>
|
|
<ion-select aria-label="Farbe" interface="action-sheet" [value]="currentCourse?.color || iserv.colors[0].val" #color>
|
|
<ion-select-option *ngFor="let color of iserv.colors" [value]="color.val">
|
|
{{color.name}}
|
|
</ion-select-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
<ion-item>
|
|
<ion-label position="stacked">Name</ion-label>
|
|
<ion-input aria-label="Name" type="text" [value]="currentCourse?.name" #name/>
|
|
</ion-item>
|
|
<ion-item>
|
|
<ion-label position="stacked">Kürzel</ion-label>
|
|
<ion-input aria-label="Kürzel" type="text" [value]="currentCourse?.short" #short/>
|
|
</ion-item>
|
|
<ion-item>
|
|
<ion-label position="stacked">Identifikator</ion-label>
|
|
<ion-input aria-label="Identifikator" type="text" [value]="currentCourse?.id" #id/>
|
|
</ion-item>
|
|
|
|
<ion-button *ngIf="currentCourse != undefined" (click)="courseModal.dismiss(null, 'delete')" color="danger">Kurs löschen</ion-button>
|
|
</ion-content>
|
|
</ng-template>
|
|
</ion-modal>
|
|
<ion-modal #tableModal (didDismiss)="updateOrCreateLesson($event)">
|
|
<ng-template>
|
|
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-buttons slot="start">
|
|
<ion-button (click)="tableModal.dismiss(null, 'cancel')">Abbrechen</ion-button>
|
|
</ion-buttons>
|
|
<ion-title>{{currentLesson?.lesson?.course || "Neue Stunde"}}</ion-title>
|
|
<ion-buttons slot="end">
|
|
<ion-button (click)="tableModal.dismiss({lesson: {course: course.value, room: room.value, week: week.value}, day: day.value, time: lesson.value}, 'confirm')" [strong]="true">Fertig</ion-button>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
<ion-content class="ion-padding course-content">
|
|
<ion-item>
|
|
<ion-label position="stacked">Kurs</ion-label>
|
|
<ion-select aria-label="Kurs" interface="action-sheet" [value]="currentLesson?.lesson?.course || courses[0].id" (ionChange)="room.value = getCommonCourseRoom(course.value)" #course>
|
|
<ion-select-option *ngFor="let course of courses" [value]="course.id">
|
|
{{course.name}}
|
|
</ion-select-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
<ion-item>
|
|
<ion-label position="stacked">Wochentyp</ion-label>
|
|
<ion-select aria-label="Wochentyp" interface="action-sheet" [value]="currentLesson?.lesson?.week || 'all'" #week>
|
|
<ion-select-option value="all">Immer</ion-select-option>
|
|
<ion-select-option value="a">Woche A</ion-select-option>
|
|
<ion-select-option value="b">Woche B</ion-select-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
<ion-item>
|
|
<ion-label position="stacked">Raum</ion-label>
|
|
<ion-input aria-label="Raum" type="text" [value]="currentLesson?.lesson?.room" #room/>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label position="stacked">Wochentag</ion-label>
|
|
<ion-select aria-label="Wochentag" interface="action-sheet" [value]="currentLesson?.day || 'mon'" #day>
|
|
<ion-select-option *ngFor="let dayName of ['mon', 'tue', 'wed', 'thu', 'fri']" [value]="dayName">
|
|
<ion-label *ngIf="dayName == 'mon'">Montag</ion-label>
|
|
<ion-label *ngIf="dayName == 'tue'">Dinstag</ion-label>
|
|
<ion-label *ngIf="dayName == 'wed'">Mittwoch</ion-label>
|
|
<ion-label *ngIf="dayName == 'thu'">Donnerstag</ion-label>
|
|
<ion-label *ngIf="dayName == 'fri'">Freitag</ion-label>
|
|
</ion-select-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
<ion-item>
|
|
<ion-label position="stacked">Stunde</ion-label>
|
|
<ion-select aria-label="Stunde" interface="action-sheet" [value]="currentLesson?.time || 0" #lesson>
|
|
<ion-select-option *ngFor="let lessonName of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]" [value]="lessonName">
|
|
{{lessonName + 1}}
|
|
</ion-select-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
<ion-button *ngIf="currentLesson != undefined" color="danger" (click)="tableModal.dismiss(null, 'delete')">Stunde löschen</ion-button>
|
|
</ion-content>
|
|
</ng-template>
|
|
</ion-modal>
|
|
<ion-modal #defaultModal (didDismiss)="saveCourses($event)">
|
|
<ng-template>
|
|
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-buttons slot="start">
|
|
<ion-button (click)="defaultModal.dismiss(null, 'cancel')">Abbrechen</ion-button>
|
|
</ion-buttons>
|
|
<ion-title>Kurse hinzufügen</ion-title>
|
|
<ion-buttons slot="end">
|
|
<ion-button (click)="defaultModal.dismiss(null, 'confirm')">Fertig</ion-button>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
<ion-content class="ion-padding course-content">
|
|
<ion-list>
|
|
<ion-item *ngFor="let course of allCourses; let i = index">
|
|
<ion-label>{{course.name}}</ion-label>
|
|
|
|
<ion-buttons slot="end">
|
|
<ion-button color="danger" (click)="allCourses.splice(i, 1)"><ion-icon ios="close-outline" md="close-sharp" /></ion-button>
|
|
</ion-buttons>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-input
|
|
label="Kürzel"
|
|
label-placement="floating"
|
|
maxlength="2"
|
|
style="width: 70px"
|
|
#newShort
|
|
/>
|
|
<ion-input
|
|
label="Name"
|
|
label-placement="floating"
|
|
#newName
|
|
/>
|
|
<ion-buttons slot="end">
|
|
<ion-button (click)="addToAll(newName.value.toString(), newShort.value.toString()); newShort.value = ''; newName.value = ''"><ion-icon ios="add-outline" md="add-sharp" /></ion-button>
|
|
</ion-buttons>
|
|
</ion-item>
|
|
</ion-list>
|
|
</ion-content>
|
|
</ng-template>
|
|
</ion-modal>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content [fullscreen]="true">
|
|
<ion-header collapse="condense">
|
|
<ion-toolbar>
|
|
<ion-title size="large">Stundenplan</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<section class="courses" *ngIf="showCourses">
|
|
<ion-item><ion-label>Meine Kurse</ion-label></ion-item>
|
|
<div class="course-container">
|
|
<ion-card *ngFor="let course of courses" (click)="onEditOrAdd(course)">
|
|
<ion-card-header>
|
|
<span
|
|
class="lesson-icon ion-text-center"
|
|
[style]="'--background: var(--ion-color-' + course.color + '); --foreground: var(--ion-color-' + course.color + '-contrast)'"
|
|
>
|
|
{{course.short}}
|
|
</span>
|
|
</ion-card-header>
|
|
<ion-card-content class="ion-text-center">
|
|
<ion-label>{{course.name}}</ion-label><br>
|
|
<ion-label>{{course.id}}</ion-label>
|
|
</ion-card-content>
|
|
</ion-card>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="timetable" *ngIf="!showCourses">
|
|
<div *ngFor="let day of ['mon', 'tue', 'wed', 'thu', 'fri']" class="ion-text-center">
|
|
<ion-label *ngIf="day == 'mon'">Mo</ion-label>
|
|
<ion-label *ngIf="day == 'tue'">Di</ion-label>
|
|
<ion-label *ngIf="day == 'wed'">Mi</ion-label>
|
|
<ion-label *ngIf="day == 'thu'">Do</ion-label>
|
|
<ion-label *ngIf="day == 'fri'">Fr</ion-label>
|
|
|
|
<lesson *ngFor="let lesson of timetable[day] | week; let i = index" [ngClass]="{'hide': lesson == undefined}" (click)="onEditOrAdd(undefined, {lesson, day, time: i})" [lesson]="lesson" [courses]="courses" />
|
|
</div>
|
|
</section>
|
|
</ion-content>
|
|
|
|
<ion-footer>
|
|
<ion-toolbar>
|
|
<ion-grid>
|
|
<ion-row>
|
|
<ion-col>
|
|
<ion-tab-button (click)="showCourses = false" [ngClass]="{'active': !showCourses}">
|
|
<ion-icon ios="grid-outline" md="grid-sharp" />
|
|
Stundenplan
|
|
</ion-tab-button>
|
|
</ion-col>
|
|
<ion-col>
|
|
<ion-tab-button (click)="showCourses = true" [ngClass]="{'active': showCourses}">
|
|
<ion-icon ios="list-outline" md="list-sharp" />
|
|
Kurse
|
|
</ion-tab-button>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
</ion-toolbar>
|
|
</ion-footer>
|