Syndria98/dragonroll
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

backup

Browse Source
This commit is contained in:
Aran Roig
2026-04-26 00:08:27 +02:00
parent 92074e7f60
commit c3e5448597
40 changed files with 1783 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/app/components/managers/ContentManager.vue Normal file
View File

@@ -0,0 +1,18 @@
<script setup>
import Content from '../viewer/content/Content.vue';
import StatusBar from '../viewer/statusbar/StatusBar.vue';
import TopBar from '../viewer/TopBar.vue';
import { ShowContent } from '../../services/Content.js';
</script>
<template>
<div v-show="ShowContent">
<TopBar></TopBar>
<Content></Content>
<StatusBar></StatusBar>
</div>
</template>
<style scoped>
</style>

120
frontend/app/components/managers/ToastManager.vue Normal file
View File

@@ -0,0 +1,120 @@
<script setup>
import { ref } from 'vue';
import { emitter } from '@/services/Emitter';
const text = ref("");
const toast = ref(null);
let toastQueue = [];
let displayingToast = false;
function DisplayToast(){
if(displayingToast) return;
if(toastQueue.length == 0) return;
displayingToast = true;
let data = toastQueue.pop();
text.value = data.text;
toast.value.classList.add(data.color);
toast.value.classList.add("show");
setTimeout(() => {
toast.value.classList.add("sliding");
setTimeout(() => {
toast.value.style = {};
toast.value.classList.remove("show");
toast.value.classList.remove("sliding");
toast.value.classList.remove(data.color);
displayingToast = false;
DisplayToast();
}, 400);
}, data.duration);
}
emitter.on('toast', data => {
toastQueue.push(data);
DisplayToast();
});
</script>
<template>
<div class="toast" ref="toast">
<div class="toast-container">{{ text }}</div>
</div>
</template>
<style scoped lang="scss">
.toast-container {
height: 100%;
background-color: var(--color-background-soft);
padding: 10px;
margin-left: 5px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
transform: translate(2px,0px)
}
.toast {
position: absolute;
display: none;
top: 10px;
left: 50%;
transform: translate(-50%, 0);
min-width: 400px;
min-height: 40px;
border-radius: 6px;
text-align: center;
z-index: 9999999;
animation: slide-in 0.4s ease-in-out;
@keyframes slide-in {
0% {
transform: translate(-50%,-50px);
opacity: 0;
}
100% {
opacity: 1;
}
}
&.sliding {
@keyframes slide-out {
0% {
opacity: 1;
}
100% {
transform: translate(-50%,-50px);
opacity: 0;
}
}
animation: slide-out .4s ease-in-out forwards;
}
&.show {
display: block;
}
/* Colors!!!! */
&.red {
background-color: rgb(243, 68, 68);
}
&.green {
background-color: rgb(92, 199, 92);
}
&.aqua {
background-color: rgb(113, 250, 250);
}
}
</style>

13
frontend/app/components/managers/WindowManager.vue
View File

@@ -29,7 +29,7 @@ const windows = Windows();
}
.window-wrapper {
background-color: var(--window-background);
background-color: var(--color-window-background);
/* backdrop-filter: blur(10px); */
position: fixed;
@@ -37,6 +37,15 @@ const windows = Windows();
display: flex;
flex-direction: column;
}
align-items: center;
border: solid 1px var(--color-window-border);
/* opacity: 0; */
user-select: none;
-webkit-box-shadow: 0px 0px 10px -2px var(--color-window-shadow);
-moz-box-shadow: 0px 0px 10px -2px var(--color-window-shadow);
box-shadow: 0px 0px 10px -2px var(--color-window-shadow);
}
</style>

2
frontend/app/components/viewer/TopBar.vue
View File

@@ -21,7 +21,7 @@ import TopSearchBar from './topbar/TopSearchBar.vue';
flex-shrink: 0;
min-height: 40px;
width: 100%;
background-color: var(--top-bar-background-color);
background-color: var(--color-background-light);
display: flex;
}

4
frontend/app/components/viewer/content/NoteContainer.vue
View File

@@ -1,8 +1,7 @@
<script setup>
import { ref, onMounted } from 'vue';
import Note from './Note.vue';
const emitter = useEmitter();
import { emitter } from '~/services/Emitter';
let noteData = ref([]);
@@ -61,6 +60,7 @@ emitter.on("delete-note", (key) => {
height: 100%;
margin: 0;
height: 100%;
background-color: var(--color-background);
}
</style>

3
frontend/app/components/viewer/statusbar/FetchStatus.vue
View File

@@ -1,6 +1,7 @@
<script setup>
import { ref,onMounted } from 'vue';
const emitter = useEmitter();
import { emitter } from '~/services/Emitter';
const statusIcon = ref(null);
const statusMessage = ref(null);

2
frontend/app/components/viewer/statusbar/StatusBar.vue
View File

@@ -22,7 +22,7 @@ import FetchStatus from './FetchStatus.vue';
min-height: 24px;
max-height: 24px;
width: 100%;
background-color: var(--top-bar-background-color);
background-color: var(--color-background-light);
display: flex;
font-size: 14px;
}

42
frontend/app/components/windows/ExampleWindow.vue Normal file
View File

@@ -0,0 +1,42 @@
<script setup>
import { onMounted, ref } from 'vue';
import { SetupHandle, SetSize, ResetPosition } from '@/services/Windows';
import WindowHandle from './partials/WindowHandle.vue';
const handle = ref(null);
const props = defineProps(['data']);
const data = props.data;
let id = data.id;
const test = ref(null)
onMounted(() => {
SetupHandle(id, handle);
SetSize(id, {width: 500, height: 380});
ResetPosition(id, "center");
});
</script>
<template>
<div class="window-wrapper" :id="'window-wrapper-' + id">
<WindowHandle :window="id" ref="handle"></WindowHandle>
<!-- Body -->
<div ref="test"></div>
</div>
</template>
<style scoped>
.window-wrapper {
display: flex;
align-items: center;
}
</style>

105
frontend/app/components/windows/LoginWindow.vue
View File

@@ -1,8 +1,19 @@
<script setup>
import { onMounted, ref } from 'vue';
import { SetupHandle, SetSize, ResetPosition } from '@/services/Windows';
import {
SetupHandle,
SetSize,
ResetPosition,
SetResizable,
SetMovable,
ClearWindow,
CreateWindow,
} from '@/services/Windows';
import WindowHandle from './partials/WindowHandle.vue';
import { DisplayToast } from '~/services/Toaster';
import Server from '~/services/Server';
import { SetUser } from '~/services/User';
const handle = ref(null);
@@ -11,13 +22,44 @@ const data = props.data;
let id = data.id;
const test = ref(null)
const username = ref("");
const password = ref("");
onMounted(() => {
SetupHandle(id, handle);
SetSize(id, {width: 500, height: 380});
SetSize(id, {width: 450, height: 480});
SetMovable(id, false);
SetResizable(id, false);
ResetPosition(id, "center");
});
function login() {
Server().post('/user/login', { username: username.value, password: password.value }).then((response) => {
const data = response.data;
console.log(data);
if(data.status == "error"){
DisplayToast('red', "Wrong username or password", 3000)
} else {
SetUser(data.token);
ShowMainMenu();
}
}).catch((error) => {
console.log(error);
if(error.response.status == 429){
// errorMessage.value = error.response.data;
} else {
// errorMessage.value = "Hi ha hagut un error intern, torna'ho a provar més tard";
console.log(error);
}
});
}
function toRegister(){
CreateWindow('register');
ClearWindow('login');
}
</script>
@@ -26,8 +68,30 @@ onMounted(() => {
<WindowHandle :window="id" ref="handle"></WindowHandle>
<!-- Body -->
<div ref="test">
<p>Hola</p>
<div class="vert-expand">
<picture align="center">
<source media="(prefers-color-scheme: dark)" srcset="/img/logo-splash.png">
<source media="(prefers-color-scheme: light)" srcset="/img/logo-splash-light.png">
<img alt="Dragonroll logo" src="/img/logo-splash.png" class="splash-image" draggable="false">
</picture>
<form v-on:submit.prevent="login">
<div class="form-field">
<label for="username">Username</label>
<input id="username-field" type="text" placeholder="Enter your username here..." name="username" v-model="username" autocomplete="off" >
</div>
<div class="form-field">
<label for="password">Password</label>
<input id="password-field" type="password" placeholder="Enter your password..." name="password" v-model="password" autocomplete="off" >
</div>
<div class="form-field">
<button class="btn-primary sound-click">Log in</button>
</div>
<div class="form-field center">
<p>You don't have an account? <a href="#" @click.prevent="toRegister">Register</a></p>
</div>
</form>
</div>
</div>
@@ -35,10 +99,41 @@ onMounted(() => {
<style scoped>
p {
user-select: none;
}
.vert-expand {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.window-wrapper {
user-select: none;
display: flex;
align-items: center;
}
.splash-image {
width: 450px;
}
form {
margin-left: 30px;
margin-right: 30px;
}
label {
text-align: left;
}
.center {
text-align: center;
}
</style>

42
frontend/app/components/windows/RegisterWindow.vue Normal file
View File

@@ -0,0 +1,42 @@
<script setup>
import { onMounted, ref } from 'vue';
import { SetupHandle, SetSize, ResetPosition } from '@/services/Windows';
import WindowHandle from './partials/WindowHandle.vue';
const handle = ref(null);
const props = defineProps(['data']);
const data = props.data;
let id = data.id;
const test = ref(null)
onMounted(() => {
SetupHandle(id, handle);
SetSize(id, {width: 500, height: 380});
ResetPosition(id, "center");
});
</script>
<template>
<div class="window-wrapper" :id="'window-wrapper-' + id">
<WindowHandle :window="id" ref="handle"></WindowHandle>
<!-- Body -->
<div ref="test"></div>
</div>
</template>
<style scoped>
.window-wrapper {
display: flex;
align-items: center;
}
</style>

2
frontend/app/components/windows/partials/WindowHandle.vue
View File

@@ -133,7 +133,7 @@ defineExpose({
display: flex;
background-color: var(--color-handler);
background-color: var(--color-window-handle-background);
}
</style>