82 lines
2.1 KiB
Vue
82 lines
2.1 KiB
Vue
<script setup>
|
|
import { onMounted, ref, watch } from 'vue'
|
|
import { fetchProjekte } from './api.js'
|
|
import SeitenLeiste from './components/SeitenLeiste.vue'
|
|
import FeatureListe from './components/FeatureListe.vue'
|
|
|
|
const projekte = ref([])
|
|
const aktivesProjekt = ref(null)
|
|
const dunkel = ref(document.documentElement.classList.contains('dark'))
|
|
|
|
async function ladeProjekte() {
|
|
projekte.value = await fetchProjekte()
|
|
// Auswahl verwerfen, wenn das Projekt (z. B. nach Löschen) weg ist
|
|
if (aktivesProjekt.value && !projekte.value.some(p => p.name === aktivesProjekt.value)) {
|
|
aktivesProjekt.value = null
|
|
}
|
|
}
|
|
|
|
function umbenannt(alt, neu) {
|
|
if (aktivesProjekt.value === alt) aktivesProjekt.value = neu
|
|
ladeProjekte()
|
|
}
|
|
|
|
// Zuletzt aktives Projekt überlebt das Neuladen
|
|
watch(aktivesProjekt, name => {
|
|
if (name) localStorage.setItem('aktivesProjekt', name)
|
|
else localStorage.removeItem('aktivesProjekt')
|
|
})
|
|
|
|
function wechsleDarkMode() {
|
|
dunkel.value = !dunkel.value
|
|
document.documentElement.classList.toggle('dark', dunkel.value)
|
|
localStorage.setItem('darkMode', dunkel.value)
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await ladeProjekte()
|
|
const gemerkt = localStorage.getItem('aktivesProjekt')
|
|
if (gemerkt && projekte.value.some(p => p.name === gemerkt)) {
|
|
aktivesProjekt.value = gemerkt
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="raster">
|
|
<SeitenLeiste
|
|
:projekte="projekte"
|
|
:aktiv="aktivesProjekt"
|
|
@auswaehlen="aktivesProjekt = $event"
|
|
@geaendert="ladeProjekte"
|
|
@umbenannt="umbenannt"
|
|
>
|
|
<button class="icon-knopf" :title="dunkel ? 'Hellmodus' : 'Dunkelmodus'" @click="wechsleDarkMode">
|
|
{{ dunkel ? '☀' : '☾' }}
|
|
</button>
|
|
</SeitenLeiste>
|
|
|
|
<main>
|
|
<FeatureListe v-if="aktivesProjekt" :projekt="aktivesProjekt" @geaendert="ladeProjekte" />
|
|
<p v-else class="leer">Projekt wählen oder anlegen.</p>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.raster {
|
|
display: grid;
|
|
grid-template-columns: 220px 1fr;
|
|
min-height: 100vh;
|
|
}
|
|
main {
|
|
padding: 1.2rem 1.5rem;
|
|
min-width: 0;
|
|
}
|
|
.leer {
|
|
color: var(--dezent);
|
|
margin-top: 3rem;
|
|
text-align: center;
|
|
}
|
|
</style>
|