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>