From fafe82b15a104d2b52471f81c3c9f7ea7bdfdb1f Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Sun, 30 Jul 2023 20:02:46 +0200
Subject: [PATCH] [TASK] add status to boat

---
 frontend/scss/app.scss                        |  1 +
 frontend/scss/components/_input.scss          | 10 +++++
 frontend/scss/components/_status.scss         | 15 +++++++
 frontend/static/js/multiselect-dropdown.js    | 27 ++++++------
 ...vite.config.js.timestamp-1690738535795.mjs | 41 +++++++++++++++++++
 templates/includes/forms/log.html.tera        | 19 ++++++++-
 6 files changed, 98 insertions(+), 15 deletions(-)
 create mode 100644 frontend/scss/components/_status.scss
 create mode 100644 frontend/vite.config.js.timestamp-1690738535795.mjs

diff --git a/frontend/scss/app.scss b/frontend/scss/app.scss
index 3740b27..12ad22b 100644
--- a/frontend/scss/app.scss
+++ b/frontend/scss/app.scss
@@ -8,3 +8,4 @@
 @import 'components/links';
 @import 'components/input';
 @import 'components/alert';
+@import 'components/status';
diff --git a/frontend/scss/components/_input.scss b/frontend/scss/components/_input.scss
index 453fd78..9660691 100644
--- a/frontend/scss/components/_input.scss
+++ b/frontend/scss/components/_input.scss
@@ -1,3 +1,13 @@
 .input {
   @apply relative block w-full border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
 }
+
+select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right .75rem center;
+  background-size: 16px 12px;
+  background-color: white;
+  -webkit-appearance: none; 
+  appearance: none;
+}
\ No newline at end of file
diff --git a/frontend/scss/components/_status.scss b/frontend/scss/components/_status.scss
new file mode 100644
index 0000000..57fadfa
--- /dev/null
+++ b/frontend/scss/components/_status.scss
@@ -0,0 +1,15 @@
+.status {
+  @apply inline-block w-[12px] h-[12px] rounded-full mr-2;
+  
+  &-good {
+    @apply bg-[#15803d];
+  }
+
+  &-alert {
+    @apply bg-[#ffae42];
+  }
+
+  &-locked {
+    @apply bg-[#f43f5e];
+  }
+}
\ No newline at end of file
diff --git a/frontend/static/js/multiselect-dropdown.js b/frontend/static/js/multiselect-dropdown.js
index b52ef38..89d5bd9 100644
--- a/frontend/static/js/multiselect-dropdown.js
+++ b/frontend/static/js/multiselect-dropdown.js
@@ -3,7 +3,6 @@ style.setAttribute("id","multiselect_dropdown_styles");
 style.innerHTML = `
 .multiselect-dropdown{
   display: inline-block;
-  padding: 2px 5px 0px 5px;
   border-radius: 4px;
   border: solid 1px #ced4da;
   background-color: white;
@@ -12,6 +11,8 @@ style.innerHTML = `
   background-repeat: no-repeat;
   background-position: right .75rem center;
   background-size: 16px 12px;
+  padding: 0.375rem 0.5rem;
+  line-height: 1.5rem;
 }
 .multiselect-dropdown span.optext, .multiselect-dropdown span.placeholder{
   margin-right:0.5em; 
@@ -27,20 +28,18 @@ style.innerHTML = `
 .multiselect-dropdown span.optext .optdel {
   float: right;
   margin: 0 -6px 1px 5px;
-  font-size: 0.7em;
-  margin-top: 2px;
+  font-size: 1em;
   cursor: pointer;
-  color: #666;
 }
-.multiselect-dropdown span.optext .optdel:hover { color: #c66;}
+.multiselect-dropdown span.optext .optdel:hover { color:#f43f5e;}
 .multiselect-dropdown span.placeholder{
   color:#ced4da;
 }
 .multiselect-dropdown-list-wrapper{
-  box-shadow: gray 0 3px 8px;
+  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
   z-index: 100;
   padding:2px;
-  border-radius: 4px;
+  border-radius: .375rem;
   border: solid 1px #ced4da;
   display: none;
   margin: -1px;
@@ -52,6 +51,8 @@ style.innerHTML = `
 }
 .multiselect-dropdown-list-wrapper .multiselect-dropdown-search{
   margin-bottom:5px;
+  padding: 0.375rem 0.5rem;
+  line-height: 1.5rem;
 }
 .multiselect-dropdown-list{
   padding:2px;
@@ -63,8 +64,8 @@ style.innerHTML = `
   width: 6px;
 }
 .multiselect-dropdown-list::-webkit-scrollbar-thumb {
-  background-color: #bec4ca;
-  border-radius:3px;
+  background-color: rgba(226, 232, 240, 0.8);
+  border-radius: .375rem;
 }
 
 .multiselect-dropdown-list div{
@@ -78,7 +79,7 @@ style.innerHTML = `
 .multiselect-dropdown-list div.checked{
 }
 .multiselect-dropdown-list div:hover{
-  background-color: #ced4da;
+  background-color: rgba(226, 232, 240, 0.8);
 }
 .multiselect-dropdown span.maxselected {width:100%;}
 .multiselect-dropdown-all-selector {border-bottom:solid 1px #999;}
@@ -91,8 +92,8 @@ function MultiselectDropdown(options){
     height:'15rem',
     placeholder:'Auswählen',
     txtSelected:'ausgewählt',
-    txtAll:'All',
-    txtRemove: 'Löschen',
+    txtAll:'Alle',
+    txtRemove: 'Entfernen',
     txtSearch:'Suchen',
     ...options
   };
@@ -186,7 +187,7 @@ function MultiselectDropdown(options){
           sels.map(x=>{
             var c=newEl('span',{class:'optext',text:x.text, srcOption: x});
             if((el.attributes['multiselect-hide-x']?.value !== 'true'))
-              c.appendChild(newEl('span',{class:'optdel',text:'🗙',title:config.txtRemove, onclick:(ev)=>{c.srcOption.listitemEl.dispatchEvent(new Event('click'));div.refresh();ev.stopPropagation();}}));
+              c.appendChild(newEl('span',{class:'optdel',text:'x',title:config.txtRemove, onclick:(ev)=>{c.srcOption.listitemEl.dispatchEvent(new Event('click'));div.refresh();ev.stopPropagation();}}));
 
             div.appendChild(c);
           });
diff --git a/frontend/vite.config.js.timestamp-1690738535795.mjs b/frontend/vite.config.js.timestamp-1690738535795.mjs
new file mode 100644
index 0000000..bc0846d
--- /dev/null
+++ b/frontend/vite.config.js.timestamp-1690738535795.mjs
@@ -0,0 +1,41 @@
+// vite.config.js
+import { defineConfig } from "file:///Users/mariebirner/PrivateDev/rot/frontend/node_modules/vite/dist/node/index.js";
+import { viteStaticCopy } from "file:///Users/mariebirner/PrivateDev/rot/frontend/node_modules/vite-plugin-static-copy/dist/index.js";
+var vite_config_default = defineConfig({
+  plugins: [
+    viteStaticCopy({
+      targets: [
+        {
+          src: "./static/[!.]*",
+          dest: "./"
+        }
+      ]
+    })
+  ],
+  publicDir: false,
+  // disable copy `public/` to outDir
+  build: {
+    rollupOptions: {
+      input: {
+        main: "./main.ts"
+        // Example for more entry points
+        // test: './src/test.ts',
+      },
+      output: {
+        entryFileNames: "[name].js",
+        assetFileNames: "[name].css"
+      }
+    },
+    manifest: true,
+    // generate manifest.json in outDir
+    outDir: "../static/"
+  },
+  css: {
+    devSourcemap: true
+    // disabled by default because of performance reasons
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvbWFyaWViaXJuZXIvUHJpdmF0ZURldi9yb3QvZnJvbnRlbmRcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy9tYXJpZWJpcm5lci9Qcml2YXRlRGV2L3JvdC9mcm9udGVuZC92aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvbWFyaWViaXJuZXIvUHJpdmF0ZURldi9yb3QvZnJvbnRlbmQvdml0ZS5jb25maWcuanNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJztcbmltcG9ydCB7IHZpdGVTdGF0aWNDb3B5IH0gZnJvbSAndml0ZS1wbHVnaW4tc3RhdGljLWNvcHknXG5cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtcbiAgICB2aXRlU3RhdGljQ29weSh7XG4gICAgICB0YXJnZXRzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBzcmM6ICcuL3N0YXRpYy9bIS5dKicsXG4gICAgICAgICAgZGVzdDogJy4vJyxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSlcbiAgXSxcbiAgcHVibGljRGlyOiBmYWxzZSwgLy8gZGlzYWJsZSBjb3B5IGBwdWJsaWMvYCB0byBvdXREaXJcbiAgYnVpbGQ6IHtcbiAgICByb2xsdXBPcHRpb25zOiB7XG4gICAgICBpbnB1dDoge1xuICAgICAgICBtYWluOiAnLi9tYWluLnRzJyxcbiAgICAgICAgLy8gRXhhbXBsZSBmb3IgbW9yZSBlbnRyeSBwb2ludHNcbiAgICAgICAgLy8gdGVzdDogJy4vc3JjL3Rlc3QudHMnLFxuICAgICAgfSxcbiAgICAgIG91dHB1dDoge1xuICAgICAgICBlbnRyeUZpbGVOYW1lczogJ1tuYW1lXS5qcycsXG4gICAgICAgIGFzc2V0RmlsZU5hbWVzOiAnW25hbWVdLmNzcycsXG4gICAgICB9LFxuICAgIH0sXG4gICAgbWFuaWZlc3Q6IHRydWUsIC8vIGdlbmVyYXRlIG1hbmlmZXN0Lmpzb24gaW4gb3V0RGlyXG4gICAgb3V0RGlyOiAnLi4vc3RhdGljLycsXG4gIH0sXG4gIGNzczoge1xuICAgIGRldlNvdXJjZW1hcDogdHJ1ZSwgLy8gZGlzYWJsZWQgYnkgZGVmYXVsdCBiZWNhdXNlIG9mIHBlcmZvcm1hbmNlIHJlYXNvbnNcbiAgfSxcbn0pIl0sCiAgIm1hcHBpbmdzIjogIjtBQUFnVCxTQUFTLG9CQUFvQjtBQUM3VSxTQUFTLHNCQUFzQjtBQUUvQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTO0FBQUEsSUFDUCxlQUFlO0FBQUEsTUFDYixTQUFTO0FBQUEsUUFDUDtBQUFBLFVBQ0UsS0FBSztBQUFBLFVBQ0wsTUFBTTtBQUFBLFFBQ1I7QUFBQSxNQUNGO0FBQUEsSUFDRixDQUFDO0FBQUEsRUFDSDtBQUFBLEVBQ0EsV0FBVztBQUFBO0FBQUEsRUFDWCxPQUFPO0FBQUEsSUFDTCxlQUFlO0FBQUEsTUFDYixPQUFPO0FBQUEsUUFDTCxNQUFNO0FBQUE7QUFBQTtBQUFBLE1BR1I7QUFBQSxNQUNBLFFBQVE7QUFBQSxRQUNOLGdCQUFnQjtBQUFBLFFBQ2hCLGdCQUFnQjtBQUFBLE1BQ2xCO0FBQUEsSUFDRjtBQUFBLElBQ0EsVUFBVTtBQUFBO0FBQUEsSUFDVixRQUFRO0FBQUEsRUFDVjtBQUFBLEVBQ0EsS0FBSztBQUFBLElBQ0gsY0FBYztBQUFBO0FBQUEsRUFDaEI7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=
diff --git a/templates/includes/forms/log.html.tera b/templates/includes/forms/log.html.tera
index bae223c..50ce378 100644
--- a/templates/includes/forms/log.html.tera
+++ b/templates/includes/forms/log.html.tera
@@ -92,8 +92,21 @@
 	  	{% set_global boats = boats | filter(attribute="amount_seats", value=1) %}
 	{% endif %}
 	  	{% for boat in boats %}
-			<div id="boat-{{ boat.id }}" onclick="document.getElementById('boat_id').value='{{ boat.id }}';updateElementsBasedOnSelectedOption()">{{ boat.name }}</div>
-		{% endfor %}
+        {% set status = 'good' %}
+
+        {% if loop.index == 3 %} 
+          {% set status = 'locked' %}
+        {% endif %}
+
+        {% if loop.index == 1 %} 
+            {% set status = 'alert' %}
+        {% endif %}
+
+			  <div id="boat-{{ boat.id }}" {% if status != 'locked' %} onclick="document.getElementById('boat_id').value='{{ boat.id }}';updateElementsBasedOnSelectedOption()"{% endif %}>
+          <span class="status status-{{ status }}"></span>
+          <span {% if status == 'locked' %} class="opacity-50" {% endif %}>{{ boat.name }}</span>
+        </div>
+		  {% endfor %}
 	<script>
           function updateElementsBasedOnSelectedOption() {
             var selectElement = document.getElementById('boat_id');
@@ -244,6 +257,8 @@
     </div>
 
     <div class="relative">
+      {{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km_home", type="number", min=0, value=log.distance_in_km, required=true) }}
+      <span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white border-0 text-gray-600 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span>
     </div>
   
     {{ macros::input(label="Kommentar", name="comments", type="text", value=log.comments) }}