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

some design, set up questionnaire

Browse Source
This commit is contained in:
Janis Hutz
2024-10-02 13:06:31 +02:00
parent 4bccc4bc2f
commit baad617859
5 changed files with 164 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -5,7 +5,11 @@
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<title>Smoker Batu - Smoke Data Recorder</title> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Qwitcher+Grypen:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Qwitcher+Grypen:wght@400;700&display=swap" rel="stylesheet">
<title>Smoke Data Recorder</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

26
package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "batu-ui", "name": "batu-ui",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@vuepic/vue-datepicker": "^9.0.3",
"vue": "^3.4.29" "vue": "^3.4.29"
}, },
"devDependencies": { "devDependencies": {
@@ -1319,6 +1320,21 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@vuepic/vue-datepicker": {
"version": "9.0.3",
"resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-9.0.3.tgz",
"integrity": "sha512-OtCAKG+CkVBpCwnPx7/BGRF+/z+jDzNl2cMBpcr8j2NkAN+13xkUt7sctbOVKbG/jhuXtKoUSedI69e0cDXPXw==",
"license": "MIT",
"dependencies": {
"date-fns": "^3.6.0"
},
"engines": {
"node": ">=18.12.0"
},
"peerDependencies": {
"vue": ">=3.2.0"
}
},
"node_modules/acorn": { "node_modules/acorn": {
"version": "8.12.1", "version": "8.12.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -1534,6 +1550,16 @@
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/date-fns": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/kossnocorp"
}
},
"node_modules/de-indent": { "node_modules/de-indent": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz", "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",

1
package.json
View File

@@ -12,6 +12,7 @@
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
}, },
"dependencies": { "dependencies": {
"@vuepic/vue-datepicker": "^9.0.3",
"vue": "^3.4.29" "vue": "^3.4.29"
}, },
"devDependencies": { "devDependencies": {

97
src/App.vue
View File

@@ -10,6 +10,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import stopSlider from './components/stopSlider.vue'; import stopSlider from './components/stopSlider.vue';
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
const date = ref();
const theme = ref( 'light_mode' ); const theme = ref( 'light_mode' );
@@ -83,17 +87,86 @@
unlock(); unlock();
} }
} }
const difficulty = ref( 0 );
const difficultyLevels = ref( [ 'sleep sessions', '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( 0 );
const restLevels = ref( [ 'so tired I fell asleep again', 'very tired', 'tired', 'decently rested', 'well-rested', 'very well-rested', 'very energized and incredibly well-rested' ] );
const restSlider = ref( stopSlider );
const hasSelectedDate = ref( false );
const setRest = ( value: number ) => {
rest.value = value;
}
const setUpDifficultySlider = () => {
setTimeout( () => {
difficultySlider.value.setUp( 7, 3 );
}, 500 );
}
const setUpRestSlider = () => {
setTimeout( () => {
restSlider.value.setUp( 7, 3 );
}, 500 );
}
const showStats = () => {
alert( 'Coming soon!' );
}
const submitForm = () => {
alert( 'Data submitted. Remember: Stop smoking! Smoking hurts your health!' );
}
const dateUpdatedHandler = () => {
hasSelectedDate.value = true;
// TODO: Load old data, if present
}
</script> </script>
<template> <template>
<div> <div>
<button @click="changeTheme();" id="themeSelector" title="Toggle between light and dark mode"><span class="material-symbols-outlined" v-html="theme"></span></button> <button @click="changeTheme();" id="themeSelector" title="Toggle between light and dark mode"><span class="material-symbols-outlined" v-html="theme"></span></button>
<main> <main>
<h1>Smoke Data Recorder</h1> <h1 id="title">Smoke Data Recorder</h1>
<div v-if="!isLoading"> <div v-if="!isLoading">
<div v-if="unlocked"> <div v-if="unlocked" class="main-interface">
<input type="text" class="input" placeholder=""> <button class="fancy-button" @click="showStats()">Stats</button>
<stopSlider id="test" style="width: 80vw; margin-left: 20px;"></stopSlider> <div class="input-element">
<p>Date for which this form is filled out</p>
<VueDatePicker v-model="date" :dark="theme === 'dark_mode'" @date-update="dateUpdatedHandler()"></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">
</div>
<div class="input-element">
<p>How many hours of sleep did you get approximately?</p>
<input type="number" class="input">
</div>
<div class="input-element">
<p>That morning, I felt {{ restLevels[ rest ] }}</p>
<stopSlider slider-id="rest" style="width: 80vw; margin-left: 20px;" @slider-pos="( pos ) => setRest( pos )" ref="restSlider" @ready="setUpRestSlider()"></stopSlider>
</div>
<div class="input-element">
<p>The lectures on this day were {{ difficultyLevels[ difficulty ] }}</p>
<stopSlider slider-id="difficulty" style="width: 80vw; margin-left: 20px;" @slider-pos="( pos ) => setDifficulty( pos )" ref="difficultySlider" @ready="setUpDifficultySlider()"></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>
@@ -115,6 +188,15 @@
</div> </div>
</template> </template>
<style>
.main-interface {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
</style>
<style> <style>
body { body {
background-color: var( --background-color ); background-color: var( --background-color );
@@ -173,6 +255,12 @@
color: white; color: white;
} }
#title {
font-family: "Qwitcher Grypen", cursive;
font-weight: 700;
font-size: 5rem;
}
html, html,
body { body {
width: 100%; width: 100%;
@@ -180,6 +268,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 17px; font-size: 17px;
font-family: "Jost", sans-serif;
} }
#app { #app {

50
src/components/stopSlider.vue
View File

@@ -21,10 +21,11 @@
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( [] );
const sliderIndex = ref( 0 );
let intervalSize = 0; let intervalSize = 0;
const setUp = ( stops: number ) => { const setUp = ( stops: number, preset?: number ) => {
maxWidth.value = document.getElementById( 'slider-' + props.id )!.clientWidth; maxWidth.value = document.getElementById( 'slider-' + props[ 'slider-id' ] )!.clientWidth;
sliderStops.value = []; sliderStops.value = [];
intervalSize = maxWidth.value / ( stops - 1 ); intervalSize = maxWidth.value / ( stops - 1 );
for ( let i = 0; i < stops; i ++ ) { for ( let i = 0; i < stops; i ++ ) {
@@ -33,6 +34,8 @@
index: i, index: i,
} ); } );
} }
setSliderIndex( preset ?? 0 );
} }
const xOffset = ref( 0 ); const xOffset = ref( 0 );
@@ -46,6 +49,13 @@
originalSliderPos = sliderKnobPos.value; originalSliderPos = sliderKnobPos.value;
} }
const setSliderIndex = ( index: number ) => {
sliderIndex.value = index ?? 0;
sliderKnobPos.value = sliderIndex.value * intervalSize + sliderOffset;
sliderFillPosRight.value = maxWidth.value - sliderIndex.value * intervalSize;
emits( 'slider-pos', sliderIndex.value );
}
const handleDrag = ( x: number ) => { const handleDrag = ( x: number ) => {
if ( isDragging.value ) { if ( isDragging.value ) {
const newPos = originalSliderPos + ( x - xOffset.value ); const newPos = originalSliderPos + ( x - xOffset.value );
@@ -58,7 +68,9 @@
} }
// Calculate progress of slider background / progress bar // Calculate progress of slider background / progress bar
sliderFillPosRight.value = maxWidth.value - Math.round( sliderKnobPos.value / intervalSize ) * intervalSize + sliderOffset; sliderIndex.value = Math.round( sliderKnobPos.value / intervalSize );
sliderFillPosRight.value = maxWidth.value - sliderIndex.value * intervalSize;
emits( 'slider-pos', sliderIndex.value );
} }
} }
@@ -66,11 +78,14 @@
isDragging.value = false; isDragging.value = false;
// snapping // snapping
sliderKnobPos.value = Math.round( sliderKnobPos.value / intervalSize ) * intervalSize + sliderOffset; sliderIndex.value = Math.round( sliderKnobPos.value / intervalSize );
sliderFillPosRight.value = maxWidth.value - sliderIndex.value * intervalSize;
sliderKnobPos.value = sliderIndex.value * intervalSize + sliderOffset;
emits( 'slider-pos', sliderIndex.value );
} }
const props = defineProps( { const props = defineProps( {
'id': { 'slider-id': {
default: '1', default: '1',
required: true, required: true,
type: String type: String
@@ -82,9 +97,10 @@
setUp setUp
} ); } );
const emits = defineEmits( [ 'slider-pos', 'ready' ] );
setTimeout( () => { setTimeout( () => {
setUp( 5 ); emits( 'ready', true );
}, 500 ); } );
</script> </script>
@@ -96,10 +112,14 @@
</div> </div>
<div class="slider-stop" v-for="stop in sliderStops" v-bind:key="stop.index" :style="'left: ' + stop.x + 'px;'"></div> <div :class="'slider-stop' + ( stop.index <= sliderIndex ? ' stop-filled' : '' )"
<div class="slider" :id="'slider-' + $props.id"> v-for="stop in sliderStops" v-bind:key="stop.index" :style="'left: ' + stop.x + 'px;'"
@click="setSliderIndex( stop.index )"></div>
<div class="slider" :id="'slider-' + $props[ 'slider-id' ]">
<div class="slider-fill" :style="'left: ' + sliderFillPosLeft + 'px; width: ' + ( maxWidth - sliderFillPosLeft - sliderFillPosRight ) + 'px'"></div> <div class="slider-fill" :style="'left: ' + sliderFillPosLeft + 'px; width: ' + ( maxWidth - sliderFillPosLeft - sliderFillPosRight ) + 'px'"></div>
<div class="slider-stop-fill" v-for="stop in sliderStops" v-bind:key="stop.index" :style="'left: ' + stop.x + 'px;'"></div> <div :class="'slider-stop-fill' + ( stop.index <= sliderIndex ? ' stop-filled' : '' )"
v-for="stop in sliderStops" v-bind:key="stop.index" :style="'left: ' + stop.x + 'px;'"
@click="setSliderIndex( stop.index )"></div>
</div> </div>
</div> </div>
</template> </template>
@@ -167,8 +187,10 @@
border: solid 2px var( --gray-color ); border: solid 2px var( --gray-color );
position: absolute; position: absolute;
top: -5px; top: -5px;
transition: background-color 0.5s;
cursor: pointer;
} }
.slider-stop-fill { .slider-stop-fill {
border-radius: 10px; border-radius: 10px;
width: 20px; width: 20px;
@@ -177,5 +199,11 @@
position: absolute; position: absolute;
top: -5px; top: -5px;
background-color: var( --background-color ); background-color: var( --background-color );
transition: background-color 0.5s;
cursor: pointer;
}
.stop-filled {
background-color: var( --slider-color );
} }
</style> </style>