From 88d06f595c9c05e62fb34664a9e7b48dff51ca70 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Mon, 29 Jan 2024 14:03:49 +0100
Subject: [PATCH] ADD: WIP Component

---
 src/components/WIP.vue                        | 20 ++++++++
 src/components/config/pages/ProfileConfig.vue | 50 ++++++++++---------
 2 files changed, 47 insertions(+), 23 deletions(-)
 create mode 100644 src/components/WIP.vue

diff --git a/src/components/WIP.vue b/src/components/WIP.vue
new file mode 100644
index 0000000..ae9d5f6
--- /dev/null
+++ b/src/components/WIP.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="bg-wip w-full text-center p-8 text-zinc-200">
+    <span class="bg-black font-heading p-1">WORK IN PROGRESS</span>
+  </div>
+</template>
+
+<style scoped>
+.bg-wip {
+  --stripe-color-a: rgb(228 228 231);
+  --stripe-color-b: black;
+  --stripe-width: 1em;
+  background: repeating-linear-gradient(
+    45deg,
+    var(--stripe-color-a),
+    var(--stripe-color-a) var(--stripe-width),
+    var(--stripe-color-b) var(--stripe-width),
+    var(--stripe-color-b) calc(var(--stripe-width) * 2)
+  );
+}
+</style>
\ No newline at end of file
diff --git a/src/components/config/pages/ProfileConfig.vue b/src/components/config/pages/ProfileConfig.vue
index 03abefd..18c5fda 100644
--- a/src/components/config/pages/ProfileConfig.vue
+++ b/src/components/config/pages/ProfileConfig.vue
@@ -1,35 +1,38 @@
 <template>
   <div class="w-96">
     <ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
-      <div class="flex flex-col p-8 py-4">
+      <WIP />
+      <div class="hidden">
+        <div class="flex flex-col p-8 py-4">
                       <span
                         class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.profile_settings.profile_properties.profile_name')
                         }}</span>
-        <Input
-          type="text" :placeholder="$t('config_options.profile_settings.profile_properties.profile_name')"
-          class="text-xl border-0 text-center border-b rounded-none focus-visible:ring-0 focus-visible:border-emerald-500 font-pixelsm uppercase"
-          default-value="Oscillator 1" maxlength="20" />
+          <Input
+            type="text" :placeholder="$t('config_options.profile_settings.profile_properties.profile_name')"
+            class="text-xl border-0 text-center border-b rounded-none focus-visible:ring-0 focus-visible:border-emerald-500 font-pixelsm uppercase"
+            default-value="Oscillator 1" maxlength="20" />
 
-        <Label for="text" class="text-muted-foreground text-right mt-1 text-xs">16/20</Label>
-      </div>
-      <Separator />
-      <div class="flex flex-col p-8 py-4">
+          <Label for="text" class="text-muted-foreground text-right mt-1 text-xs">16/20</Label>
+        </div>
+        <Separator />
+        <div class="flex flex-col p-8 py-4">
                       <span
                         class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.profile_settings.profile_properties.profile_description')
                         }}</span>
-        <Textarea
-          class="text-lg px-3 bg-inherit text-center focus-visible:outline-none border-b focus-visible:border-emerald-500 resize-none font-pixelsm text-muted-foreground uppercase"
-          :placeholder="$t('config_options.profile_settings.profile_properties.profile_description')"
-          default-value="Adjust Korg Oscillator Waveform " rows="2"
-          maxlength="50" />
-        <Label for="textarea" class="text-muted-foreground text-right mt-1 text-xs">24/50</Label>
-        <div class="flex items-center space-x-4 space-y-1">
-          <Switch id="airplane-mode" :default-checked="true" />
-          <Label
-            for="airplane-mode"
-            class="text-xs text-muted-foreground">{{
-              $t('config_options.profile_settings.profile_properties.show_description')
-            }}</Label>
+          <Textarea
+            class="text-lg px-3 bg-inherit text-center focus-visible:outline-none border-b focus-visible:border-emerald-500 resize-none font-pixelsm text-muted-foreground uppercase"
+            :placeholder="$t('config_options.profile_settings.profile_properties.profile_description')"
+            default-value="Adjust Korg Oscillator Waveform " rows="2"
+            maxlength="50" />
+          <Label for="textarea" class="text-muted-foreground text-right mt-1 text-xs">24/50</Label>
+          <div class="flex items-center space-x-4 space-y-1">
+            <Switch id="airplane-mode" :default-checked="true" />
+            <Label
+              for="airplane-mode"
+              class="text-xs text-muted-foreground">{{
+                $t('config_options.profile_settings.profile_properties.show_description')
+              }}</Label>
+          </div>
         </div>
       </div>
     </ConfigSection>
@@ -51,7 +54,7 @@
           }}:<br>
           <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
             class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
-        <Separator/>
+        <Separator />
         <span class="pt-4">{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
       </p>
     </ConfigSection>
@@ -68,6 +71,7 @@ import UsbIcon from '@/assets/gui-ico/ico-usb-logo.svg'
 import MidiIcon from '@/assets/gui-ico/ico-midi-logo.svg'
 import ConnectionTypeButton from '@/components/config/ConnectionTypeButton.vue'
 import { Badge } from '@/components/ui/badge'
+import WIP from '@/components/WIP.vue'
 
 const connectionType = ref('usb') // TODO: replace with actual value