feat: timetable module - schedule and calendar

2026-01-20 16:42:56 +00:00 · 2021-08-13 12:27:40 +00:00
parent e81b2e161d
commit d8ede006df
59 changed files with 3287 additions and 555 deletions
--- a/src/app/animation/animation-choreographer.ts
+++ b/src/app/animation/animation-choreographer.ts
@@ -0,0 +1,93 @@
+/*
+ * Copyright (C) 2021 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 License 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/>.
+ */
+
+import {SHARED_AXIS_DIRECTIONS} from './material-motion';
+
+/**
+ * /**
+ * Choreograph a shared axis animation based on a row of values so that changing state
+ * results in the correct, expected behavior of reverting the previous animation etc.
+ *
+ * The Choreographer manages motion of an element that changes value. This can be used in a variety of ways,
+ * for example multi-view choreographing can be achieved as such
+ *
+ * ```html
+ * <div [ngSwitch]='choreographer.state'
+ *      [@animation]='choreographer.animationState'
+ *      [@animation.done]='choreographer.done()'>
+ *      <div *ngSwitchCase='"a"'/>
+ *      <div *ngSwitchCase='"b"'/>
+ * </div>
+ * ```
+ *
+ * @see {@link https://material.io/design/motion/the-motion-system.html#shared-axis}
+ */
+export class SharedAxisChoreographer<T> {
+  /**
+   * Expected next value
+   */
+  private expectedValue: T;
+
+  /**
+   * Animation State
+   */
+  animationState: string;
+
+  /**
+   * Current value to read from
+   */
+  currentValue: T;
+
+  constructor(initialValue: T, readonly pages?: T[]) {
+    this.currentValue = initialValue;
+    this.expectedValue = initialValue;
+  }
+
+  /**
+   * Must be linked to the animation callback
+   */
+  animationDone() {
+    this.animationState = 'in';
+    this.currentValue = this.expectedValue;
+  }
+
+  /**
+   * Change view for a new state that the current active view should receive
+   */
+  changeViewForState(newValue: T, direction?: -1 | 0 | 1) {
+    if (direction === 0) {
+      this.currentValue = this.expectedValue = newValue;
+      return;
+    }
+
+    this.expectedValue = newValue;
+
+    // pre-place animation state
+    // new element comes in from the right and pushes the old one to the left
+    this.animationState =
+      SHARED_AXIS_DIRECTIONS[
+        direction ?? this.getDirection(this.currentValue, newValue)
+      ];
+  }
+
+  /**
+   * Get direction from to
+   */
+  getDirection(from: T, to: T) {
+    const element = this.pages?.find(it => it === from || it === to);
+
+    return element === from ? 1 : element === to ? -1 : 0;
+  }
+}
--- a/src/app/animation/material-motion.ts
+++ b/src/app/animation/material-motion.ts
@@ -0,0 +1,103 @@
+/*
+ * Copyright (C) 2021 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 License 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/>.
+ */
+import {
+  animate,
+  sequence,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
+
+/**
+ * Fade transition
+ *
+ * @see {@link https://material.io/design/motion/the-motion-system.html#fade}
+ */
+export const materialFade = trigger('materialFade', [
+  state('in', style({opacity: 1})),
+  transition(':enter', [style({opacity: 0}), animate('250ms ease')]),
+  transition(':leave', [animate('200ms ease', style({opacity: 0}))]),
+]);
+
+/**
+ * Fade transition
+ *
+ * @see {@link https://material.io/design/motion/the-motion-system.html#fade}
+ */
+export const materialManualFade = trigger('materialManualFade', [
+  state('in', style({opacity: 1})),
+  state('out', style({opacity: 0})),
+  transition('in => out', animate('200ms ease')),
+  transition('out => in', animate('250ms ease')),
+]);
+
+/**
+ * Fade through transition
+ *
+ * @see {@link https://material.io/design/motion/the-motion-system.html#fade-through}
+ */
+export const materialFadeThrough = trigger('materialFadeThrough', [
+  state('in', style({transform: 'scale(100%)', opacity: 1})),
+  transition(':enter', [
+    style({transform: 'scale(80%)', opacity: 0}),
+    animate('250ms ease'),
+  ]),
+  transition(':leave', [animate('200ms ease', style({opacity: 0}))]),
+]);
+
+export const SHARED_AXIS_DIRECTIONS = {
+  [-1]: 'go-backward',
+  [0]: 'in',
+  [1]: 'go-forward',
+};
+
+/**
+ * Shared axis transition along the X-Axis
+ *
+ * Needs to be manually choreographed
+ *
+ * @see {@link https://material.io/design/motion/the-motion-system.html#shared-axis}
+ * @see {SharedAxisChoreographer}
+ */
+export const materialSharedAxisX = trigger('materialSharedAxisX', [
+  state(
+    SHARED_AXIS_DIRECTIONS[-1],
+    style({opacity: 0, transform: 'translateX(30px)'}),
+  ),
+  state(
+    SHARED_AXIS_DIRECTIONS[0],
+    style({opacity: 1, transform: 'translateX(0)'}),
+  ),
+  state(
+    SHARED_AXIS_DIRECTIONS[1],
+    style({opacity: 0, transform: 'translateX(-30px)'}),
+  ),
+  transition(
+    `${SHARED_AXIS_DIRECTIONS[-1]} => ${SHARED_AXIS_DIRECTIONS[0]}`,
+    sequence([
+      style({opacity: 0, transform: 'translateX(-30px)'}),
+      animate('100ms ease-out'),
+    ]),
+  ),
+  transition(`${SHARED_AXIS_DIRECTIONS[0]} => *`, animate('100ms ease-out')),
+  transition(
+    `${SHARED_AXIS_DIRECTIONS[1]} => ${SHARED_AXIS_DIRECTIONS[0]}`,
+    sequence([
+      style({opacity: 0, transform: 'translateX(30px)'}),
+      animate('100ms ease-out'),
+    ]),
+  ),
+]);
--- a/src/app/animation/skeleton-transitions/chip-loading-transition.ts
+++ b/src/app/animation/skeleton-transitions/chip-loading-transition.ts
@@ -0,0 +1,37 @@
+/*
+ * Copyright (C) 2021 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 License 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/>.
+ */
+import {animate, style, transition, trigger} from '@angular/animations';
+
+export const chipTransition = trigger('chipTransition', [
+  transition(':enter', [
+    style({
+      'opacity': 0,
+      'transform': 'scaleX(80%)',
+      'transform-origin': 'left',
+    }),
+    animate('200ms ease', style({opacity: 1, transform: 'scaleX(100%)'})),
+  ]),
+]);
+
+export const chipSkeletonTransition = trigger('chipSkeletonTransition', [
+  transition(':leave', [
+    style({
+      'opacity': 1,
+      'transform': 'scaleX(100%)',
+      'transform-origin': 'left',
+    }),
+    animate('200ms ease', style({opacity: 0, transform: 'scaleX(120%)'})),
+  ]),
+]);