From 1c86bc824755f9535590af6b18cae10688030291 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Fri, 28 Jul 2023 13:59:14 +0200
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20dashboard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

set in a new dashboard component, the data of the simulation
---
 .vscode/settings.json                         | 22 +++++++++-
 feature-flow.css                              |  4 +-
 src/modules/feature/FeatureControls.vue       | 40 +++++++++++++++++++
 src/modules/feature/FeatureStep.vue           |  2 +-
 src/modules/feature/FeatureSteps.vue          | 30 +-------------
 .../simulation/SimulationDashboard.vue        |  2 +-
 6 files changed, 67 insertions(+), 33 deletions(-)
 create mode 100644 src/modules/feature/FeatureControls.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 25fa621..6a8bdc6 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,23 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#0037c5",
+    "activityBar.background": "#0037c5",
+    "activityBar.foreground": "#e7e7e7",
+    "activityBar.inactiveForeground": "#e7e7e799",
+    "activityBarBadge.background": "#200009",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "commandCenter.border": "#e7e7e799",
+    "sash.hoverBorder": "#0037c5",
+    "statusBar.background": "#002992",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#0037c5",
+    "statusBarItem.remoteBackground": "#002992",
+    "statusBarItem.remoteForeground": "#e7e7e7",
+    "titleBar.activeBackground": "#002992",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveBackground": "#00299299",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  },
+  "peacock.color": "#002992"
 }
diff --git a/feature-flow.css b/feature-flow.css
index c79af3c..c81d72c 100644
--- a/feature-flow.css
+++ b/feature-flow.css
@@ -33,7 +33,7 @@ ul {
   margin-top: 1rem;
   border: 3px solid var(--primary-color);
   color: var(--primary-color);
-  background-color: white;
+  background-color: var(--color);
   min-height: var(--feature-item-height);
   display: flex;
   flex-direction: column;
@@ -48,7 +48,7 @@ ul {
 
 .blue-bin {
   background-color: var(--primary-color);
-  color: white;
+  color: var(--color);
   font-size: 18pt;
 }
 
diff --git a/src/modules/feature/FeatureControls.vue b/src/modules/feature/FeatureControls.vue
new file mode 100644
index 0000000..c0e6b1a
--- /dev/null
+++ b/src/modules/feature/FeatureControls.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useFeatureStore } from '@/modules/feature/feature-store'
+
+defineProps<{
+  featuresToDeliver: number
+}>()
+const featureStore = useFeatureStore()
+</script>
+
+<template>
+  <div class="feature-controls">
+    <div>
+      {{ featureStore.features.length }} / {{ featuresToDeliver }} features in
+      the board | mean complexity : {{ featureStore.meanComplexity }} | mean
+      lead time : {{ featureStore.meanLeadTime }} days | Total days:
+      {{ featureStore.meta.totalDays }} | Team work experience:
+      {{ featureStore.meta.teamWorkExperience.toFixed(2) }}
+    </div>
+    <div class="row">
+      New feature live every {{ featureStore.taktTime }} days. Finishing in
+      {{ featureStore.eat }} days.
+    </div>
+    <template v-if="!featureStore.isProjectFinished">
+      <div class="row">Strategy of the day:</div>
+      <div class="row">
+        <button @click="featureStore.nextDay('push')">push system</button>
+        <button @click="featureStore.nextDay('pull')">pull system</button>
+        <button @click="featureStore.nextDay('problem-solving')">
+          problem solving
+        </button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.feature-controls {
+  color: black;
+}
+</style>
diff --git a/src/modules/feature/FeatureStep.vue b/src/modules/feature/FeatureStep.vue
index 9e5ec08..d0a0ce0 100644
--- a/src/modules/feature/FeatureStep.vue
+++ b/src/modules/feature/FeatureStep.vue
@@ -116,7 +116,7 @@ const isLive = computed(
     background-color: var(--primary-color);
     padding: 0.35rem;
     text-align: center;
-    color: white;
+    color: var(--color);
   }
 
   li {
diff --git a/src/modules/feature/FeatureSteps.vue b/src/modules/feature/FeatureSteps.vue
index 481cebc..2964248 100644
--- a/src/modules/feature/FeatureSteps.vue
+++ b/src/modules/feature/FeatureSteps.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import FeatureControls from '@/modules/feature/FeatureControls.vue'
 import FeatureStep from '@/modules/feature/FeatureStep.vue'
 import { featureSteps } from '@/modules/feature/feature-steps'
 import { useFeatureStore } from '@/modules/feature/feature-store'
@@ -12,29 +13,7 @@ onMounted(() => featureStore.initBoard(NUMBER_OF_FEATURES))
 </script>
 
 <template>
-  <div class="dashboard">
-    <div>
-      {{ featureStore.features.length }} / {{ NUMBER_OF_FEATURES }} features in
-      the board | mean complexity : {{ featureStore.meanComplexity }} | mean
-      lead time : {{ featureStore.meanLeadTime }} days | Total days:
-      {{ featureStore.meta.totalDays }} | Team work experience:
-      {{ featureStore.meta.teamWorkExperience.toFixed(2) }}
-    </div>
-    <div class="row">
-      New feature live every {{ featureStore.taktTime }} days. Finishing in
-      {{ featureStore.eat }} days.
-    </div>
-    <template v-if="!featureStore.isProjectFinished">
-      <div class="row">Strategy of the day:</div>
-      <div class="row">
-        <button @click="featureStore.nextDay('push')">push system</button>
-        <button @click="featureStore.nextDay('pull')">pull system</button>
-        <button @click="featureStore.nextDay('problem-solving')">
-          problem solving
-        </button>
-      </div>
-    </template>
-  </div>
+  <FeatureControls :features-to-deliver="NUMBER_OF_FEATURES" />
   <ul class="features-steps">
     <FeatureStep
       v-for="step in featureSteps"
@@ -46,11 +25,6 @@ onMounted(() => featureStore.initBoard(NUMBER_OF_FEATURES))
 </template>
 
 <style scoped lang="scss">
-.dashboard,
-pre {
-  color: black;
-}
-
 .features-steps {
   display: flex;
   flex: 1;
diff --git a/src/modules/simulation/SimulationDashboard.vue b/src/modules/simulation/SimulationDashboard.vue
index 3605588..adeb04b 100644
--- a/src/modules/simulation/SimulationDashboard.vue
+++ b/src/modules/simulation/SimulationDashboard.vue
@@ -18,7 +18,7 @@ const strategies: Strategy[] = ['push', 'pull', 'push-dps', 'pull-dps']
     <table>
       <thead>
         <tr>
-          <th>#</th>
+          <th></th>
           <th class="numeric">push</th>
           <th class="numeric">pull</th>
           <th class="numeric">push and DPS</th>