modify AvailabilityScale interface to provide a function and remove f…

…unctions from AvailabilityLevel

src/AvailabilityLevel.ts

@@ -1,38 +1,17 @@
-//import { lighten } from 'color2k';
 import { AvailabilityScale } from './models/availability/AvailabilityScale';
 import { defaultAvailabilityScale } from './models/availability/DefaultAvailabilityScale';
 
 export class AvailabilityLevel {
-    public level = 1; // one-indexed
-    public readonly scale: AvailabilityScale;
+    public readonly level: number; // one-indexed
+    public readonly label: string;
+    public readonly color: string;
 
-    constructor(level = 1, scale = defaultAvailabilityScale) {
+    constructor(
+        level = 1,
+        scale: AvailabilityScale = defaultAvailabilityScale
+    ) {
         this.level = level;
-        this.scale = scale;
-    }
-
-    get color(): string {
-        if (this.level in this.scale.colors) {
-            return this.scale.colors[this.level];
-        }
-
-        return 'black';
-        // TODO: rewrite function to interpolate color
-        /*
-        const midpoint: number = (this.scale.levels + 1) / 2;
-        if (this.level === midpoint) return NEUTRAL_COLOR;
-        if (this.level === 1) return BUSY_COLOR;
-        if (this.level === this.scale.levels) return AVAILABLE_COLOR;
-
-        //const adjustment = Math.abs(midpoint - this.level) / this.max;
-        if (this.level < midpoint) {
-            const adjustment = (1.5 * (this.level - 1)) / this.scale.levels;
-            return lighten(BUSY_COLOR, adjustment);
-        } else {
-            const adjustment =
-                (1.5 * (this.scale.levels - this.level)) / this.scale.levels;
-            return lighten(AVAILABLE_COLOR, adjustment);
-        }
-        */
+        this.label = scale.label(this.level);
+        this.color = scale.color(this.level);
     }
 }

src/BlockData.ts

@@ -1,11 +1,10 @@
 import { Interval } from 'luxon';
-import { AvailabilityLevel } from './AvailabilityLevel';
 
 export class BlockData {
     public readonly interval: Interval;
-    public readonly level: AvailabilityLevel;
+    public level: number;
 
-    constructor(interval: Interval, level: AvailabilityLevel) {
+    constructor(interval: Interval, level: number) {
         this.interval = interval;
         this.level = level;
     }

src/DetailPanel.vue

@@ -5,7 +5,7 @@
         <div>
             <select v-model="selectedLevel">
                 <option v-for="level in levels" :value="level" :key="level">
-                    {{ level }}
+                    {{ levelLabels[level - 1] }}
                 </option>
             </select>
         </div>
@@ -46,11 +46,17 @@ const gridState = useGridStateStore();
 
 const levels = computed((): number[] => {
     return Array.from(
-        { length: gridState.maxLevel },
+        { length: gridState.scale.levels },
         (value, index) => index + 1
     );
 });
 
+const levelLabels = computed((): string[] => {
+    return levels.value.map((level) => {
+        return gridState.scale.label(level);
+    });
+});
+
 const intervalString = computed(() => {
     let result = '';
     let intervals: Interval[] = [];

src/models/availability/AvailabilityScale.ts

@@ -1,9 +1,5 @@
 export interface AvailabilityScale {
     levels: number;
-    labels: {
-        [level: number]: string;
-    };
-    colors: {
-        [level: number]: string;
-    };
+    label(level: number): string;
+    color(level: number): string;
 }

src/models/availability/DefaultAvailabilityScale.ts

@@ -3,14 +3,28 @@ import { AvailabilityScale } from './AvailabilityScale';
 
 export const defaultAvailabilityScale: AvailabilityScale = {
     levels: 3,
-    colors: {
-        '1': BUSY_COLOR,
-        '2': NEUTRAL_COLOR,
-        '3': AVAILABLE_COLOR,
+    color(level: number) {
+        switch (level) {
+            case 1:
+                return BUSY_COLOR;
+            case 2:
+                return NEUTRAL_COLOR;
+            case 3:
+                return AVAILABLE_COLOR;
+            default:
+                return '';
+        }
     },
-    labels: {
-        '1': 'Busy',
-        '2': 'Maybe',
-        '3': 'Available',
+    label(level: number) {
+        switch (level) {
+            case 1:
+                return 'Busy';
+            case 2:
+                return 'Maybe';
+            case 3:
+                return 'Available';
+            default:
+                return 'Unknown';
+        }
     },
 };

src/stores/gridState.ts

@@ -10,7 +10,7 @@ export const useGridStateStore = defineStore('gridState', {
     state: () => {
         return {
             blockData: [] as BlockData[],
-            maxLevel: 3,
+            scale: defaultAvailabilityScale,
         };
     },
 
@@ -25,17 +25,13 @@ export const useGridStateStore = defineStore('gridState', {
             let intervalStart = startTime;
 
             for (let i = 0; i < blockCount; i++) {
-                const defaultLevel = new AvailabilityLevel(
-                    DEFAULT_INITIAL_LEVEL,
-                    defaultAvailabilityScale
-                );
                 const blockInterval: Interval = Interval.after(
                     intervalStart,
                     intervalDuration
                 );
                 const blockData: BlockData = new BlockData(
                     blockInterval,
-                    defaultLevel
+                    DEFAULT_INITIAL_LEVEL
                 );
                 this.blockData.push(blockData);
 
@@ -48,11 +44,14 @@ export const useGridStateStore = defineStore('gridState', {
                 return new AvailabilityLevel();
             }
 
-            return this.blockData[index].level;
+            return new AvailabilityLevel(
+                this.blockData[index].level,
+                this.scale
+            );
         },
 
         changeLevel(blockIndex: number, level: number) {
-            this.blockData[blockIndex].level.level = level;
+            this.blockData[blockIndex].level = level;
         },
 
         changeMultipleLevels(blocks: number[], level: number) {