zv0n/lunch-vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Src

Browse Source
This commit is contained in:
zv0n
2023-08-27 18:40:11 +02:00
parent a6f09aaadc
commit b73c849530
13 changed files with 474 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DaySelection.vue
+37
View File
@@ -0,0 +1,37 @@
<template>
<nav aria-label="...">
<ul class="pagination">
<li :class="'page-item ' + (selectedDay == 1 ? 'active' : '')">
<a href="#" class="page-link" @click="callFunc(1)">Po</a>
</li>
<li :class="'page-item ' + (selectedDay == 2 ? 'active' : '')">
<a href="#" class="page-link" @click="callFunc(2)">Út</a>
</li>
<li :class="'page-item ' + (selectedDay == 3 ? 'active' : '')">
<a href="#" class="page-link" @click="callFunc(3)">St</a>
</li>
<li :class="'page-item ' + (selectedDay == 4 ? 'active' : '')">
<a href="#" class="page-link" @click="callFunc(4)">Čt</a>
</li>
<li :class="'page-item ' + (selectedDay == 5 ? 'active' : '')">
<a href="#" class="page-link" @click="callFunc(5)">Pá</a>
</li>
<li :class="'page-item ' + (selectedDay == 6 ? 'active' : '')">
<a href="#" class="page-link" @click="callFunc(6)">So</a>
</li>
<li :class="'page-item ' + (selectedDay == 0 ? 'active' : '')">
<a href="#" class="page-link" @click="callFunc(0)">Ne</a>
</li>
</ul>
</nav>
</template>
<script setup lang="ts">
const props = defineProps<{selected: number, updateFunc: (n: number) => void }>()
let selectedDay = props.selected;
const callFunc = (day: number): void => {
selectedDay = day;
props.updateFunc(day);
}
</script>
src/components/Menu.vue
+105
View File
@@ -0,0 +1,105 @@
<template>
<div class="col pt-4">
<div class="card h-100">
<div class="card-header">
<div class="row">
<div class="col col-10">
{{ menu.restaurant }}
</div>
<div class="col col-1">
<button class="btn w-100" @click="swapFunction(menu.id, Direction.LEFT)" style="padding-left: 0; border: none" :disabled="store.state.restaurantOrder.get(menu.id) === 0">
<font-awesome-icon :icon="['fas', 'arrow-left']"/>
</button>
</div>
<div class="col col-1">
<button class="btn w-100" @click="swapFunction(menu.id, Direction.RIGHT)" style="padding-left: 0; border: none" :disabled="store.state.restaurantOrder.get(menu.id) === store.state.restaurantOrder.size-1">
<font-awesome-icon :icon="['fas', 'arrow-right']"/>
</button>
</div>
</div>
</div>
<div class="card-body" style="padding: 0px">
<ul class="list-group">
<li v-for="soup in menu.meals.filter(meal => meal.isSoup)" class="list-group-item active"
style="border-radius: 0px; background-color: var(--bs-soup-bg); border-color: var(--bs-soup-bg);">
<div class="row">
<div class="col col-9">
<span :data-bs-toggle="soup.description.length == 0 ? '' : 'tooltip'"
data-bs-placement="top" :data-bs-title="soup.description">
{{ soup.name }}
</span>
</div>
<div class="col col-3 text-end">
{{ soup.price < 0 ? '---' : soup.price }} Kč </div>
</div>
</li>
<li v-for="soup in menu.permanentmeals.filter(meal => meal.isSoup)" class="list-group-item active"
style="border-radius: 0px; background-color: var(--bs-soup-bg); border-color: var(--bs-soup-bg);">
<div class="row">
<div class="col col-9">
<span :data-bs-toggle="soup.description.length == 0 ? '' : 'tooltip'"
data-bs-placement="top" :data-bs-title="soup.description">
{{ soup.name }}
</span>
</div>
<div class="col col-3 text-end">
{{ soup.price < 0 ? '---' : soup.price }} Kč </div>
</div>
</li>
<li v-for="meal in menu.meals.filter(meal => !meal.isSoup)" class="list-group-item"
style="border-radius: 0px">
<div class="row">
<div class="col col-9">
<span :data-bs-toggle="meal.description.length == 0 ? '' : 'tooltip'"
data-bs-placement="top" :data-bs-title="meal.description">
{{ meal.name }}
</span>
</div>
<div class="col col-3 text-end">
{{ meal.price < 0 ? '---' : meal.price }} Kč </div>
</div>
</li>
<li v-for="meal in menu.permanentmeals.filter(meal => !meal.isSoup)" class="list-group-item"
style="border-radius: 0px">
<div class="row">
<div class="col col-9">
<span :data-bs-toggle="meal.description.length == 0 ? '' : 'tooltip'"
data-bs-placement="top" :data-bs-title="meal.description">
{{ meal.name }}
</span>
</div>
<div class="col col-3 text-end">
{{ meal.price < 0 ? '---' : meal.price }} Kč </div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import * as bootstrap from 'bootstrap';
import { onMounted, onUpdated } from 'vue';
import { Direction, RestaurantDay } from '../types/Restaurant.ts'
import { useStore } from 'vuex';
import { key } from '../store';
const store = useStore(key);
defineProps<{ menu: RestaurantDay, swapFunction: (id: number, direction: Direction) => void }>()
let tooltips: bootstrap.Tooltip[] = [];
onMounted(() => {
[...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
.forEach(el => tooltips.push(new bootstrap.Tooltip(el)));
})
onUpdated(() => {
tooltips.forEach(tooltip => { tooltip.dispose(); });
tooltips = [];
[...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
.forEach(el => tooltips.push(new bootstrap.Tooltip(el)));
})
</script>
src/components/ThemeSelector.vue
+18
View File
@@ -0,0 +1,18 @@
<template>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" :checked="store.state.darkTheme" @click="toggleDarkTheme">
<label class="form-check-label" :style="{color: store.state.darkTheme ? 'var(--bs-body-color)' : 'var(--bs-primary)' }" for="flexSwitchCheckChecked"><font-awesome-icon :icon="['fas', store.state.darkTheme ? 'moon' : 'sun']" /></label>
</div>
</template>
<script setup lang="ts">
import { useStore } from 'vuex';
import { key } from '../store';
const store = useStore(key);
const toggleDarkTheme = () => {
store.commit("toggleDarkTheme");
document.body.setAttribute('data-bs-theme', store.state.darkTheme ? 'dark' : 'light');
}
</script>