feat: schedule layout

src/app/modules/schedule/page/schedule-view.html

@@ -0,0 +1,77 @@
+<!--
+  ~ 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.
+  ~
+  ~  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 Licens 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/>.
+  -->
+<!-- TODO: modularize duplicate stuff with `calendar-view` -->
+<div class="header">
+  <ion-button
+    fill="clear"
+    class="left-button"
+    (click)="mainSwiper.swiperRef.slidePrev()"
+  >
+    <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
+  </ion-button>
+  <ion-button
+    fill="clear"
+    class="right-button"
+    (click)="mainSwiper.swiperRef.slideNext()"
+  >
+    <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
+  </ion-button>
+  <ion-item>
+    <swiper
+      class="header-swiper"
+      #headerSwiper
+      [slidesPerView]="layout.days"
+      (activeIndexChange)="syncSwiper(headerSwiper, mainSwiper)"
+    >
+      <ng-template swiperSlide *ngFor="let date of weekDates">
+        <div class="day-labels">
+          <ion-button expand="block" fill="clear" disabled>
+            <ion-label>
+              {{ date | amDateFormat: 'dddd' }}
+            </ion-label>
+          </ion-button>
+        </div>
+      </ng-template>
+    </swiper>
+  </ion-item>
+</div>
+<ion-content>
+  <swiper
+    #mainSwiper
+    [slidesPerView]="layout.days"
+    (indexChange)="onPageChange($event)"
+    (activeIndexChange)="syncSwiper(mainSwiper, headerSwiper)"
+    class="full-height"
+  >
+    <ng-template swiperSlide *ngFor="let day of weekDates; index as i">
+      <schedule-day
+        [day]="day"
+        [hoursRange]="hoursRange"
+        [scale]="scale"
+        [uuids]="uuids"
+        [dateSeries]="testSchedule[i]"
+      >
+      </schedule-day>
+    </ng-template>
+  </swiper>
+  <div
+    class="hour-lines"
+    *ngFor="let i of hours"
+    [style.marginTop.px]="i * scale"
+  >
+    <ion-label>{{ i + hoursRange.from }}:00</ion-label>
+    <hr class="horizontal-line" />
+  </div>
+</ion-content>