From bb9b54f179ec61aa323f17a4fa8d4aae18a49180 Mon Sep 17 00:00:00 2001
From: Emil Lipskij <emil.lipskij@gmail.com>
Date: Mon, 10 Jul 2023 17:40:28 +0300
Subject: [PATCH 1/5] dataflash component vue

---
 .../data-flash/DataFlash.stories.js           |  16 +++
 src/components/data-flash/DataFlash.vue       | 115 ++++++++++++++++++
 2 files changed, 131 insertions(+)
 create mode 100644 src/components/data-flash/DataFlash.stories.js
 create mode 100644 src/components/data-flash/DataFlash.vue

diff --git a/src/components/data-flash/DataFlash.stories.js b/src/components/data-flash/DataFlash.stories.js
new file mode 100644
index 0000000000..aa76690f1e
--- /dev/null
+++ b/src/components/data-flash/DataFlash.stories.js
@@ -0,0 +1,16 @@
+import DataFlash from "./DataFlash";
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+    title: "Default flash",
+    component: DataFlash,
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (_args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { DataFlash },
+    template: '<data-flash v-bind="$props" />',
+});
+
+export const Primary = Template.bind({});
diff --git a/src/components/data-flash/DataFlash.vue b/src/components/data-flash/DataFlash.vue
new file mode 100644
index 0000000000..735f05a496
--- /dev/null
+++ b/src/components/data-flash/DataFlash.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="data-flash">
+    <div
+      v-if="!suportDataflash"
+      class="noflash_global i18n-replaced"
+    >
+      No dataflash <br>chip found
+    </div>
+    <div
+      v-if="suportDataflash"
+      class="dataflash-contents_global"
+    >
+      <div
+        class="dataflash-free_global"
+        :style="{
+          width: indicatorWidth,
+        }"
+      >
+        <span class="i18n-replaced">
+          Dataflash: free
+          {{ freeSpace }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+    props: {
+        fcTotalSize: { type: Number, default: 100000 },
+        fcUsedSize: { type: Number, default: 42000 },
+    },
+    computed: {
+        suportDataflash() {
+            if (this.fcTotalSize > 0) return true;
+            else return false;
+        },
+        freeSpace() {
+            if (!this.suportDataflash) return;
+            const bytes = this.fcTotalSize - this.fcUsedSize;
+            if (bytes < 1024) {
+                return `${bytes}B`;
+            }
+            const kilobytes = bytes / 1024;
+            if (kilobytes < 1024) {
+                return `${Math.round(kilobytes)}kB`;
+            }
+            const megabytes = kilobytes / 1024;
+            return `${megabytes.toFixed(1)}MB`;
+        },
+        indicatorWidth() {
+            if (!this.suportDataflash) return;
+            return `${
+                100 -
+                ((this.fcTotalSize - this.fcUsedSize) / this.fcTotalSize) * 100
+            }%`;
+        },
+    },
+};
+</script>
+
+<style scoped>
+.data-flash {
+    display: block;
+    font-size: 10px;
+    width: 125px;
+    height: 33px;
+    border-radius: 5px;
+    border: 1px solid #272727;
+    box-shadow: 0 1px 0 rgb(92 92 92 / 50%);
+    background-color: #434343;
+    background-image: -webkit-linear-gradient(
+        top,
+        transparent,
+        rgba(0, 0, 0, 0.55)
+    );
+    padding-top: 5px;
+    text-shadow: 0 1px #000000;
+}
+.noflash_global {
+    color: #868686;
+    text-align: center;
+    text-shadow: 0 1px #000000;
+    margin-top: 2px;
+}
+
+.dataflash-contents_global {
+    margin-top: 18px;
+    padding: 0;
+    border: 1px solid #4a4a4a;
+    background-color: #4a4a4a;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    border-radius: 3px;
+    margin-left: 5px;
+    margin-right: 5px;
+}
+.dataflash-contents_global div {
+    height: 5px;
+    position: relative;
+    box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
+    border-radius: 2px;
+    width: 25%;
+    display: block;
+    background-color: yellow;
+}
+.dataflash-contents_global div span {
+    position: absolute;
+    top: -18px;
+    left: 0;
+    width: 120px;
+    text-align: left;
+    color: silver;
+}
+</style>

From 16aece386f7d8ca5cdf473b53f8517208463ec41 Mon Sep 17 00:00:00 2001
From: Emil Lipskij <emil.lipskij@gmail.com>
Date: Mon, 10 Jul 2023 17:56:09 +0300
Subject: [PATCH 2/5] using css vars

---
 src/components/data-flash/DataFlash.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/data-flash/DataFlash.vue b/src/components/data-flash/DataFlash.vue
index 735f05a496..5dbf187466 100644
--- a/src/components/data-flash/DataFlash.vue
+++ b/src/components/data-flash/DataFlash.vue
@@ -102,7 +102,7 @@ export default {
     border-radius: 2px;
     width: 25%;
     display: block;
-    background-color: yellow;
+    background-color: var(--accent);
 }
 .dataflash-contents_global div span {
     position: absolute;

From f57b1182bc06145725a4c4abc9aff965ffdcf45a Mon Sep 17 00:00:00 2001
From: Emil Lipskij <emil.lipskij@gmail.com>
Date: Mon, 10 Jul 2023 18:08:54 +0300
Subject: [PATCH 3/5] fix indicator for free space

---
 src/components/data-flash/DataFlash.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/data-flash/DataFlash.vue b/src/components/data-flash/DataFlash.vue
index 5dbf187466..2ce6c2ced3 100644
--- a/src/components/data-flash/DataFlash.vue
+++ b/src/components/data-flash/DataFlash.vue
@@ -28,7 +28,7 @@
 export default {
     props: {
         fcTotalSize: { type: Number, default: 100000 },
-        fcUsedSize: { type: Number, default: 42000 },
+        fcUsedSize: { type: Number, default: 82000 },
     },
     computed: {
         suportDataflash() {
@@ -38,6 +38,9 @@ export default {
         freeSpace() {
             if (!this.suportDataflash) return;
             const bytes = this.fcTotalSize - this.fcUsedSize;
+            if(this.fcUsedSize >= this.fcTotalSize) {
+              return '0B';
+            }
             if (bytes < 1024) {
                 return `${bytes}B`;
             }
@@ -50,10 +53,10 @@ export default {
         },
         indicatorWidth() {
             if (!this.suportDataflash) return;
-            return `${
-                100 -
-                ((this.fcTotalSize - this.fcUsedSize) / this.fcTotalSize) * 100
-            }%`;
+            return `${Math.min(
+                (this.fcUsedSize / this.fcTotalSize) * 100,
+                100,
+            )}%`;
         },
     },
 };

From d87922a5665758772426aaf2283ab7cf1128cda5 Mon Sep 17 00:00:00 2001
From: Emil Lipskij <emil.lipskij@gmail.com>
Date: Tue, 11 Jul 2023 20:10:09 +0300
Subject: [PATCH 4/5] fix typos

---
 src/components/data-flash/DataFlash.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/data-flash/DataFlash.vue b/src/components/data-flash/DataFlash.vue
index 2ce6c2ced3..f5c2853e44 100644
--- a/src/components/data-flash/DataFlash.vue
+++ b/src/components/data-flash/DataFlash.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="data-flash">
     <div
-      v-if="!suportDataflash"
+      v-if="!supportDataflash"
       class="noflash_global i18n-replaced"
     >
       No dataflash <br>chip found
     </div>
     <div
-      v-if="suportDataflash"
+      v-if="supportDataflash"
       class="dataflash-contents_global"
     >
       <div
@@ -31,12 +31,12 @@ export default {
         fcUsedSize: { type: Number, default: 82000 },
     },
     computed: {
-        suportDataflash() {
+        supportDataflash() {
             if (this.fcTotalSize > 0) return true;
             else return false;
         },
         freeSpace() {
-            if (!this.suportDataflash) return;
+            if (!this.supportDataflash) return;
             const bytes = this.fcTotalSize - this.fcUsedSize;
             if(this.fcUsedSize >= this.fcTotalSize) {
               return '0B';
@@ -52,7 +52,7 @@ export default {
             return `${megabytes.toFixed(1)}MB`;
         },
         indicatorWidth() {
-            if (!this.suportDataflash) return;
+            if (!this.supportDataflash) return;
             return `${Math.min(
                 (this.fcUsedSize / this.fcTotalSize) * 100,
                 100,

From c1cda88ceab7f9b68d6374fbef53f5a135f6f248 Mon Sep 17 00:00:00 2001
From: Emil Lipskij <emil.lipskij@gmail.com>
Date: Tue, 11 Jul 2023 20:14:36 +0300
Subject: [PATCH 5/5] formatting

---
 src/components/data-flash/DataFlash.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/data-flash/DataFlash.vue b/src/components/data-flash/DataFlash.vue
index f5c2853e44..411123feb7 100644
--- a/src/components/data-flash/DataFlash.vue
+++ b/src/components/data-flash/DataFlash.vue
@@ -38,8 +38,8 @@ export default {
         freeSpace() {
             if (!this.supportDataflash) return;
             const bytes = this.fcTotalSize - this.fcUsedSize;
-            if(this.fcUsedSize >= this.fcTotalSize) {
-              return '0B';
+            if (this.fcUsedSize >= this.fcTotalSize) {
+                return "0B";
             }
             if (bytes < 1024) {
                 return `${bytes}B`;