From 147c9b16cfb8d17b643763ac91b726f4ea7c828c Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Tue, 20 Jun 2023 11:51:41 +0800
Subject: [PATCH] Conformance: StatusBar done.

---
 .../Discover/Conformance/StatusBar.vue        | 98 ++++++++++++++++---
 .../Conformance/conformanceResults.vue        | 21 ++++
 src/views/Discover/Conformance/index.vue      | 10 +-
 tailwind.config.js                            |  2 +-
 4 files changed, 115 insertions(+), 16 deletions(-)
 create mode 100644 src/components/Discover/Conformance/conformanceResults.vue

diff --git a/src/components/Discover/Conformance/StatusBar.vue b/src/components/Discover/Conformance/StatusBar.vue
index e093b9c..8c29426 100644
--- a/src/components/Discover/Conformance/StatusBar.vue
+++ b/src/components/Discover/Conformance/StatusBar.vue
@@ -1,25 +1,99 @@
 <template>
-<h1>Status bar</h1>
-<section class=" bg-primary text-center">
+<section class="w-full">
   <!-- status content -->
-  <div></div>
+  <!-- whitespace-nowrap min-w-[228px] min-w-[164px] min-w-[256px] -->
+  <ul class="bg-neutral-100 flex justify-start shadow-[0px_1px_4px_rgba(0,0,0,0.2)] gap-3 p-3 text-sm overflow-x-auto scrollbar duration-700"  v-show="isPanel">
+    <li class="bg-neutral-10 rounded p-3 w-full">
+      <div class="flex justify-between items-center mb-5">
+        <p class="font-bold text-sm leading-8">Cases</p>
+        <!-- <span class="material-symbols-outlined text-base">info</span> -->
+      </div>
+      <div class="flex justify-between items-center">
+        <div class="mr-2 w-full">
+          <span class="block text-sm mb-2">1.9K / 98.3K</span>
+          <ProgressBar :value="80" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
+        </div>
+        <span class="block text-2xl font-medium">100%</span>
+      </div>
+    </li>
+    <li class="bg-neutral-10 rounded p-3 w-full">
+      <div class="flex justify-between items-center mb-5">
+        <p class="font-bold text-sm leading-8">Traces</p>
+        <!-- <span class="material-symbols-outlined text-base">info</span> -->
+      </div>
+      <div class="flex justify-between items-center">
+        <div class="mr-2 w-full">
+          <span class="block text-sm mb-2">1.9K / 98.3K</span>
+          <ProgressBar :value="80" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
+        </div>
+        <span class="block text-2xl font-medium">100%</span>
+      </div>
+    </li>
+    <li class="bg-neutral-10 rounded p-3 w-full">
+      <div class="flex justify-between items-center mb-5">
+        <p class="font-bold text-sm leading-8">Activity Instances</p>
+        <!-- <span class="material-symbols-outlined text-base">info</span> -->
+      </div>
+      <div class="flex justify-between items-center">
+        <div class="mr-2 w-full">
+          <span class="block text-sm mb-2">1.9K / 98.3K</span>
+          <ProgressBar :value="80" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
+        </div>
+        <span class="block text-2xl font-medium">100%</span>
+      </div>
+    </li>
+    <li class="bg-neutral-10 rounded p-3 w-full">
+      <div class="flex justify-between items-center mb-5">
+        <p class="font-bold text-sm leading-8">Activities</p>
+        <!-- <span class="material-symbols-outlined text-base">info</span> -->
+      </div>
+      <div class="flex justify-between items-center">
+        <div class="mr-2 w-full">
+          <span class="block text-sm mb-2">1.9K / 98.3K</span>
+          <ProgressBar :value="80" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
+        </div>
+        <span class="block text-2xl font-medium">100%</span>
+      </div>
+    </li>
+    <li class="bg-neutral-10 rounded p-3 w-full">
+      <p class="font-bold text-sm leading-8 mb-2.5">Log Timeframe</p>
+      <div class="px-2 space-y-2 min-w-[140px] h-[40px]">
+        <span class="inline-block">2018.01.01 12:03&nbsp</span>
+        <span class="inline-block">~&nbsp2022.08.05 02:53</span>
+      </div>
+    </li>
+    <li class="bg-neutral-10 rounded p-3 w-full">
+      <p class="font-bold text-sm leading-8">Case Duration</p>
+      <div class="flex justify-between items-center space-x-2 min-w-[272px]">
+        <div class="space-y-2">
+          <p><Tag value="MAX" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>11.34 mths</p>
+          <p><Tag value="MIN" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>instant</p>
+        </div>
+        <div class="space-y-2">
+          <p><Tag value="MED" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>25.71 yrs</p>
+          <p><Tag value="AVG" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>6.00 days</p>
+        </div>
+      </div>
+    </li>
+  </ul>
   <!-- control button -->
-  <div class="bg-neutral-300 inline-block rr">
-    <!-- 面板開啟: 箭頭朝上 -->
-    <span class="material-symbols-outlined block px-8 text-xs ">keyboard_double_arrow_up</span>
-    <!-- 面板收合: 箭頭朝下 -->
-    <!-- <span class="material-symbols-outlined block px-8 text-xs">keyboard_double_arrow_down</span> -->
+  <div class="bg-neutral-300 rounded-b-full w-20 text-center mx-auto cursor-pointer hover:bg-neutral-500 hover:text-neutral-10 active:ring focus:outline-none focus:border-neutral-500 focus:ring" @click="isPanel = !isPanel">
+    <span class="material-symbols-outlined block px-8 text-xs ">{{ isPanel ? 'keyboard_double_arrow_up' : 'keyboard_double_arrow_down' }}</span>
   </div>
 </section>
 </template>
 
 <script>
 export default {
-
+  data() {
+    return {
+      isPanel: false,
+    }
+  },
 }
 </script>
-<style>
-.rr {
-  border-radius: 0px 0px 999px 999px;
+<style scoped>
+:deep(.p-progressbar .p-progressbar-value) {
+  @apply bg-neutral-900
 }
 </style>
diff --git a/src/components/Discover/Conformance/conformanceResults.vue b/src/components/Discover/Conformance/conformanceResults.vue
new file mode 100644
index 0000000..949df35
--- /dev/null
+++ b/src/components/Discover/Conformance/conformanceResults.vue
@@ -0,0 +1,21 @@
+<template>
+<section>
+  <p class="h2 text-base">Conformance Checking Results&nbsp<span class="material-symbols-outlined text-base align-middle">info</span></p>
+  <ul class=" text-neutral-10">
+    <li class=" bg-primary rounded-full">
+      <span class="material-symbols-outlined">check_circle</span>Conformance<span>3,890</span>
+    </li>
+    <li class=" bg-secondary rounded-full">
+      <span class="material-symbols-outlined">cancel</span>Non-Conformance<span>27,230</span>
+    </li>
+    <li class=" bg-neutral-700 rounded-full">
+      <span class="material-symbols-outlined">flaky</span>Not Applicable<span>7,780</span>
+    </li>
+  </ul>
+</section>
+</template>
+<script>
+export default{
+
+}
+</script>
diff --git a/src/views/Discover/Conformance/index.vue b/src/views/Discover/Conformance/index.vue
index ca9d85a..fd39843 100644
--- a/src/views/Discover/Conformance/index.vue
+++ b/src/views/Discover/Conformance/index.vue
@@ -1,11 +1,15 @@
 <template>
-  <StatusBar></StatusBar>
-  <h1>Conformance</h1>
+  <main class="bg-neutral-50 h-screen-main">
+    <StatusBar></StatusBar>
+    <h1>sider</h1>
+    <ConformanceResults></ConformanceResults>
+  </main>
 </template>
 <script>
 import { storeToRefs } from 'pinia';
 import LoadingStore from '@/stores/loading.js';
 import StatusBar from '@/components/Discover/Conformance/StatusBar.vue';
+import ConformanceResults from '@/components/Discover/Conformance/conformanceResults.vue';
 
 export default {
   setup() {
@@ -16,11 +20,11 @@ export default {
   },
   components: {
     StatusBar,
+    ConformanceResults,
   },
   async created() {
     let logId;
     if(this.$route.params.type === 'log') logId = this.$route.params.fileId;
-    console.log(logId);
 
     // this.isLoading = true;
     this.isLoading = false;
diff --git a/tailwind.config.js b/tailwind.config.js
index 6bdc6cd..1a35f97 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,7 +11,7 @@ module.exports = {
       transparent: 'transparent',
       current: 'currentColor',
       'primary': '#0099FF',
-      // 'secondary': '',
+      'secondary': '#FFAA44',
       'neutral': {
         10: '#ffffff',
         50: '#f8fafc',