From 072ff989bad296cb72b10ec8afe31cd7c694a85e Mon Sep 17 00:00:00 2001
From: yagamuu <ygmpeer@gmail.com>
Date: Sat, 16 Jan 2021 17:04:20 +0900
Subject: [PATCH] Add checklist

---
 configschema.d.ts                             |  5 ++
 configschema.json                             | 35 +++++++-
 package.json                                  |  6 ++
 schemas/checklist.d.ts                        | 11 +++
 schemas/checklist.json                        | 14 +++
 schemas/index.d.ts                            |  1 +
 .../_misc/components/RunList/RunPanel.vue     |  2 +
 src/dashboard/checklist/main.ts               | 17 ++++
 src/dashboard/checklist/main.vue              | 75 ++++++++++++++++
 src/dashboard/checklist/store.ts              | 37 ++++++++
 src/dashboard/run-player/main.vue             |  2 +
 .../timer/components/StartButton.vue          | 29 ++++++-
 src/dashboard/timer/store.ts                  |  4 +-
 src/extension/checklist.ts                    | 86 +++++++++++++++++++
 src/extension/index.ts                        |  1 +
 types/CheckList.d.ts                          |  6 ++
 types/Events.d.ts                             |  8 ++
 types/index.d.ts                              |  1 +
 18 files changed, 335 insertions(+), 5 deletions(-)
 create mode 100644 schemas/checklist.d.ts
 create mode 100644 schemas/checklist.json
 create mode 100644 src/dashboard/checklist/main.ts
 create mode 100644 src/dashboard/checklist/main.vue
 create mode 100644 src/dashboard/checklist/store.ts
 create mode 100644 src/extension/checklist.ts
 create mode 100644 types/CheckList.d.ts

diff --git a/configschema.d.ts b/configschema.d.ts
index 0a4db19a..72dfceb5 100644
--- a/configschema.d.ts
+++ b/configschema.d.ts
@@ -43,4 +43,9 @@ export interface Configschema {
       key: string;
     }[];
   } | null;
+  checklist: {
+    enabled: boolean;
+    items?: string[] | null;
+    forceCheckBeforeStartTimer: boolean;
+  };
 }
diff --git a/configschema.json b/configschema.json
index ae893f3f..6e689bfa 100644
--- a/configschema.json
+++ b/configschema.json
@@ -208,12 +208,45 @@
           "type": "null"
         }
       ]
+    },
+    "checklist": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "enabled": {
+          "type": "boolean",
+          "default": false
+        },
+        "items": {
+          "oneOf": [
+            {
+              "type": "array",
+              "uniqueItems": true,
+              "items": {
+                "type": "string"
+              }
+            },
+            {
+              "type": "null"
+            }
+          ]
+        },
+        "forceCheckBeforeStartTimer": {
+          "type": "boolean",
+          "default": false
+        }
+      },
+      "required": [
+        "enabled",
+        "forceCheckBeforeStartTimer"
+      ]
     }
   },
   "required": [
     "language",
     "twitch",
     "schedule",
-    "oengus"
+    "oengus",
+    "checklist"
   ]
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index b6f1f6dc..6e43cd6e 100644
--- a/package.json
+++ b/package.json
@@ -172,6 +172,12 @@
         "width": 3,
         "file": "alert-dialog.html",
         "dialog": true
+      },
+      {
+        "name": "checklist",
+        "title": "Checklist",
+        "file": "checklist.html",
+        "width": 3
       }
     ]
   }
diff --git a/schemas/checklist.d.ts b/schemas/checklist.d.ts
new file mode 100644
index 00000000..8bd8147c
--- /dev/null
+++ b/schemas/checklist.d.ts
@@ -0,0 +1,11 @@
+/* tslint:disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+
+export type Checklist = {
+    name: string;
+    complete: boolean;
+  }[];
\ No newline at end of file
diff --git a/schemas/checklist.json b/schemas/checklist.json
new file mode 100644
index 00000000..ae80e372
--- /dev/null
+++ b/schemas/checklist.json
@@ -0,0 +1,14 @@
+{
+	"$schema": "http://json-schema.org/draft-04/schema",
+
+	"type": "array",
+	"items": {
+		"type": "object",
+		"additionalProperties": false,
+		"properties": {
+			"name": {"type": "string"},
+			"complete": {"type": "boolean"}
+		},
+		"required": ["name", "complete"]
+	}
+}
\ No newline at end of file
diff --git a/schemas/index.d.ts b/schemas/index.d.ts
index a39152f1..c2731509 100644
--- a/schemas/index.d.ts
+++ b/schemas/index.d.ts
@@ -1,3 +1,4 @@
+export * from './checklist';
 export * from './defaultSetupTime';
 export * from './horaroImportSavedOpts';
 export * from './horaroImportStatus';
diff --git a/src/dashboard/_misc/components/RunList/RunPanel.vue b/src/dashboard/_misc/components/RunList/RunPanel.vue
index 0a642d95..86411709 100644
--- a/src/dashboard/_misc/components/RunList/RunPanel.vue
+++ b/src/dashboard/_misc/components/RunList/RunPanel.vue
@@ -152,6 +152,8 @@ export default class extends Vue {
           dialog.openDialog({ name: 'NoTwitchGame' });
         }
       }
+
+      await nodecg.sendMessage('resetChecklist');
     } catch (err) {
       // catch
     }
diff --git a/src/dashboard/checklist/main.ts b/src/dashboard/checklist/main.ts
new file mode 100644
index 00000000..09537b6a
--- /dev/null
+++ b/src/dashboard/checklist/main.ts
@@ -0,0 +1,17 @@
+/* eslint no-new: off, @typescript-eslint/explicit-function-return-type: off */
+
+import Vue from 'vue';
+import i18n from '../_misc/i18n';
+import vuetify from '../_misc/vuetify';
+import App from './main.vue';
+import waitForReplicants from './store';
+
+waitForReplicants().then((store) => {
+  new Vue({
+    vuetify,
+    i18n,
+    store,
+    el: '#App',
+    render: (h) => h(App),
+  });
+});
diff --git a/src/dashboard/checklist/main.vue b/src/dashboard/checklist/main.vue
new file mode 100644
index 00000000..6cec709c
--- /dev/null
+++ b/src/dashboard/checklist/main.vue
@@ -0,0 +1,75 @@
+<i18n>
+{
+  "en": {
+    "panelTitle": "Checklist",
+    "notEnabled": "Checklist is not enabled.",
+    "emptyItems": "Checklist is empty."
+  },
+  "ja": {
+    "panelTitle": "チェックリスト",
+    "notEnabled": "チェックリストが有効になっていません。",
+    "emptyItems": "チェックリストが空です。"
+  }
+}
+</i18n>
+
+<template>
+  <v-app>
+    <div v-if="!config.enabled">
+      {{ $t('notEnabled') }}
+    </div>
+    <div v-else>
+      <div v-if="checklist.length === 0">
+        {{ $t('emptyItems') }}
+      </div>
+      <v-switch
+        v-for="checkbox in checklist"
+        :key="checkbox.name"
+        :label="checkbox.name"
+        :value="true"
+        :input-value="checkbox.complete"
+        @change="toggleCheckbox(checkbox.name, $event !== null)"
+      />
+    </div>
+  </v-app>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator';
+import { State } from 'vuex-class';
+import { CheckList } from 'types';
+import { Configschema } from 'configschema';
+
+@Component({
+  components: {
+  },
+})
+export default class extends Vue {
+  @State checklist!: CheckList;
+
+  get config(): Configschema['checklist'] {
+    return (nodecg.bundleConfig as Configschema).checklist;
+  }
+
+  async toggleCheckbox(name: string, complete: boolean): Promise<void> {
+    try {
+      await nodecg.sendMessage('toggleCheckbox', { name, complete });
+      // checklist change successful
+    } catch (err) {
+      // catch
+    }
+  }
+
+  mounted(): void {
+    if (window.frameElement?.parentElement) {
+      window.frameElement.parentElement.setAttribute(
+        'display-title',
+        this.$t('panelTitle') as string,
+      );
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/dashboard/checklist/store.ts b/src/dashboard/checklist/store.ts
new file mode 100644
index 00000000..96240c24
--- /dev/null
+++ b/src/dashboard/checklist/store.ts
@@ -0,0 +1,37 @@
+import clone from 'clone';
+import type { ReplicantBrowser } from 'nodecg/types/browser';
+import type { Checklist } from 'schemas';
+import Vue from 'vue';
+import Vuex, { Store } from 'vuex';
+
+Vue.use(Vuex);
+
+// Replicants and their types
+const reps: {
+  checklist: ReplicantBrowser<Checklist>;
+  [k: string]: ReplicantBrowser<unknown>;
+} = {
+  checklist: nodecg.Replicant('checklist'),
+};
+
+const store = new Vuex.Store({
+  state: {
+    checklist: [] as Checklist,
+  },
+  mutations: {
+    setState(state, { name, val }): void {
+      Vue.set(state, name, val);
+    },
+  },
+});
+
+Object.keys(reps).forEach((key) => {
+  reps[key].on('change', (val) => {
+    store.commit('setState', { name: key, val: clone(val) });
+  });
+});
+
+export default async (): Promise<Store<Record<string, unknown>>> => {
+  await NodeCG.waitForReplicants(...Object.keys(reps).map((key) => reps[key]));
+  return store;
+};
diff --git a/src/dashboard/run-player/main.vue b/src/dashboard/run-player/main.vue
index 3bfffda7..47e4f86f 100644
--- a/src/dashboard/run-player/main.vue
+++ b/src/dashboard/run-player/main.vue
@@ -125,6 +125,7 @@ export default class extends Vue {
     if (confirm) {
       try {
         await nodecg.sendMessage('returnToStart');
+        await nodecg.sendMessage('resetChecklist');
       } catch (err) {
         // run removal unsuccessful
       }
@@ -141,6 +142,7 @@ export default class extends Vue {
             dialog.openDialog({ name: 'NoTwitchGame' });
           }
         }
+        await nodecg.sendMessage('resetChecklist');
       } catch (err) {
         // run change unsuccessful
       }
diff --git a/src/dashboard/timer/components/StartButton.vue b/src/dashboard/timer/components/StartButton.vue
index 083e8bc3..f7492fc1 100644
--- a/src/dashboard/timer/components/StartButton.vue
+++ b/src/dashboard/timer/components/StartButton.vue
@@ -22,7 +22,7 @@
       <template v-slot:activator="{ on }">
         <span v-on="on">
           <v-btn
-            :disabled="state === 'finished'"
+            :disabled="state === 'finished' || (isEnabledForceCheck && !checklistComplete)"
             @click="button"
           >
             <v-icon v-if="state === 'running'">
@@ -42,18 +42,41 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component } from 'vue-property-decorator';
+import { Vue, Component, Watch } from 'vue-property-decorator';
 import { State } from 'vuex-class';
-import { Timer } from 'schemas';
+import { Timer, Checklist } from 'schemas';
+import { Configschema } from 'configschema';
 
 @Component
 export default class extends Vue {
   @State timer!: Timer;
+  @State checklist!: Checklist;
+
+  checklistComplete = false;
 
   get state(): string {
     return this.timer.state;
   }
 
+  get config(): Configschema['checklist'] {
+    return (nodecg.bundleConfig as Configschema).checklist;
+  }
+
+  get isEnabledForceCheck(): boolean {
+    return this.config.enabled
+    && this.checklist.length !== 0
+    && this.config.forceCheckBeforeStartTimer;
+  }
+
+  @Watch('checklist', { immediate: true })
+  onChecklistChange(val: Checklist): void {
+    this.updateChecklistComplete(val);
+  }
+
+  updateChecklistComplete(checklist: Checklist): void {
+    this.checklistComplete = checklist.every((checkbox) => checkbox.complete);
+  }
+
   async button(): Promise<void> {
     try {
       if (this.state === 'stopped' || this.state === 'paused') {
diff --git a/src/dashboard/timer/store.ts b/src/dashboard/timer/store.ts
index e44ab3d9..2cc77d35 100644
--- a/src/dashboard/timer/store.ts
+++ b/src/dashboard/timer/store.ts
@@ -1,6 +1,6 @@
 import clone from 'clone';
 import type { ReplicantBrowser } from 'nodecg/types/browser';
-import type { RunDataActiveRun, Timer, TimerChangesDisabled } from 'schemas';
+import type { RunDataActiveRun, Timer, TimerChangesDisabled, Checklist } from 'schemas';
 import Vue from 'vue';
 import Vuex, { Store } from 'vuex';
 
@@ -11,11 +11,13 @@ const reps: {
   runDataActiveRun: ReplicantBrowser<RunDataActiveRun>;
   timer: ReplicantBrowser<Timer>;
   timerChangesDisabled: ReplicantBrowser<TimerChangesDisabled>;
+  checklist: ReplicantBrowser<Checklist>;
   [k: string]: ReplicantBrowser<unknown>;
 } = {
   runDataActiveRun: nodecg.Replicant('runDataActiveRun'),
   timer: nodecg.Replicant('timer'),
   timerChangesDisabled: nodecg.Replicant('timerChangesDisabled'),
+  checklist: nodecg.Replicant('checklist'),
 };
 
 // Types for mutations below
diff --git a/src/extension/checklist.ts b/src/extension/checklist.ts
new file mode 100644
index 00000000..b2a4b1e3
--- /dev/null
+++ b/src/extension/checklist.ts
@@ -0,0 +1,86 @@
+import { isEqual } from 'lodash';
+import { bundleConfig, processAck } from './util/helpers'; // eslint-disable-line object-curly-newline, max-len
+import { get } from './util/nodecg';
+import { Checkbox, CheckList } from '../../types';
+
+const nodecg = get();
+const config = bundleConfig();
+
+let checklistNum = 0;
+const checklist = config.checklist.items ? config.checklist.items.map((item) => {
+  checklistNum += 1;
+  return {
+    name: `${checklistNum}. ${item}`,
+    complete: false,
+  };
+}) : [] as CheckList;
+
+const checklistRep = nodecg.Replicant<CheckList>('checklist', {
+  defaultValue: checklist,
+});
+
+if (checklistRep.value) {
+  const currentNameList = checklistRep.value.map((item) => item.name);
+  const nameList = checklist.map((item) => item.name);
+  if (!isEqual(currentNameList, nameList)) {
+    checklistRep.value = nameList.map((name) => ({
+      name,
+      complete: false,
+    }));
+  }
+}
+
+/**
+ * Used to update the checklist replicant.
+ * @param payload Checkbox object.
+ */
+async function changeChecklist(checkbox: Checkbox): Promise<void> {
+  try {
+    if (!checklistRep.value) {
+      throw new Error('Cannot read replicant of checklist.');
+    }
+    const item = checklistRep.value.find(
+      (replicant) => replicant.name === checkbox.name,
+    );
+    if (!item) {
+      throw new Error(`${checkbox.name} was not found.`);
+    }
+    item.complete = checkbox.complete;
+    nodecg.log.debug(`[Checklist] Successfully changed checklist (${checkbox.name})`);
+  } catch (err) {
+    nodecg.log.debug('[Checklist] Could not successfully update Checklist:', err);
+    throw err;
+  }
+}
+
+/**
+ * Used to reset the checklist replicant.
+ */
+async function resetChecklist(): Promise<void> {
+  try {
+    if (!checklistRep.value) {
+      throw new Error('Cannot read replicant of checklist.');
+    }
+
+    checklistRep.value.forEach((item, index) => { checklistRep.value[index].complete = false; });
+  } catch (err) {
+    nodecg.log.debug('[Checklist] Could not successfully reset Checklist:', err);
+    throw err;
+  }
+}
+
+if (config.checklist.enabled) {
+  nodecg.log.info('[Checklist] enabled');
+
+  nodecg.listenFor('toggleCheckbox', (data, ack) => {
+    changeChecklist(data)
+      .then((list) => processAck(ack, null, list))
+      .catch((err) => processAck(ack, err));
+  });
+
+  nodecg.listenFor('resetChecklist', (data, ack) => {
+    resetChecklist()
+      .then(() => processAck(ack, null))
+      .catch((err) => processAck(ack, err));
+  });
+}
diff --git a/src/extension/index.ts b/src/extension/index.ts
index f6e124b4..02b21bdc 100644
--- a/src/extension/index.ts
+++ b/src/extension/index.ts
@@ -15,6 +15,7 @@ export = (nodecg: NodeCG): ExtensionReturn => {
   require('./twitch-api');
   require('./srcom-api');
   require('./ffz-ws');
+  require('./checklist');
 
   return {
     listenFor,
diff --git a/types/CheckList.d.ts b/types/CheckList.d.ts
new file mode 100644
index 00000000..ee274105
--- /dev/null
+++ b/types/CheckList.d.ts
@@ -0,0 +1,6 @@
+export interface Checkbox {
+    name: string;
+    complete: boolean;
+}
+
+export type CheckList = Checkbox[];
diff --git a/types/Events.d.ts b/types/Events.d.ts
index 7d51a619..6e30cdd7 100644
--- a/types/Events.d.ts
+++ b/types/Events.d.ts
@@ -33,6 +33,10 @@ export interface SendMessageArgsMap {
   // Featured Channels
   updateFeaturedChannels: string[];
   repeaterFeaturedChannels: string[];
+
+  // Checklist
+  toggleCheckbox: {name: string; checked: boolean};
+  resetChecklist: void;
 }
 
 export interface SendMessageReturnMap {
@@ -61,6 +65,10 @@ export interface SendMessageReturnMap {
   // Featured Channels
   updateFeaturedChannels: void;
   repeaterFeaturedChannels: void;
+
+  // Checklist
+  toggleCheckbox: void;
+  resetChecklist: void;
 }
 
 export type SendMessageAck = HandledSendMessageAck | UnhandledSendMessageAck;
diff --git a/types/index.d.ts b/types/index.d.ts
index a8266267..4f511fe2 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,4 +1,5 @@
 export * from './Alert';
+export * from './CheckList';
 export * from './Dialog';
 export * from './Events';
 export * from './ExtensionReturn';