Scheduling conflicts

[bessyhuang]

No description provided.

[rileychh]

記得要用 ESLint 檢查過程式碼再提交，這樣其他開發者才不會在未來執行 ESLint 時不小心動到這裡喔！

功能沒有問題，但是按鈕的顏色對比（灰底白字）太低了，有些人可能會看不清楚。試試看調整背景顏色。

除了顏色對比，有沒有辦法為按鈕加上一些敘述來明定用意呢？一個辦法是利用 title 屬性。

[rileychh]

Suggested change

	<template v-if="!isFilterCollection">
	<button :class="{fab: true, CalendarMultipleCheck: true, active: active}" @click="checkMySchedule">
	<icon-mdi-calendar-multiple-check></icon-mdi-calendar-multiple-check>
	</button>
	<button class="fab CalendarMultipleCheck" :class="{ active }" @click="checkMySchedule">
	<icon-mdi-calendar-multiple-check />
	</button>
	<template v-if="!isFilterCollection">

• 沒有條件的 class 可以不用寫在 v-bind 裡面
• icon 元件因為沒有內容，可以寫成 self-closing
• 如果這個按鈕不受 v-if 的條件影響，直接放在 <article> 底下就可以了

[bessyhuang]

在 319f36a 用 ESLint 跑過了，也為按鈕新增文字提示（title 屬性）、調整背景顏色。

[rileychh]

考慮為 events 定義型別。從下面的 push，看起來他的型別是

interface SessionTimeSpan {
  startTime: Date;
  endTime: Date;
}

[rileychh]

Suggested change

	for (let i = 0; i < events.length - 1; i++) {
	for (let j = i + 1; j < events.length; j++) {
	const eventA = events[i];
	const eventB = events[j];
	if (
	(eventA["endTime"] > eventB["startTime"] && eventA["startTime"] < eventB["endTime"]) ||
	(eventB["endTime"] > eventA["startTime"] && eventB["startTime"] < eventA["endTime"])
	) {
	isConflict = true;
	}
	}
	}
	comparisonLoop:
	for (let i = 0; i < events.length - 1; i++) {
	for (let j = i + 1; j < events.length; j++) {
	const eventA = events[i];
	const eventB = events[j];
	if (
	(eventA["endTime"] > eventB["startTime"] && eventA["startTime"] < eventB["endTime"]) ||
	(eventB["endTime"] > eventA["startTime"] && eventB["startTime"] < eventA["endTime"])
	) {
	isConflict = true;
	break comparisonLoop;
	}
	}
	}

可以利用 labels 在發現衝突時提早離開迴圈，加快計算速度。
StackOverflow 上的說明

[bessyhuang]

原本想試試 Use label 的方法，但 ESLint 檢查會跑不過（error: Unexpected labeled statement & Unexpected label in break statement），因此就換其他方式了。

調整後結果，見 9debe0d