janishutz-legacy/batu-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
Janis Hutz
2024-10-02 18:37:48 +02:00
parent 6ed56c038b
commit 9f2a51b911
4 changed files with 301 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
ui/src/App.vue
View File

@@ -9,13 +9,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, type Ref } from 'vue'; import { ref, type Ref } from 'vue';
import stopSlider from './components/stopSlider.vue'; import formView from './components/formView.vue';
import VueDatePicker from '@vuepic/vue-datepicker'; import statsView from './components/statsView.vue';
import '@vuepic/vue-datepicker/dist/main.css'
const date: Ref<Date | undefined> = ref();
const theme = ref( 'light_mode' ); const theme = ref( 'light_mode' );
const stats = ref( statsView );
const changeTheme = () => { const changeTheme = () => {
if ( theme.value === 'dark_mode' ) { if ( theme.value === 'dark_mode' ) {
@@ -49,7 +47,6 @@
isLoading.value = false; isLoading.value = false;
if ( res.status === 200 ) { if ( res.status === 200 ) {
unlocked.value = true; unlocked.value = true;
fetchOldData();
} }
} ).catch( e => { } ).catch( e => {
isLoading.value = false; isLoading.value = false;
@@ -73,7 +70,6 @@
} ).then( res => { } ).then( res => {
if ( res.status === 200 ) { if ( res.status === 200 ) {
unlocked.value = true; unlocked.value = true;
fetchOldData();
} else { } else {
alert( 'Password incorrect' ); alert( 'Password incorrect' );
unlocked.value = false; unlocked.value = false;
@@ -90,175 +86,8 @@
} }
} }
const hasSelectedDate = ref( false );
const difficulty = ref( -1 );
const difficultyLevels = ref( [
'sleep therapy',
'very easy',
'easy',
'of medium difficulty',
'hard',
'very hard',
'impossible to comprehend'
] );
const difficultySlider = ref( stopSlider );
const setDifficulty = ( value: number ) => {
difficulty.value = value;
}
const rest = ref( -1 );
const restLevels = ref( [
'very energized and incredibly well-rested',
'very well-rested',
'well-rested',
'decently rested',
'tired',
'very tired',
'so tired I fell asleep again'
] );
const restSlider = ref( stopSlider );
const setRest = ( value: number ) => {
rest.value = value;
}
const stress = ref( -1 );
const stressLevels = ref( [
'so low I thought I had holidays',
'low',
'below average',
'average',
'above average',
'high',
'so high I felt like I would certainly fail my studies'
] );
const stressSlider = ref( stopSlider );
const setStress = ( value: number ) => {
stress.value = value;
}
const freeTime = ref( -1 );
const freeTimeLevels = ref( [
'a lot of free time',
'quite a bit of free time',
'some free time',
'little free time',
'no free time',
] );
const freeTimeSlider = ref( stopSlider );
const setFreeTime = ( value: number ) => {
freeTime.value = value;
}
const cigaretCount = ref( 0 );
const sleepHours = ref( 0 );
const setUpRestSlider = () => {
setTimeout( () => {
restSlider.value.setUp( 7, 3 );
}, 500 );
}
const setUpDifficultySlider = () => {
setTimeout( () => {
difficultySlider.value.setUp( 7, 3 );
}, 1000 );
}
const setUpStressSlider = () => {
setTimeout( () => {
stressSlider.value.setUp( 7, 3 );
}, 1500 );
}
const setUpFreeTimeSlider = () => {
setTimeout( () => {
freeTimeSlider.value.setUp( 5, 2 );
}, 2000 );
}
const showStats = () => { const showStats = () => {
alert( 'Coming soon!' ); stats.value.openStats();
}
const submitForm = () => {
if ( date.value && difficulty.value > -1 && stress.value > -1 && rest.value > -1 && cigaretCount.value >= 0 && sleepHours.value >= 0 ) {
if ( sleepHours.value < 2 ) {
if ( confirm( 'Are you sure you have entered the right number of sleep hours? Do you want to proceed with the entered ' + sleepHours.value + ' hours of sleep?' ) ) {
sendForm();
}
} else {
sendForm();
}
} else {
alert( 'Some entries are missing. Please fill them out before saving!' );
}
}
const sendForm = () => {
alert( 'Data submitted. Remember: Stop smoking! Smoking hurts your health!' );
}
const dateUpdatedHandler = () => {
console.log( date.value );
if ( date.value ) {
if ( date.value.getTime() <= new Date().getTime() + 10000 ) {
hasSelectedDate.value = true;
// TODO: Load old data, if present
if ( oldData[ date.value.toISOString() ] ) {
// TODO: Finish
}
} else {
const errors = [
'Nice job, diviner, you just predicted the future. But since we are not at Hogwarts School of Witchcraft and Wizardry, we do not believe in this subject... They do not even really',
'I see you think you have the inner eye. No magical creature can stop you from predicting the future... well except Hermione Granger yeeting the crystal ball off the table',
`I believe the most likely outcome will be our collective demise. \n- Not if we strictly follow the rules of time travel. All right? It means no talking to our past selves... no betting on sporting events. \n- I'm gonna stop you right there, Scott. Are you seriously telling me that your plan to save the universe... is based on Back to the Future? Is it? \n- No. \n- Good. You had me worried there. 'Cause that would be horseshit. That's not how quantum physics works.`,
`Look, we go back, we get the stones before Thanos gets them... Thanos doesn't have the stones. Problem solved. \n- Bingo\n- That's not how it works.\n- Well that's what I heard.\n- Wait, but who? Who told you that?\n- [...] Basically, any movie that deals with time travel. This is known.\n- I don't know why everyone believes that, but that isn't true. Think about it. If you travel to the past... that past becomes your future... and your former present becomes the past... which can't now be changed by your new future\n - Exactly\n- So Back to the Future is a bunch of bullshit?`, // Avengers: Endgame quote on Back to the future being BS
`Jennifer could conceivably encounter her future self! The consequences could be disastrous! \n- What do you mean?\n- I foresee two possibilities. One, seeing herself 30 years older would put her into shock, and she'd pass out... or two, the encounter could create a time paradox ...and cause a chain reaction that would unravel ...the space-time continuum and destroy the entire universe! Granted, that's a worst-case scenario. The destruction might be localized, limited to our own galaxy.`, // Back to the future quote on interacting with your future self
`Long ago, there was a vast multiversal war. Countless unique timelines battled each other for supremacy, nearly resulting in the total destruction of... well, everything. But then the all-knowing Time-Keepers emerged, bringing peace by reorganizing the multiverse into a single timeline, the Sacred Timeline. Now, the Time-Keepers protect and preserve the proper flow of time for everyone and everything. But sometimes, people like you veer off the path the Time-Keepers created. We call those Variants.`, // Loki Season 1 Episode 1 Ms. Minute quote from introduction at TVA
`Hey there! You're probably saying "This is a mistake. I shouldn't even be here." Welcome to the Time Variance Authority. I'm Miss Minutes, and it's my job to catch you up before you stand trial for your crimes.`,
`Time is relative, okay? It can stretch and it can squeeze, but... it can't run backwards. Just can't The only thing that can move across dimensions, like time, is gravity. \n Don't take that as your inspiration, as for that you'd need to fly close to the speed of light and the power required for that would exceed the amount of power humanity has created ever.`, // Some Interstellar quote on time
'You are under arrest for crimes against the Sacred Timeline',
]
alert( errors[ Math.round( Math.random() * 9 ) ] );
}
} else {
hasSelectedDate.value = false;
}
}
interface OldData {
[key: string]: object;
}
let oldData: OldData = {};
const fetchOldData = () => {
fetch( localStorage.getItem( 'url' ) + '/get', { credentials: 'include' } ).then( res => {
if ( res.status === 200 ) {
res.json().then( json => {
oldData = json;
} );
} else {
alert( `Failed to load old data. Features are limited. Please reload to try again! (${ res.status })` );
}
} ).catch( e => {
console.error( e );
alert( 'Failed to load old data. Features are limited. Please reload to try again! (details in console)' );
} );
} }
</script> </script>
@@ -271,44 +100,7 @@
<div v-if="!isLoading"> <div v-if="!isLoading">
<div v-if="unlocked" class="main-interface"> <div v-if="unlocked" class="main-interface">
<button class="fancy-button" @click="showStats()">Stats</button> <button class="fancy-button" @click="showStats()">Stats</button>
<div class="input-element"> <formView :theme="theme"></formView>
<p>Date for which this form is filled out</p>
<VueDatePicker v-model="date" :dark="theme === 'dark_mode'" @closed="dateUpdatedHandler()" @cleared="dateUpdatedHandler()" :enable-time-picker="false"></VueDatePicker>
</div>
<div v-if="hasSelectedDate" class="main-interface">
<div class="input-element">
<p>How many cigarets did you smoke on that day?</p>
<input type="number" class="input" v-model="cigaretCount">
</div>
<div class="input-element">
<p>How many hours of sleep did you get approximately?</p>
<input type="number" class="input" v-model="sleepHours">
</div>
<div class="input-element">
<p>That morning, I felt {{ rest >= 0 ? restLevels[ rest ] : '...' }}</p>
<stopSlider slider-id="rest" style="width: 50vw;" @slider-pos="( pos ) => setRest( pos )" ref="restSlider" @ready="setUpRestSlider()"></stopSlider>
</div>
<div class="input-element">
<p>The lectures on this day were {{ difficulty >= 0 ? difficultyLevels[ difficulty ] : '...' }}</p>
<stopSlider slider-id="difficulty" style="width: 50vw;" @slider-pos="( pos ) => setDifficulty( pos )" ref="difficultySlider" @ready="setUpDifficultySlider()"></stopSlider>
</div>
<div class="input-element">
<p>That day, my stress level was {{ stress >= 0 ? stressLevels[ stress ] : '...' }}</p>
<stopSlider slider-id="stress" style="width: 50vw;" @slider-pos="( pos ) => setStress( pos )" ref="stressSlider" @ready="setUpStressSlider()"></stopSlider>
</div>
<div class="input-element">
<p>That day, I had {{ freeTime >= 0 ? freeTimeLevels[ freeTime ] : '...' }}</p>
<stopSlider slider-id="freeTime" style="width: 50vw;" @slider-pos="( pos ) => setFreeTime( pos )" ref="freeTimeSlider" @ready="setUpFreeTimeSlider()"></stopSlider>
</div>
<button @click="submitForm()" class="fancy-button" style="margin-top: 20px;">Submit</button>
</div>
</div> </div>
<div v-else> <div v-else>
<p>Please log in</p> <p>Please log in</p>
@@ -327,6 +119,7 @@
Loading... Loading...
</div> </div>
</main> </main>
<statsView ref="stats"></statsView>
</div> </div>
</template> </template>
@@ -367,6 +160,7 @@
<style> <style>
body { body {
background-color: var( --background-color ); background-color: var( --background-color );
transition: background-color 0.5s;
user-select: none; user-select: none;
} }

227
ui/src/components/formView.vue Normal file
View File

@@ -0,0 +1,227 @@
<script setup lang="ts">
import { ref, type Ref } from 'vue';
import stopSlider from './stopSlider.vue';
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';
const date: Ref<Date | undefined> = ref();
const hasSelectedDate = ref( false );
const difficulty = ref( -1 );
const difficultyLevels = ref( [
'sleep therapy',
'very easy',
'easy',
'of medium difficulty',
'hard',
'very hard',
'impossible to comprehend'
] );
const difficultySlider = ref( stopSlider );
const setDifficulty = ( value: number ) => {
difficulty.value = value;
}
const rest = ref( -1 );
const restLevels = ref( [
'very energized and incredibly well-rested',
'very well-rested',
'well-rested',
'decently rested',
'tired',
'very tired',
'so tired I fell asleep again'
] );
const restSlider = ref( stopSlider );
const setRest = ( value: number ) => {
rest.value = value;
}
const stress = ref( -1 );
const stressLevels = ref( [
'so low I thought I had holidays',
'low',
'below average',
'average',
'above average',
'high',
'so high I felt like I would certainly fail my studies'
] );
const stressSlider = ref( stopSlider );
const setStress = ( value: number ) => {
stress.value = value;
}
const freeTime = ref( -1 );
const freeTimeLevels = ref( [
'a lot of free time',
'quite a bit of free time',
'some free time',
'little free time',
'no free time',
] );
const freeTimeSlider = ref( stopSlider );
const setFreeTime = ( value: number ) => {
freeTime.value = value;
}
const cigaretCount = ref( 0 );
const sleepHours = ref( 0 );
const setUpRestSlider = () => {
setTimeout( () => {
restSlider.value.setUp( 7, 3 );
}, 500 );
}
const setUpDifficultySlider = () => {
setTimeout( () => {
difficultySlider.value.setUp( 7, 3 );
}, 1000 );
}
const setUpStressSlider = () => {
setTimeout( () => {
stressSlider.value.setUp( 7, 3 );
}, 1500 );
}
const setUpFreeTimeSlider = () => {
setTimeout( () => {
freeTimeSlider.value.setUp( 5, 2 );
}, 2000 );
}
const submitForm = () => {
if ( date.value && difficulty.value > -1 && stress.value > -1 && rest.value > -1 && cigaretCount.value >= 0 && sleepHours.value >= 0 ) {
if ( sleepHours.value < 2 ) {
if ( confirm( 'Are you sure you have entered the right number of sleep hours? Do you want to proceed with the entered ' + sleepHours.value + ' hours of sleep?' ) ) {
sendForm();
}
} else {
sendForm();
}
} else {
alert( 'Some entries are missing. Please fill them out before saving!' );
}
}
const sendForm = () => {
alert( 'Data submitted. Remember: Stop smoking! Smoking hurts your health!' );
}
const dateUpdatedHandler = () => {
console.log( date.value );
if ( date.value ) {
if ( date.value.getTime() <= new Date().getTime() + 10000 ) {
hasSelectedDate.value = true;
// TODO: Load old data, if present
if ( oldData[ date.value.toISOString() ] ) {
// TODO: Finish
}
} else {
const errors = [
'Nice job, diviner, you just predicted the future. But since we are not at Hogwarts School of Witchcraft and Wizardry, we do not believe in this subject... They do not even really',
'I see you think you have the inner eye. No magical creature can stop you from predicting the future... well except Hermione Granger yeeting the crystal ball off the table',
`I believe the most likely outcome will be our collective demise. \n- Not if we strictly follow the rules of time travel. All right? It means no talking to our past selves... no betting on sporting events. \n- I'm gonna stop you right there, Scott. Are you seriously telling me that your plan to save the universe... is based on Back to the Future? Is it? \n- No. \n- Good. You had me worried there. 'Cause that would be horseshit. That's not how quantum physics works.`,
`Look, we go back, we get the stones before Thanos gets them... Thanos doesn't have the stones. Problem solved. \n- Bingo\n- That's not how it works.\n- Well that's what I heard.\n- Wait, but who? Who told you that?\n- [...] Basically, any movie that deals with time travel. This is known.\n- I don't know why everyone believes that, but that isn't true. Think about it. If you travel to the past... that past becomes your future... and your former present becomes the past... which can't now be changed by your new future\n - Exactly\n- So Back to the Future is a bunch of bullshit?`, // Avengers: Endgame quote on Back to the future being BS
`Jennifer could conceivably encounter her future self! The consequences could be disastrous! \n- What do you mean?\n- I foresee two possibilities. One, seeing herself 30 years older would put her into shock, and she'd pass out... or two, the encounter could create a time paradox ...and cause a chain reaction that would unravel ...the space-time continuum and destroy the entire universe! Granted, that's a worst-case scenario. The destruction might be localized, limited to our own galaxy.`, // Back to the future quote on interacting with your future self
`Long ago, there was a vast multiversal war. Countless unique timelines battled each other for supremacy, nearly resulting in the total destruction of... well, everything. But then the all-knowing Time-Keepers emerged, bringing peace by reorganizing the multiverse into a single timeline, the Sacred Timeline. Now, the Time-Keepers protect and preserve the proper flow of time for everyone and everything. But sometimes, people like you veer off the path the Time-Keepers created. We call those Variants.`, // Loki Season 1 Episode 1 Ms. Minute quote from introduction at TVA
`Hey there! You're probably saying "This is a mistake. I shouldn't even be here." Welcome to the Time Variance Authority. I'm Miss Minutes, and it's my job to catch you up before you stand trial for your crimes.`,
`Time is relative, okay? It can stretch and it can squeeze, but... it can't run backwards. Just can't The only thing that can move across dimensions, like time, is gravity. \n Don't take that as your inspiration, as for that you'd need to fly close to the speed of light and the power required for that would exceed the amount of power humanity has created ever.`, // Some Interstellar quote on time
'You are under arrest for crimes against the Sacred Timeline',
]
alert( errors[ Math.floor( Math.random() * 9 ) ] );
}
} else {
hasSelectedDate.value = false;
}
}
interface OldData {
[key: string]: object;
}
let oldData: OldData = {};
const fetchOldData = () => {
fetch( localStorage.getItem( 'url' ) + '/get', { credentials: 'include' } ).then( res => {
if ( res.status === 200 ) {
res.json().then( json => {
oldData = json;
} );
} else {
alert( `Failed to load old data. Features are limited. Please reload to try again! (${ res.status })` );
}
} ).catch( e => {
console.error( e );
alert( 'Failed to load old data. Features are limited. Please reload to try again! (details in console)' );
} );
}
defineProps( {
'theme': {
default: 'light_mode',
required: true,
type: String
}
} );
fetchOldData();
</script>
<template>
<div class="main-interface">
<div class="input-element">
<p>Date for which this form is filled out</p>
<VueDatePicker v-model="date" :dark="$props.theme === 'dark_mode'" @closed="dateUpdatedHandler()" @cleared="dateUpdatedHandler()" :enable-time-picker="false"></VueDatePicker>
</div>
<div v-if="hasSelectedDate" class="main-interface">
<div class="input-element">
<p>How many cigarets did you smoke on that day?</p>
<input type="number" class="input" v-model="cigaretCount">
</div>
<div class="input-element">
<p>How many hours of sleep did you get approximately?</p>
<input type="number" class="input" v-model="sleepHours">
</div>
<div class="input-element">
<p>That morning, I felt {{ rest >= 0 ? restLevels[ rest ] : '...' }}</p>
<stopSlider slider-id="rest" style="width: 50vw;" @slider-pos="( pos ) => setRest( pos )" ref="restSlider" @ready="setUpRestSlider()"></stopSlider>
</div>
<div class="input-element">
<p>The lectures on this day were {{ difficulty >= 0 ? difficultyLevels[ difficulty ] : '...' }}</p>
<stopSlider slider-id="difficulty" style="width: 50vw;" @slider-pos="( pos ) => setDifficulty( pos )" ref="difficultySlider" @ready="setUpDifficultySlider()"></stopSlider>
</div>
<div class="input-element">
<p>That day, my stress level was {{ stress >= 0 ? stressLevels[ stress ] : '...' }}</p>
<stopSlider slider-id="stress" style="width: 50vw;" @slider-pos="( pos ) => setStress( pos )" ref="stressSlider" @ready="setUpStressSlider()"></stopSlider>
</div>
<div class="input-element">
<p>That day, I had {{ freeTime >= 0 ? freeTimeLevels[ freeTime ] : '...' }}</p>
<stopSlider slider-id="freeTime" style="width: 50vw;" @slider-pos="( pos ) => setFreeTime( pos )" ref="freeTimeSlider" @ready="setUpFreeTimeSlider()"></stopSlider>
</div>
<button @click="submitForm()" class="fancy-button" style="margin-top: 20px;">Submit</button>
</div>
</div>
</template>

65
ui/src/components/statsView.vue Normal file
View File

@@ -0,0 +1,65 @@
<script setup lang="ts">
import { ref, type Ref } from 'vue';
const isShowingStatsView = ref( false );
const openStats = () => {
isShowingStatsView.value = true;
}
const closeStats = () => {
isShowingStatsView.value = false;
}
defineExpose( {
openStats,
closeStats,
} );
</script>
<template>
<div :class="'stats-view' + ( isShowingStatsView ? ' stats-view-shown' : '' )">
<span class="material-symbols-outlined close-stats" @click="closeStats()">close</span>
<h1>Stats</h1>
<p style="font-size: 1.5rem;">Coming soon<sup>TM</sup></p>
<button class="fancy-button" @click="closeStats()">Close</button>
</div>
</template>
<style scoped>
.stats-view {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var( --secondary-color );
display: flex;
align-items: center;
/* TODO: Remove next line to have items top-aligned */
justify-content: center;
flex-direction: column;
transform-origin: center;
transform: scale(0);
transition: all 0.5s;
}
.stats-view-shown {
transform: scale(1);
}
.close-stats {
position: absolute;
top: 10px;
right: 10px;
font-size: 2.5rem;
color: var( --primary-color );
cursor: pointer;
transition: all 0.5s ease-in-out;
}
.close-stats:hover {
transform: scale( 1.25 );
}
</style>

4
ui/src/components/stopSlider.vue
View File

@@ -17,7 +17,7 @@
} }
const maxWidth = ref( window.innerWidth ); // TODO: Update to reflect slider width const maxWidth = ref( window.innerWidth ); // TODO: Update to reflect slider width
const sliderOffset = -11; const sliderOffset = -10;
const sliderFillPosLeft = ref( sliderOffset ); // Offset from left edge const sliderFillPosLeft = ref( sliderOffset ); // Offset from left edge
const sliderFillPosRight = ref( maxWidth.value ); // Offset from right edge const sliderFillPosRight = ref( maxWidth.value ); // Offset from right edge
const sliderStops: Ref<SliderStop[]> = ref( [] ); const sliderStops: Ref<SliderStop[]> = ref( [] );
@@ -143,7 +143,7 @@
border-radius: 15px; border-radius: 15px;
position: absolute; position: absolute;
z-index: 5; z-index: 5;
top: -7px; top: -5px;
transition: left 0.5s; transition: left 0.5s;
} }