feat: apply new layout overhaul

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

@@ -6,72 +6,101 @@
   ~
   ~  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 License for
+  ~  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-icon slot="icon-only" name="chevron-left"></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-icon slot="icon-only" name="chevron-right"></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"
+    class="header-swiper"
+    #headerSwiper
+    [slidesPerView]="1"
+    (activeIndexChange)="syncSwiper(headerSwiper, mainSwiper)"
   >
-    <ng-template swiperSlide *ngFor="let day of weekDates; index as i">
-      <schedule-day
-        [day]="day"
-        [hoursRange]="hoursRange"
-        [scale]="scale"
-        [uuids]="uuids"
-        [dateSeries]="testSchedule[i]"
+    <ng-template let-index>
+      <div
+        *ngIf="index | dateFromIndex: baselineDate as date"
+        class="day-labels"
       >
-      </schedule-day>
+        <ion-button
+          expand="block"
+          fill="clear"
+          [id]="'date-select-button' + index"
+        >
+          {{ dateRange.startDate }} - {{ dateRange.endDate }}
+        </ion-button>
+
+        <ion-popover [trigger]="'date-select-button' + index">
+          <ng-template>
+            <ion-datetime
+              #popoverDateTime
+              presentation="date"
+              [value]="date | amDateFormat: 'YYYY-MM-DD'"
+              (ionChange)="presentScheduleDatePopover(index, popoverDateTime)"
+            >
+            </ion-datetime>
+          </ng-template>
+        </ion-popover>
+      </div>
     </ng-template>
   </swiper>
+</div>
+
+<ion-content>
   <div
-    class="hour-lines"
-    *ngFor="let i of hours"
-    [style.marginTop.px]="i * scale"
+    class="schedule-wrapper"
+    [style.height.px]="scale * (hoursRange.to - hoursRange.from + 1) + scale"
   >
-    <ion-label>{{ i + hoursRange.from }}:00</ion-label>
-    <hr class="horizontal-line" />
+    <div class="hours-wrapper">
+      <!-- add margin top +45 to start below the date header -->
+      <div
+        class="hour-lines"
+        *ngFor="let i of hours"
+        [style.marginTop.px]="i * scale + 45"
+      >
+        {{ i + hoursRange.from }}
+      </div>
+    </div>
+    <div class="infinite-swiper-wrapper">
+      <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]"
+            [layout]="layout"
+            [isLeftmost]="
+              dateRange.startDate ===
+              (i | dateFromIndex: baselineDate).format('DD.MM.YY')
+            "
+          >
+          </schedule-day>
+        </ng-template>
+      </swiper>
+    </div>
   </div>
 </ion-content>