McSchneidarandFlorian Ostertag
336d08040e
* Replace the WCF webserver with an ASP.NET Core webserver (VocaluxeWeb) - New project VocaluxeWeb: ASP.NET Core 2.3 (Kestrel) on .NET Framework 4.8.1, HTTP or HTTPS with a self-signed certificate, REST API (/api/v1) with Swagger, live events (Server-Sent Events) - Access to the game only through IVocaluxeRemote; requests run on the main thread once per frame - Sessions with roles (guest, player, admin) and configurable permissions, PINs hashed with PBKDF2 - Queue as a playlist with requesters and singers, fair order (one song per person and round) - Admin: settings, server status, logged-in devices, activate/deactivate and delete profiles - Profile pictures: own photo or one of the Vocaluxe avatars - Game: WebApp queue screen (song options, playlist group) to start the next song with the chosen singers, return to it after singing, warning when the webserver is off, remote keyboard - Old WCF server, WebserverInitalConfig and URL reservations removed; libraries moved to libs/managed - Unit tests for PIN hashing, settings and permissions, queue order and device names - AppVeyor: Visual Studio 2022 image and Node.js 24 (the build compiles the WebApp) - Documentation in VocaluxeWeb/README.md * New WebApp (Vue 3, TypeScript, Vite) replacing the old jQuery Mobile website - Login with profile and PIN, create profiles - Songs with search, filters, sorting and 30 second previews - Queue: add songs with game mode, audio and singers, edit, reorder, start in the game - Playlists: create, edit, add to the queue - Now playing with live updates, remote control and keyboard - Players: own profile with picture (photo or Vocaluxe avatar), roles for admins - Admin settings: permissions, server status, devices, profiles - Help page, responsive layout for phones, tablets and desktops, light and dark mode - Texts in WebApp/src/locales/en.json, translated with Transifex - Old website and PhoneGap config removed --------- Co-authored-by: Florian Ostertag <flokuep@users.noreply.github.com>
81 lines
1.8 KiB
Vue
81 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
// Bottom sheet on phones, centered dialog on larger screens. Based on <dialog> for focus handling and Escape.
|
|
import { onMounted, ref, watch } from 'vue'
|
|
import AppIcon from './AppIcon.vue'
|
|
|
|
const props = defineProps<{ open: boolean; title?: string }>()
|
|
const emit = defineEmits<{ close: [] }>()
|
|
const dialog = ref<HTMLDialogElement>()
|
|
|
|
function sync() {
|
|
if (!dialog.value) return
|
|
if (props.open && !dialog.value.open) dialog.value.showModal()
|
|
if (!props.open && dialog.value.open) dialog.value.close()
|
|
}
|
|
|
|
onMounted(sync)
|
|
watch(() => props.open, sync)
|
|
|
|
function onClick(event: MouseEvent) {
|
|
if (event.target === dialog.value) emit('close')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<dialog ref="dialog" class="sheet" @close="emit('close')" @click="onClick">
|
|
<div class="sheet-body">
|
|
<header class="sheet-header">
|
|
<h2>{{ title }}</h2>
|
|
<button class="icon-btn" type="button" :aria-label="$t('common.close')" @click="emit('close')">
|
|
<AppIcon name="close" />
|
|
</button>
|
|
</header>
|
|
<slot />
|
|
</div>
|
|
</dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.sheet {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin: auto 0 0;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 20px 20px 0 0;
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
max-height: 85dvh;
|
|
}
|
|
|
|
.sheet::backdrop {
|
|
background: rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
.sheet-body {
|
|
display: grid;
|
|
gap: var(--gutter);
|
|
padding: var(--gutter) var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.sheet-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.sheet-header h2 {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.sheet {
|
|
width: 480px;
|
|
margin: auto;
|
|
border-radius: 20px;
|
|
}
|
|
}
|
|
</style>
|