CI/CD test

frontend/app/components/viewer/content/Note.vue

@@ -2,7 +2,7 @@
 import { onMounted, onUnmounted, ref, createApp } from 'vue';
 import ToastManager from '~/components/managers/ToastManager.vue';
 import { emitter } from '~/services/Emitter';
-import { ParseMarkdown } from '~/services/Marker';
+import { GetWidget, ParseMarkdown } from '~/services/Marker';
 import Server from '~/services/Server';
 import { DisplayToast } from '~/services/Toaster';
 import TestWidget from '../widgets/TestWidget.vue';
@@ -15,6 +15,9 @@ const sourceText = ref(''); // Original markdown source, used for editing
 const displayText = ref(''); // Compiled HTML from markdown
 
 const editingMode = ref(false);
+const editableTitle = ref(null);
+const title = ref(props.title);
+const displayTitle = ref('');
 
 function closeNote(){
     emitter.emit('delete-note', props.noteKey);
@@ -28,12 +31,9 @@ function mountComponents() {
   const nodes = document.querySelectorAll('.vue-component');
 
   nodes.forEach(el => {
-    const app = createApp(TestWidget, { content: el.dataset.content });
+    const app = createApp(GetWidget(el.dataset.component), { content: el.dataset.content });
     app.mount(el);
-    console.log("Mounted a component")
   });
-
-  console.log("Huh")
 }
 /// 
 
@@ -51,6 +51,8 @@ watch(sourceText, (newText) => {
 
 onMounted(() => {
     sourceText.value = props.text;
+    title.value = props.title;
+    displayTitle.value = props.title;
     // window.addEventListener('keydown', handleKeydown);
     setTimeout(() => setupCallout(), 0);
     update();
@@ -65,7 +67,10 @@ function handleKeydown(e) {
   if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'e') {
     e.preventDefault(); // prevent browser default behavior
     editingMode.value = !editingMode.value;
-    if(!editingMode.value) update();
+    if(!editingMode.value){
+       update();
+       SaveNote(); // Save when switching to display mode
+    }
     return;
   }
 
@@ -80,13 +85,14 @@ function handleKeydown(e) {
 function SaveNote(){
     Server().post('/note/update', {
         id: props.noteKey,
-        content: sourceText.value
+        content: sourceText.value,
+        title: title.value,
     }).then((response) => {
         if(response.data.status !== 'ok'){
             // Handle error (e.g., show a notification)
             return;
         }
-        DisplayToast('green', "Note saved successfully.", 500);
+        // DisplayToast('green', "Note saved successfully.", 500);
     }).catch((error) => {
         // Handle error (e.g., show a notification)
     });
@@ -138,6 +144,10 @@ function setupCallout() {
 }
 
 
+const editTitle = (e) => {
+  title.value = e.target.innerText;
+}
+
 </script>
 
 <template>
@@ -150,7 +160,11 @@ function setupCallout() {
     </div>
     <div class="note-content-container">
         <textarea v-model="sourceText" class="full-editor" v-if="editingMode"></textarea>
-        <div class="note-content" ref="noteContent" v-html="displayText" v-else></div>
+        <div v-else class="note-content" ref="noteContent">
+          <h1 contenteditable="true" ref="editableTitle" @input="editTitle">{{ displayTitle }}</h1>
+          <div ref="noteContent" v-html="displayText"></div>
+        </div>
+        
     </div>
 </div>
 </template>

frontend/app/components/viewer/widgets/RollWidget.vue

@@ -0,0 +1,59 @@
+<script setup>
+const props = defineProps(['content']);
+
+import { parse } from '~/services/widgets/DiceParser';
+import { AddSound } from '~/services/Sound';
+
+const container = ref(null);
+const resultText = ref("");
+
+const rollDice = () => {
+    console.log(props.content);
+    const result = parse(props.content);
+    console.log(result);
+    resultText.value = result.total;
+};
+
+onMounted(() => {
+    AddSound(container.value);
+});
+</script>
+
+<template>
+    <div class="roll-widget" ref="container">
+        <div class="roll-widget-body">
+            <button class="btn-primary btn-inline sound-click" @click="rollDice">
+                <span class="dice-content">
+                    <!-- Dice icon (SVG) -->
+                    <img class="icon" src="/icons/iconoir/regular/dice-three.svg" draggable="false">
+
+                    <!-- Result text -->
+                    <span class="result-text">
+                        {{ resultText || props.content }}
+                    </span>
+                </span>
+            </button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.roll-widget {
+    display: inline-flex; /* or inline-block */
+    vertical-align: middle; /* keeps it aligned nicely with text */
+}
+
+.btn-inline {
+    padding: 2px 6px;
+}
+
+.dice-content {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.result-text {
+    font-weight: 500;
+}
+</style>

frontend/app/components/windows/CreateCampaignWindow.vue

@@ -12,6 +12,7 @@ const wrapper = ref(null);
 
 const props = defineProps(['data']);
 const data = props.data;
+const loading = ref(false);
 
 let id = data.id;
 
@@ -29,11 +30,13 @@ const colorPicker = ref(null);
 function NewCampaign(){
     const color = colorPicker.value.GetColor();
     console.log(color);
+    loading.value = true;
     Server().post('/campaign/create', {
         name: campaignName.value,
         description: campaignDescription.value,
         color: colorPicker.value.GetColor(),
     }).then((response) => {
+        loading.value = false;
         console.log(response.data);
         DisplayToast('green', $t('campaigns.create.success'), 3000);
         ClearWindow({id});
@@ -63,7 +66,12 @@ function NewCampaign(){
                 </div>
                 <div class="form-actions">
                     <button class="btn-primary sound-click">
-                        {{ $t("general.create") }}
+                        <span v-if="loading">
+                            <Spinner />
+                        </span>
+                        <span v-else>
+                            {{ $t("general.create") }}
+                        </span>
                     </button>
                 </div>
             </form>