From 5b48edf38926b23c10d10fe93e3845f426b40fd8 Mon Sep 17 00:00:00 2001 From: Jihou Tsao Date: Fri, 16 Sep 2022 16:53:43 +0900 Subject: [PATCH] modify AvailabilityScale interface to provide a function and remove functions from AvailabilityLevel --- src/AvailabilityLevel.ts | 39 +++++-------------- src/BlockData.ts | 5 +-- src/DetailPanel.vue | 10 ++++- src/models/availability/AvailabilityScale.ts | 8 +--- .../availability/DefaultAvailabilityScale.ts | 30 ++++++++++---- src/stores/gridState.ts | 15 ++++--- 6 files changed, 50 insertions(+), 57 deletions(-) diff --git a/src/AvailabilityLevel.ts b/src/AvailabilityLevel.ts index 136013f..86c7155 100644 --- a/src/AvailabilityLevel.ts +++ b/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); } } diff --git a/src/BlockData.ts b/src/BlockData.ts index c79b8ad..20ec235 100644 --- a/src/BlockData.ts +++ b/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; } diff --git a/src/DetailPanel.vue b/src/DetailPanel.vue index 386634f..cf004b0 100644 --- a/src/DetailPanel.vue +++ b/src/DetailPanel.vue @@ -5,7 +5,7 @@
@@ -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[] = []; diff --git a/src/models/availability/AvailabilityScale.ts b/src/models/availability/AvailabilityScale.ts index 670a205..9cab1f3 100644 --- a/src/models/availability/AvailabilityScale.ts +++ b/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; } diff --git a/src/models/availability/DefaultAvailabilityScale.ts b/src/models/availability/DefaultAvailabilityScale.ts index 75402c0..ccbc85d 100644 --- a/src/models/availability/DefaultAvailabilityScale.ts +++ b/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'; + } }, }; diff --git a/src/stores/gridState.ts b/src/stores/gridState.ts index 8a6d61b..582de72 100644 --- a/src/stores/gridState.ts +++ b/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) {