-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b720142
commit 66705cf
Showing
11 changed files
with
263 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| <script setup lang="ts"> | ||
| import ErrorModal from "~/components/InfoModals/ErrorModal.vue"; | ||
| import SuccessModal from "~/components/InfoModals/SuccessModal.vue"; | ||
| import {$fetch} from "ofetch"; | ||
| const success = ref(null); | ||
| const error = ref(null); | ||
| const store = useAuthStore(); | ||
| const account = await $fetch('http://127.0.0.1:3890/v1/account/identity', { | ||
| headers: { | ||
| Authorization: `Bearer ${store.token}` | ||
| } | ||
| }) | ||
| const payload = ref({ | ||
| accid: 0, | ||
| name: '', | ||
| description: '' | ||
| }) | ||
| payload.value.accid = account.id; | ||
| function closeSuccessModal() { | ||
| success.value.close() | ||
| } | ||
| async function create() { | ||
| let image; | ||
| const category = await $fetch('http://127.0.0.1:3890/v1/category/new', { | ||
| method: 'POST', | ||
| headers: { | ||
| Authorization: `Bearer ${store.token}` | ||
| }, | ||
| body: payload | ||
| }) | ||
| if (eFile.value.name && eFile.value.name.length > 0) { | ||
| var formData = new FormData() | ||
| formData.append("id", category); | ||
| formData.append("file", eFile.value) | ||
| image = await $fetch('http://127.0.0.1:3890/v1/storage/uploadGameImage', { | ||
| method: 'POST', | ||
| body: formData, | ||
| headers: { | ||
| Authorization: `Bearer ${store.token}` | ||
| } | ||
| }) | ||
| } | ||
| } | ||
| const image = ref({}); | ||
| let eFile = ref({}); | ||
| const preview = ref(false); | ||
| async function imageref(e) { | ||
| let file = e.target.files | ||
| eFile.value = file[0]; | ||
| if (file && file[0]) { | ||
| let reader = new FileReader | ||
| reader.onload = e => { | ||
| image.value = e.target.result | ||
| } | ||
| reader.readAsDataURL(file[0]) | ||
| } | ||
| preview.value = true; | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="tw-bg-gray-900 dark:tw-bg-gray-900 tw-h-553 tw-w-552"> | ||
| <div class="tw-py-8 tw-px-4 tw-mx-auto tw-max-w-2xl "> | ||
| <h2 class=" tw-text-xl tw-font-bold tw-text-gray-900 dark:tw-text-white">Add a new game</h2> | ||
| <form v-on:submit.prevent="create"> | ||
| <div class=""> | ||
| <div class="sm:tw-col-span-2"> | ||
| <label for="name" class="tw-block tw-mb-2 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-white">Name</label> | ||
| <input v-model="payload.name" type="text" name="name" id="name" class="tw-bg-gray-50 tw-border tw-border-gray-300 tw-text-gray-900 tw-text-sm tw-rounded-lg focus:tw-ring-primary-600 focus:tw-border-primary-600 tw-block tw-w-full tw-p-2.5 dark:tw-bg-gray-700 dark:tw-border-gray-600 dark:tw-placeholder-gray-400 dark:tw-text-white dark:focus:tw-ring-primary-500 dark:focus:tw-border-primary-500" placeholder="Name" required="required"> | ||
| </div> | ||
| <div class="sm:tw-col-span-2 tw-mt-3"> | ||
| <label for="desc" class="tw-block tw-mb-2 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-white">Description</label> | ||
| <input v-model="payload.description" type="text" name="desc" id="desc" class="tw-bg-gray-50 tw-border tw-border-gray-300 tw-text-gray-900 tw-text-sm tw-rounded-lg focus:tw-ring-primary-600 focus:tw-border-primary-600 tw-block tw-w-full tw-p-2.5 dark:tw-bg-gray-700 dark:tw-border-gray-600 dark:tw-placeholder-gray-400 dark:tw-text-white dark:focus:tw-ring-primary-500 dark:focus:tw-border-primary-500" placeholder="Description" required="required"> | ||
| </div> | ||
| <div class="tw-mt-3"> | ||
| <label for="dropzone-file" class="tw-block tw-mb-2 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-white">Project image</label> | ||
| <div class="tw-flex tw-items-center tw-justify-center tw-w-full"> | ||
| <div> | ||
| <label for="dropzone-file" class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-auto tw-h-64 tw-border-2 tw-border-gray-300 tw-border-dashed tw-rounded-lg tw-cursor-pointer tw-bg-gray-50 dark:hover:tw-bg-bray-800 dark:tw-bg-gray-700 hover:tw-bg-gray-100 dark:tw-border-gray-600 dark:hover:tw-border-gray-500 dark:hover:tw-bg-gray-600"> | ||
| <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-pt-5 tw-pb-6"> | ||
| <div v-if="preview" | ||
| class="imagePreviewWrapper tw-rounded-lg" | ||
| :style="{ 'background-image': `url(${image})` }"> | ||
| </div> | ||
| <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-pt-5 tw-pb-6" v-if="!preview"> | ||
| <svg aria-hidden="true" class="tw-w-10 tw-h-10 tw-mb-3 tw-text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg> | ||
| <p class="tw-mb-2 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p> | ||
| <p class="tw-text-xs text-gray-500 dark:tw-text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p> | ||
| </div> | ||
| </div> | ||
| </label> | ||
| <input id="dropzone-file" type="file" class="tw-hidden" @change="imageref" ref="fileInput" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <button type="submit" class="tw-inline-flex tw-items-center tw-px-5 tw-py-2 tw-mt-2 sm:tw-mt-4 tw-text-sm tw-font-medium tw-text-center tw-text-white tw-bg-violet-700 tw-rounded-lg focus:tw-ring-4 focus:tw-ring-violet-200 dark:focus:tw-ring-violet-900 hover:tw-bg-violet-800"> | ||
| Create | ||
| </button> | ||
| </form> | ||
| </div> | ||
| <SuccessModal @ok="closeSuccessModal" ref="success"/> | ||
| <ErrorModal ref="error"/> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| .imagePreviewWrapper { | ||
| width: 250px; | ||
| height: 250px; | ||
| display: block; | ||
| cursor: pointer; | ||
| background-size: cover; | ||
| background-position: center center; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <template> | ||
| <v-card | ||
| class="mx-auto" | ||
| max-width="184" | ||
| > | ||
| <v-img | ||
| :src='this.image' | ||
| width="184px" | ||
| contain | ||
| ></v-img> | ||
|
|
||
| <v-card-title> | ||
| {{ project.name }} | ||
| </v-card-title> | ||
|
|
||
| <v-card-subtitle style="margin-bottom: 3vh"> | ||
| Modifications: {{ project.projects.length }} | ||
| </v-card-subtitle> | ||
| </v-card> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| props: { | ||
| project: { | ||
| type: Object, | ||
| required: true | ||
| } | ||
| }, | ||
| data() { | ||
| return { | ||
| image: 'http://127.0.0.1:3890/v1/storage/getCategoryAvatar?key=' | ||
| } | ||
| }, | ||
| mounted() { | ||
| if (this.project.image !== undefined) { | ||
| this.image += this.project.image | ||
| } else { | ||
| this.image += 'default.png' | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style> | ||
| .card-size { | ||
| width: 184px; | ||
| height: 287px; | ||
| } | ||
| .card-image { | ||
| width: 184px; | ||
| height: 260px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| <script setup lang="ts"> | ||
| import CategoryCreation from "~/components/dashboard/CRUD/CategoryCreation.vue"; | ||
| import Modal from "~/components/base/Modal.vue"; | ||
| import DevCard from "~/components/dashboard/DevCard.vue"; | ||
| const creation = ref(false); | ||
| const categories = await $fetch('http://127.0.0.1:3890/v1/category/all'); | ||
| function toggleCreationModal() { | ||
| creation.value = !creation.value | ||
| } | ||
| </script> | ||
| <template> | ||
| <div class="tw-min-h-screen tw-ml-10 tw-p-5"> | ||
| <button @click="toggleCreationModal" class="tw-mt-3 tw-bg-blue-500 hover:tw-bg-blue-700 tw-text-white tw-font-bold tw-py-2 tw-px-4 tw-rounded"> | ||
| Create category | ||
| </button> | ||
| <div class="tw-flex tw-justify-center tw-items-center tw-flex-grow tw-mt-7"> | ||
| <div class="tw-flex-col"> | ||
| <div class="tw-grid tw-grid-cols-1 sm:tw-grid-cols-3 md:tw-grid-cols-5 lg:tw-grid-cols-5 tw-gap-4 tw-mt-5"> | ||
| <div v-for="(category, index) in categories" :key="index"> | ||
| <DevCard :project="category" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <Modal v-if="creation" @close="toggleCreationModal"> | ||
| <CategoryCreation/> | ||
| </Modal> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.