Whatever

frontend/app/components/windows/CreateCampaignWindow.vue

@@ -1,8 +1,11 @@
 <script setup>
 import { onMounted, ref } from 'vue';
-import { SetupHandle, SetSize, ResetPosition, Top } from '@/services/Windows';
+import { SetupHandle, SetSize, ResetPosition, Top, ClearWindow } from '@/services/Windows';
 
 import WindowHandle from './partials/WindowHandle.vue';
+import ColorPicker from '../partials/ColorPicker.vue';
+import Server from '~/services/Server';
+import { DisplayToast } from '~/services/Toaster';
 
 const handle = ref(null);
 const wrapper = ref(null);
@@ -15,9 +18,25 @@ let id = data.id;
 onMounted(() => {
     Top(wrapper);
     SetupHandle(id, handle);
-    SetSize(id, {width: 500, height: 380});
+    SetSize(id, {width: 500, height: 400});
     ResetPosition(id, "center");
 });
+
+const campaignName = ref("");
+const campaignDescription = ref("");
+const colorPicker = ref(null);
+
+function NewCampaign(){
+    Server().post('/campaign/create', {
+        name: campaignName.value,
+        description: campaignDescription.value,
+        color: colorPicker.value.GetColor(),
+    }).then((response) => {
+        console.log(response.data);
+        DisplayToast('green', $t('campaigns.create.success'), 3000);
+        ClearWindow({id});
+    });
+}
 </script>
 
 
@@ -25,8 +44,28 @@ onMounted(() => {
     <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
         <WindowHandle :window="id" ref="handle"></WindowHandle>
 
-        <!-- Body -->
-        <div ref="test"></div>
+        <div class="body">
+            <!-- Body -->
+            <form v-on:submit.prevent="NewCampaign">
+                <div class="form-field">
+                    <label>{{ $t('campaigns.create.name') }}</label>
+                    <input type="text" :placeholder="$t('campaigns.create.enter')" name="campaignName" v-model="campaignName" autocomplete="off" >
+                </div>
+                <div class="form-field">
+                    <label>{{ $t('campaigns.create.description') }}</label>
+                    <textarea type="text" :placeholder="$t('campaigns.create.description-placeholder')" name="campaignDescription" v-model="campaignDescription" autocomplete="off" ></textarea>
+                </div>
+                <div class="form-field">
+                    <label>{{ $t('campaigns.create.color') }}</label>
+                    <ColorPicker ref="colorPicker"></ColorPicker>
+                </div>
+                <div class="form-actions">
+                    <button class="btn-primary sound-click">
+                        {{ $t("general.create") }}
+                    </button>
+                </div>
+            </form>
+        </div>
 
     </div>
 </template>
@@ -36,7 +75,60 @@ onMounted(() => {
 .window-wrapper {
     display: flex;
     align-items: center;
+    flex-direction: column;
 }
+
+.body {
+    width: 100%;
+}
+
+.window-second-header {
+    width: 100%;
+    h2 {
+        font-family: MrEavesRemake;
+    }
+}
+
+form {
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.form-field {
+    padding: 2px;
+    display: flex;
+    align-items: left;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+
+    > * {
+        flex-grow: 1;
+    }
+}
+
+label {
+    text-align: left;
+}
+
+textarea {
+    resize: none;
+    height: 200px;
+    font-size: 14px;
+}
+
+.form-actions {
+    display: flex;
+    justify-content: center; /* centers horizontally */
+    margin-top: 10px;
+}
+
+.form-actions button {
+    width: 100%;        /* makes it expand */
+    max-width: 300px;   /* optional: prevents it from being too wide */
+}
+
 </style>
 
 

frontend/app/components/windows/MainMenuWindow.vue

@@ -5,6 +5,8 @@ import { SetupHandle, SetSize, ResetPosition, Top, CreateChildWindow, GetFirstWi
 import WindowHandle from './partials/WindowHandle.vue';
 import VersionRender from '../partials/VersionRender.vue';
 import EditUserPartial from '../partials/EditUserPartial.vue';
+import CampaignEntry from '../partials/CampaignEntry.vue';
+import Server from '~/services/Server';
 
 const handle = ref(null);
 const wrapper = ref(null);
@@ -12,10 +14,20 @@ const wrapper = ref(null);
 const props = defineProps(['data']);
 const data = props.data;
 
+const campaings = ref([]);
+
 let id = data.id;
 
 function CreateCampaignWindow(){
-    CreateChildWindow(GetFirstWindowId('main_menu'), 'create_campaign', {
+    CreateChildWindow(GetFirstWindowId('main_menu'), 'create_campaign');
+}
+
+function RefreshCampaigns(){
+    Server().get('/campaign/list').then((response) => {
+        console.log(response.data);
+        response.data.forEach((camp) => {
+            campaings.value.push(camp.campaign);
+        });
     });
 }
 
@@ -24,6 +36,8 @@ onMounted(() => {
     SetupHandle(id, handle);
     SetSize(id, {width: 580, height: 760});
     ResetPosition(id, "center");
+
+    RefreshCampaigns();
 });
 </script>
 
@@ -37,13 +51,17 @@ onMounted(() => {
         <div class="vert-expand">
             <div class="vert top">
                 <h1>{{ $t("main-menu.main-menu")}}</h1>
+
+                <!-- HERE -->
+                 <div class="campaign-list">
+                    <CampaignEntry v-for="camp in myCampaigns" :key="camp._id" :data="camp"></CampaignEntry>
+                </div>
             </div>
             
             <div class="vert bot">
                 <div class="button-container">
                     <button class="btn-primary button-expand sound-click" v-on:click="CreateCampaignWindow" ref="campaignButton">{{ $t("main-menu.create-campaign") }}</button>
                 </div>
-                <VersionRender></VersionRender>
             </div>
         </div>
     </div>