refactor: seperate code into different files
This commit is contained in:
parent
2f6f0b4efd
commit
997cc11a89
16 changed files with 845 additions and 364 deletions
|
|
@ -1,12 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<meta charset="UTF-8" />
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||
<title>Noten</title>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@catppuccin/daisyui@1.2.1/dist/catppuccin.css" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="./src/main.js" type="module"></script>
|
||||
<!-- <div data-theme="macchiato" id="app"></div> -->
|
||||
<div id="app"></div>
|
||||
<script>
|
||||
// Set initial theme based on user preference or default
|
||||
const initialTheme = localStorage.getItem("theme") || "macchiato";
|
||||
document.getElementById("app").setAttribute("data-theme", initialTheme);
|
||||
</script>
|
||||
<script src="./src/main.js" type="module"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,32 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { AddBewertung, GetBewertungen, GetMaxPunkte, SetMaxPunkte, ToggleWertung, ExportBewertungen, GetNotenspiegel } from '../wailsjs/go/main/App';
|
||||
import { OpenSaveDialog } from '../wailsjs/go/main/App';
|
||||
import 'bulma/css/bulma.min.css';
|
||||
import { onMount } from "svelte";
|
||||
import {
|
||||
AddBewertung,
|
||||
GetBewertungen,
|
||||
GetMaxPunkte,
|
||||
SetMaxPunkte,
|
||||
ToggleWertung,
|
||||
ExportBewertungen,
|
||||
GetNotenspiegel,
|
||||
} from "../wailsjs/go/main/App";
|
||||
import { OpenSaveDialog } from "../wailsjs/go/main/App";
|
||||
import MaxPunkteForm from "./MaxPunkteForm.svelte";
|
||||
import BewertungForm from "./BewertungForm.svelte";
|
||||
import BewertungenTable from "./BewertungenTable.svelte";
|
||||
import Notenspiegel from "./Notenspiegel.svelte";
|
||||
import ExportSection from "./ExportSection.svelte";
|
||||
import ThemeSwitcher from "./ThemeSwitcher.svelte";
|
||||
|
||||
let bewertungen = [];
|
||||
let maxPunkte = {
|
||||
hvMax: 0,
|
||||
lvMax: 0,
|
||||
hvGewichtung: 0,
|
||||
lvGewichtung: 0
|
||||
lvGewichtung: 0,
|
||||
};
|
||||
|
||||
let vorname = '';
|
||||
let nachname = '';
|
||||
|
||||
let vorname = "";
|
||||
let nachname = "";
|
||||
let hvPunkte = 0;
|
||||
let lvPunkte = 0;
|
||||
let hvMax = 0;
|
||||
|
|
@ -21,8 +34,8 @@
|
|||
let hvGewichtung = 0;
|
||||
let lvGewichtung = 0;
|
||||
|
||||
let exportPath = '';
|
||||
let notenspiegel = {}
|
||||
let exportPath = "";
|
||||
let notenspiegel = {};
|
||||
|
||||
onMount(async () => {
|
||||
await loadData();
|
||||
|
|
@ -32,22 +45,24 @@
|
|||
async function loadData() {
|
||||
bewertungen = await GetBewertungen();
|
||||
maxPunkte = await GetMaxPunkte();
|
||||
if (maxPunkte.hvMax === 0) {
|
||||
hvMax = maxPunkte.hvMax;
|
||||
lvMax = maxPunkte.lvMax;
|
||||
hvGewichtung = maxPunkte.hvGewichtung;
|
||||
lvGewichtung = maxPunkte.lvGewichtung;
|
||||
}
|
||||
hvMax = maxPunkte.hvMax;
|
||||
lvMax = maxPunkte.lvMax;
|
||||
hvGewichtung = maxPunkte.hvGewichtung;
|
||||
lvGewichtung = maxPunkte.lvGewichtung;
|
||||
}
|
||||
|
||||
async function handleAddBewertung() {
|
||||
const success = await AddBewertung(vorname, nachname, hvPunkte, lvPunkte);
|
||||
if (success) {
|
||||
await loadData();
|
||||
resetForm();
|
||||
await loadNotenspiegel();
|
||||
if (maxPunkte.hvMax !== 0 && maxPunkte.hvGewichtung !== 0) {
|
||||
const success = await AddBewertung(vorname, nachname, hvPunkte, lvPunkte);
|
||||
if (success) {
|
||||
await loadData();
|
||||
resetForm();
|
||||
await loadNotenspiegel();
|
||||
} else {
|
||||
alert("Name existiert bereits!");
|
||||
}
|
||||
} else {
|
||||
alert('Name existiert bereits!');
|
||||
alert("Max Punkte muss befüllt sein");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -55,12 +70,37 @@
|
|||
notenspiegel = await GetNotenspiegel();
|
||||
}
|
||||
|
||||
async function handleSetMaxPunkte() {
|
||||
const success = await SetMaxPunkte(hvMax, lvMax, hvGewichtung, lvGewichtung);
|
||||
if (!success) {
|
||||
alert('Ungültige Gewichtung! Die Summe muss 100% ergeben.');
|
||||
let isMaxPunkteValid = false;
|
||||
|
||||
function validateMaxPunkte() {
|
||||
if (hvMax > 0 && lvMax === 0) {
|
||||
isMaxPunkteValid = hvGewichtung === 100;
|
||||
} else if (hvMax > 0 && lvMax > 0) {
|
||||
isMaxPunkteValid = hvGewichtung + lvGewichtung === 100;
|
||||
} else {
|
||||
await loadData();
|
||||
isMaxPunkteValid = false;
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
validateMaxPunkte();
|
||||
}
|
||||
|
||||
async function handleSetMaxPunkte() {
|
||||
validateMaxPunkte();
|
||||
|
||||
if (isMaxPunkteValid) {
|
||||
const success = await SetMaxPunkte(
|
||||
hvMax,
|
||||
lvMax,
|
||||
hvGewichtung,
|
||||
lvGewichtung,
|
||||
);
|
||||
if (success) {
|
||||
await loadData();
|
||||
} else {
|
||||
alert("Es gab einen Fehler beim Setzen der Max-Punkte.");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -75,149 +115,68 @@
|
|||
exportPath = result;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Öffnen des Dateiauswahldialogs:', error);
|
||||
console.error("Fehler beim Öffnen des Dateiauswahldialogs:", error);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleExport() {
|
||||
if (!exportPath) {
|
||||
alert('Bitte wählen Sie einen Speicherpfad aus.');
|
||||
alert("Bitte wählen Sie einen Speicherpfad aus.");
|
||||
return;
|
||||
}
|
||||
await ExportBewertungen(exportPath);
|
||||
alert('Export abgeschlossen!');
|
||||
alert("Export abgeschlossen!");
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
vorname = '';
|
||||
nachname = '';
|
||||
vorname = "";
|
||||
nachname = "";
|
||||
hvPunkte = 0;
|
||||
lvPunkte = 0;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container is-widescreen">
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">Arbeit</p>
|
||||
</header>
|
||||
<div class="container mx-auto p-4">
|
||||
<!-- <ThemeSwitcher /> -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-3xl font-bold">Klassenarbeit-Bewertungssystem</h1>
|
||||
<ThemeSwitcher />
|
||||
</div>
|
||||
<!-- <h1 class="text-3xl font-bold text-center mb-6"> -->
|
||||
<!-- Klassenarbeit-Bewertungssystem -->
|
||||
<!-- </h1> -->
|
||||
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
<h1 class="title">Bewertungen</h1>
|
||||
<div class="divider"></div>
|
||||
<h3 class="text-2xl font-bold mb-4">Bewertungen</h3>
|
||||
|
||||
{#if maxPunkte.hvMax === 0}
|
||||
<form on:submit|preventDefault={handleSetMaxPunkte}>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<input class="input" type="number" bind:value={hvMax} placeholder="HV-Max-Punkte" required>
|
||||
</div>
|
||||
<div class="control">
|
||||
<input class="input" type="number" bind:value={hvGewichtung} placeholder="HV-Gewichtung in %" required>
|
||||
</div>
|
||||
<div class="control">
|
||||
<input class="input" type="number" bind:value={lvMax} placeholder="LV-Max-Punkte" required>
|
||||
</div>
|
||||
<div class="control">
|
||||
<input class="input" type="number" bind:value={lvGewichtung} placeholder="LV-Gewichtung in %" required>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button type="submit" class="button is-primary">Setzen</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
<form on:submit|preventDefault={handleAddBewertung}>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<input class="input" type="text" bind:value={vorname} placeholder="Vorname" required>
|
||||
</div>
|
||||
<div class="control">
|
||||
<input class="input" type="text" bind:value={nachname} placeholder="Nachname" required>
|
||||
</div>
|
||||
<div class="control">
|
||||
<input class="input" type="number" bind:value={hvPunkte} placeholder="HV-Punkte" required>
|
||||
</div>
|
||||
<div class="control">
|
||||
<input class="input" type="number" bind:value={lvPunkte} placeholder="LV-Punkte" required>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button type="submit" class="button is-primary">Hinzufügen</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<MaxPunkteForm
|
||||
bind:hvMax
|
||||
bind:lvMax
|
||||
bind:hvGewichtung
|
||||
bind:lvGewichtung
|
||||
onSubmit={handleSetMaxPunkte}
|
||||
/>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-hoverable is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Gewertet</th>
|
||||
<th>Vorname</th>
|
||||
<th>Nachname</th>
|
||||
<th>HV-Punkte</th>
|
||||
<th>HV-Prozent</th>
|
||||
<th>HV-Note</th>
|
||||
<th>LV-Punkte</th>
|
||||
<th>LV-Prozent</th>
|
||||
<th>LV-Note</th>
|
||||
<th>Gesamt-Prozent</th>
|
||||
<th>Gesamt-Note</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each bewertungen as bewertung}
|
||||
<tr>
|
||||
<td><input type="checkbox" checked={bewertung.gewertet} on:change={() => handleToggleWertung(bewertung.id)}></td>
|
||||
<td>{bewertung.vorname}</td>
|
||||
<td>{bewertung.nachname}</td>
|
||||
<td>{bewertung.hvPunkte.toFixed(2)}</td>
|
||||
<td>{bewertung.hvProzent.toFixed(2)}</td>
|
||||
<td>{bewertung.hvNote}</td>
|
||||
<td>{bewertung.lvPunkte.toFixed(2)}</td>
|
||||
<td>{bewertung.lvProzent.toFixed(2)}</td>
|
||||
<td>{bewertung.lvNote}</td>
|
||||
<td>{bewertung.gesamtProzent.toFixed(2)}</td>
|
||||
<td>{bewertung.gesamtNote}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h2 class="title">Notenspiegel</h2>
|
||||
<table class="table is-hoverable is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
{#each [1,2,3,4,5,6] as note}
|
||||
<th>{note}</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
{#each [1,2,3,4,5,6] as note}
|
||||
{#if notenspiegel[note]}
|
||||
<td>{notenspiegel[note]}</td>
|
||||
{:else}
|
||||
<td>0</td>
|
||||
{/if}
|
||||
{/each}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<BewertungForm
|
||||
bind:vorname
|
||||
bind:nachname
|
||||
bind:hvPunkte
|
||||
bind:lvPunkte
|
||||
onSubmit={handleAddBewertung}
|
||||
disabled={!isMaxPunkteValid}
|
||||
/>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<input type="text" class="input" bind:value={exportPath} readonly>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-info" on:click={selectExportPath}>Pfad auswählen</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-info" on:click={handleExport}>Exportieren</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- content -->
|
||||
</div> <!-- card-content -->
|
||||
|
||||
</div> <!-- card -->
|
||||
</div> <!-- container -->
|
||||
<BewertungenTable {bewertungen} onToggleWertung={handleToggleWertung} />
|
||||
|
||||
<Notenspiegel {notenspiegel} />
|
||||
|
||||
<ExportSection
|
||||
bind:exportPath
|
||||
onSelectPath={selectExportPath}
|
||||
onExport={handleExport}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
45
frontend/src/BewertungForm.svelte
Normal file
45
frontend/src/BewertungForm.svelte
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<script>
|
||||
export let vorname;
|
||||
export let nachname;
|
||||
export let hvPunkte;
|
||||
export let lvPunkte;
|
||||
export let onSubmit;
|
||||
export let disabled = false;
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={onSubmit} class="mb-4">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<input
|
||||
class="input input-bordered"
|
||||
type="text"
|
||||
bind:value={vorname}
|
||||
placeholder="Vorname"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
class="input input-bordered"
|
||||
type="text"
|
||||
bind:value={nachname}
|
||||
placeholder="Nachname"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
class="input input-bordered"
|
||||
type="number"
|
||||
bind:value={hvPunkte}
|
||||
placeholder="HV-Punkte"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
class="input input-bordered"
|
||||
type="number"
|
||||
bind:value={lvPunkte}
|
||||
placeholder="LV-Punkte"
|
||||
required
|
||||
/>
|
||||
<button type="submit" class="btn btn-primary" {disabled}>
|
||||
Hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
25
frontend/src/BewertungRow.svelte
Normal file
25
frontend/src/BewertungRow.svelte
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<script>
|
||||
export let bewertung;
|
||||
export let onToggleWertung;
|
||||
</script>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle"
|
||||
checked={bewertung.gewertet}
|
||||
on:change={() => onToggleWertung(bewertung.id)}
|
||||
/>
|
||||
</td>
|
||||
<td>{bewertung.vorname}</td>
|
||||
<td>{bewertung.nachname}</td>
|
||||
<td>{bewertung.hvPunkte.toFixed(2)}</td>
|
||||
<td>{bewertung.hvProzent.toFixed(2)}</td>
|
||||
<td>{bewertung.hvNote}</td>
|
||||
<td>{bewertung.lvPunkte.toFixed(2)}</td>
|
||||
<td>{bewertung.lvProzent.toFixed(2)}</td>
|
||||
<td>{bewertung.lvNote}</td>
|
||||
<td>{bewertung.gesamtProzent.toFixed(2)}</td>
|
||||
<td>{bewertung.gesamtNote}</td>
|
||||
</tr>
|
||||
39
frontend/src/BewertungenTable.svelte
Normal file
39
frontend/src/BewertungenTable.svelte
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<script>
|
||||
import BewertungRow from "./BewertungRow.svelte";
|
||||
export let bewertungen;
|
||||
export let onToggleWertung;
|
||||
</script>
|
||||
|
||||
<div class="max-h-[500px] overflow-y-auto overflow-x-auto">
|
||||
<table class="table w-full">
|
||||
<!-- <div class="overflow-x-auto overflow-y auto"> -->
|
||||
<!-- <table class="table w-full table-container"> -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Gewertet</th>
|
||||
<th>Vorname</th>
|
||||
<th>Nachname</th>
|
||||
<th>HV-Punkte</th>
|
||||
<th>HV-Prozent</th>
|
||||
<th>HV-Note</th>
|
||||
<th>LV-Punkte</th>
|
||||
<th>LV-Prozent</th>
|
||||
<th>LV-Note</th>
|
||||
<th>Gesamt-Prozent</th>
|
||||
<th>Gesamt-Note</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each bewertungen as bewertung (bewertung.id)}
|
||||
<BewertungRow {bewertung} {onToggleWertung} />
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- <style> -->
|
||||
<!-- .table-container { -->
|
||||
<!-- max-height: 400px; -->
|
||||
<!-- overflow-y: auto; -->
|
||||
<!-- } -->
|
||||
<!-- </style> -->
|
||||
16
frontend/src/ExportSection.svelte
Normal file
16
frontend/src/ExportSection.svelte
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script>
|
||||
export let exportPath;
|
||||
export let onSelectPath;
|
||||
export let onExport;
|
||||
</script>
|
||||
|
||||
<div class="flex flex-wrap gap-2 mt-4">
|
||||
<input
|
||||
type="text"
|
||||
class="input input-bordered flex-grow"
|
||||
bind:value={exportPath}
|
||||
readonly
|
||||
/>
|
||||
<button class="btn btn-info" on:click={onSelectPath}>Pfad auswählen</button>
|
||||
<button class="btn btn-info" on:click={onExport}>Exportieren</button>
|
||||
</div>
|
||||
52
frontend/src/MaxPunkteForm.svelte
Normal file
52
frontend/src/MaxPunkteForm.svelte
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<script>
|
||||
export let hvMax;
|
||||
export let lvMax;
|
||||
export let hvGewichtung;
|
||||
export let lvGewichtung;
|
||||
export let onSubmit;
|
||||
</script>
|
||||
|
||||
<form on:change|preventDefault={onSubmit} class="mb-4">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="hvMax">HV-Max-Punkte</label>
|
||||
<input
|
||||
id="hvMax"
|
||||
class="input input-bordered"
|
||||
type="number"
|
||||
bind:value={hvMax}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="hvGewichtung">HV-Gewichtung in %</label>
|
||||
<input
|
||||
id="hvGewichtung"
|
||||
class="input input-bordered"
|
||||
type="number"
|
||||
bind:value={hvGewichtung}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="lvMax">LV-Max-Punkte</label>
|
||||
<input
|
||||
id="lvMax"
|
||||
class="input input-bordered"
|
||||
type="number"
|
||||
bind:value={lvMax}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="lvGewichtung">LV-Gewichtung in %</label>
|
||||
<input
|
||||
id="lvGewichtung"
|
||||
class="input input-bordered"
|
||||
type="number"
|
||||
bind:value={lvGewichtung}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
23
frontend/src/Notenspiegel.svelte
Normal file
23
frontend/src/Notenspiegel.svelte
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script>
|
||||
export let notenspiegel;
|
||||
</script>
|
||||
|
||||
<h3 class="text-2xl font-bold mt-8 mb-4">Notenspiegel</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
{#each [1, 2, 3, 4, 5, 6] as note}
|
||||
<th>{note}</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
{#each [1, 2, 3, 4, 5, 6] as note}
|
||||
<td>{notenspiegel[note] || 0}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
48
frontend/src/ThemeSwitcher.svelte
Normal file
48
frontend/src/ThemeSwitcher.svelte
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<!-- <script> -->
|
||||
<!-- import { onMount } from "svelte"; -->
|
||||
<!---->
|
||||
<!-- let currentTheme = "macchiato"; -->
|
||||
<!---->
|
||||
<!-- function toggleTheme() { -->
|
||||
<!-- currentTheme = currentTheme === "macchiato" ? "latte" : "macchiato"; -->
|
||||
<!-- document.getElementById("app").setAttribute("data-theme", currentTheme); -->
|
||||
<!-- } -->
|
||||
<!---->
|
||||
<!-- onMount(() => { -->
|
||||
<!-- currentTheme = document.getElementById("app").getAttribute("data-theme"); -->
|
||||
<!-- }); -->
|
||||
<!-- </script> -->
|
||||
<!---->
|
||||
<!-- <button on:click={toggleTheme} class="btn btn-primary"> -->
|
||||
<!-- Switch to {currentTheme === "macchiato" ? "Latte" : "Macchiato"} -->
|
||||
<!-- </button> -->
|
||||
<!---->
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
|
||||
let currentTheme;
|
||||
|
||||
function toggleTheme() {
|
||||
currentTheme = currentTheme === "macchiato" ? "latte" : "macchiato";
|
||||
document.getElementById("app").setAttribute("data-theme", currentTheme);
|
||||
localStorage.setItem("theme", currentTheme);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
currentTheme = localStorage.getItem("theme") || "macchiato";
|
||||
document.getElementById("app").setAttribute("data-theme", currentTheme);
|
||||
});
|
||||
|
||||
$: isChecked = currentTheme === "macchiato";
|
||||
</script>
|
||||
|
||||
<label class="swap swap-rotate">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle theme-controller"
|
||||
bind:checked={isChecked}
|
||||
on:change={toggleTheme}
|
||||
/>
|
||||
<span class="swap-on">🌞</span>
|
||||
<span class="swap-off">🌙</span>
|
||||
</label>
|
||||
Loading…
Add table
Add a link
Reference in a new issue