From 4f88c80bb6611162d693b2d3441244a0c267d028 Mon Sep 17 00:00:00 2001
From: iTob <tobias@wohlleben.dev>
Date: Wed, 12 Mar 2025 20:39:37 +0100
Subject: [PATCH] init 7

---
 public/index.html |  2 +-
 src/index.js      |  5 ++++-
 src/style.scss    | 13 ++++++++-----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index e8a031b..ab22b9b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -36,6 +36,7 @@
             <label for="taWorkshopId">WorkshopIDs</label>
             <textarea id="taWorkshopId" class="u-full-width" x-model="ids"></textarea>
             <button x-on:click="getModDescription()">load mod descriptions</button>
+            <button @click="copyToClipboard()" x-bind:disabled="checkedItems.length == 0">Copy selected</button>
         </div>
     </div>
     <template x-if="items.length > 0">
@@ -63,7 +64,6 @@
                     </template>
                     </tbody>
                 </table>
-                <span x-text="JSON.stringify(checkedItems)"></span>
             </div>
         </div>
     </template>
diff --git a/src/index.js b/src/index.js
index 11c3297..740a205 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,7 @@ import './skeleton.css'
 import './style.scss'
 
 import Alpine from 'alpinejs'
-import {defer, orderBy, sortBy} from "lodash";
+import { defer } from "lodash";
 import * as cheerio from 'cheerio';
 
 window.Alpine = Alpine;
@@ -16,6 +16,9 @@ document.addEventListener('alpine:init', () => {
         items: [],
         loading: false,
         checkedItems: [],
+        copyToClipboard() {            
+            navigator.clipboard.writeText(this.checkedItems.join(';'));
+        },
         checkItems(e) {
             if (e.target.checked) {
                 this.checkedItems = this.items.map(item => item.id);
diff --git a/src/style.scss b/src/style.scss
index a293321..299ff5f 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -2,6 +2,7 @@ $text: #906b3a;
 $hover: #C9AE5D;
 $bg: #222;
 $secColor: #333;
+$primary: #ccc;
 
 body {
   color: $text;
@@ -10,15 +11,17 @@ body {
 
 a, button {
   color: $text;
-  background-color: $bg;
+  background-color: $primary;
 }
 
-button:focus {
-  color: $text;
-  background-color: $bg;
+button[disabled] {
+  background:$bg;
+  border-color: $primary;
+  color: $secColor;
+  text-shadow:none;
 }
 
-button:hover {
+button[disabled=false]:hover {
   color: $bg;
   background-color: $text;
 }