updated StateSelector: now utilizes buttons instead of dropdown

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/Components/StateSelector.svelte

@@ -3,6 +3,14 @@
     import {api}     from '../urls.svelte.js';
     import {t}       from '../translations.svelte.js';
 
+    const icons = {
+        10 : '',
+        20 : '',
+        40 : '',
+        60 : '',
+        100: ''
+    }
+
     let {
         caption    = t('select_state'),
         selected   = $bindable(0),
@@ -12,9 +20,20 @@
 </script>
 
 {#if project?.allowed_states}
-<select bind:value={selected} onchange={() => onchange(selected)}>
+<!--<select bind:value={selected} onchange={() => onchange(selected)}>
     {#each Object.entries(project.allowed_states) as [code,name]}
     <option value={+code}>{code%10?name:t('state_'+name.toLowerCase())}</option>
     {/each}
-</select>
+</select>-->
+<span class="states">
+    {#each Object.entries(project.allowed_states) as [code,name]}
+    <button onclick={e => onchange(code)} title={code%10?name:t('state_'+name.toLowerCase())} class={selected == code?'active':null}>
+        {#if icons[code]}
+        <span class="symbol">{icons[code]}</span>
+        {:else}
+        {code%10?name:t('state_'+name.toLowerCase())}
+        {/if}
+    </button>
+    {/each}
+</span>
 {/if}

web/src/main/resources/web/css/default-color.css

@@ -130,6 +130,10 @@ tr:hover a{
     color: orange;
 }
 
+.states .active{
+    background: yellow;
+}
+
 .taglist .tag{
     border-color: orange;
 }