2021-04-08 20:16:00 +02:00
15 changed files with 376 additions and 0 deletions
@@ -0,0 +1,10 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_size = 4
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = false
@@ -0,0 +1,11 @@
+@startuml
+'https://plantuml.com/salt
+
+salt
+{
+    Datum   |"Datum <&calendar>"
+    Uhrzeit | "Uhrzeit <&clock>"
+    [Übernehmen <&plus>]
+    [Abbrechen <&action-undo>]
+}
+@enduml
@@ -0,0 +1,20 @@
+@startuml
+'https://plantuml.com/salt
+
+salt
+{
+    Woche vom <&calendar> bis zum <&calendar>
+    [<&chevron-left> Woche zurück] | [Woche vor <&chevron-right>]
+    {!
+                   Montag     |            "00:00:00 <&clock>"
+                   Dienstag   |            "00:00:00 <&clock>"
+                   Mittwoch   |            "00:00:00 <&clock>"
+                   Donnerstag |            "00:00:00 <&clock>"
+                   Freitag    |            "00:00:00 <&clock>"
+        <color:red>Samstag    | "<color:red>00:00:00 <&clock>"
+        <color:red>Sontag     | "<color:red>00:00:00 <&clock>"
+    }
+    [Übernehmen <&plus>]
+    [Abbrechen <&action-undo>]
+}
+@enduml
@@ -0,0 +1,5 @@
+.DS_Store
+node_modules
+package-lock.json
+yarn.lock
+public
@@ -0,0 +1,29 @@
+{
+  "private": true,
+  "name": "svelte-demo",
+  "scripts": {
+    "build": "rollup -c",
+    "autobuild": "rollup -c -w",
+    "dev": "run-p start:dev autobuild",
+    "start": "sirv public --single",
+    "start:dev": "sirv public --dev --single"
+  },
+  "dependencies": {
+    "ganalytics": "^3.1.2",
+    "navaid": "^1.0.2",
+    "open-iconic": "^1.1.1"
+  },
+  "devDependencies": {
+    "@iconify-icons/oi": "^1.1.0",
+    "@iconify/svelte": "^1.0.4",
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-replace": "^2.3.0",
+    "npm-run-all": "^4.1.3",
+    "rollup": "^2.30.0",
+    "rollup-plugin-svelte": "^6.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "sirv-cli": "^1.0.8",
+    "svelte": "^3.4.4"
+  }
+}
@@ -0,0 +1 @@
+
@@ -0,0 +1,21 @@
+<!doctype html>
+<!--suppress HtmlUnknownTarget -->
+<!--suppress JSUnresolvedLibraryURL -->
+<html lang="de">
+<head>
+	<base href="/" />
+	<meta charset="utf8">
+	<meta name="viewport" content="width=device-width">
+
+	<title>Svelte app</title>
+
+    <link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel="stylesheet" href="/global.css">
+	<link rel="stylesheet" href="/bundle.css">
+    <script type="module" src="https://unpkg.com/dimport?module" data-main="/index.js"></script>
+    <script nomodule src="https://unpkg.com/dimport/nomodule" data-main="/index.js"></script>
+</head>
+
+<body>
+</body>
+</html>
@@ -0,0 +1,49 @@
+import svelte from 'rollup-plugin-svelte';
+import replace from '@rollup/plugin-replace';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import { terser } from 'rollup-plugin-terser';
+
+const production = !process.env.ROLLUP_WATCH;
+
+export default {
+	input: 'src/index.js',
+	output: {
+		name: 'app',
+		format: 'esm',
+		sourcemap: true,
+		dir: 'public',
+	},
+	preserveEntrySignatures: false,
+	plugins: [
+		svelte({
+			// enable run-time checks when not in production
+			dev: !production,
+			// we'll extract any component CSS out into
+			// a separate file — better for performance
+			css: css => {
+				css.write('bundle.css');
+			}
+		}),
+
+		// If you have external dependencies installed from
+		// npm, you'll most likely need these plugins. In
+		// some cases you'll need additional configuration —
+		// consult the documentation for details:
+		// https://github.com/rollup/rollup-plugin-commonjs
+		resolve(),
+		commonjs(),
+
+		replace({
+			'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development')
+		}),
+
+		// If we're building for production (npm run build
+		// instead of npm run dev), minify
+		production && terser()
+	],
+
+	watch: {
+		clearScreen: false
+	}
+};
@@ -0,0 +1,97 @@
+<header>
+    Arbeitszeiten
+</header>
+<Nav {active} />
+<main>
+    <svelte:component this={Route} {params} />
+</main>
+<footer><p>© Torsten Lücke 2021</p></footer>
+
+<script>
+	import Navaid from 'navaid';
+	import { onDestroy } from 'svelte';
+	import Nav from './Nav.svelte';
+
+	let Route, params={}, active;
+	let uri = location.pathname;
+	$: active = uri.split('/').pop() || 'home';
+
+	function run(thunk, obj) {
+		const target = uri;
+
+		thunk.then(m => {
+			if (target !== uri) return;
+
+			params = obj || {};
+
+			if (m.preload) {
+				m.preload({ params }).then(() => {
+					if (target !== uri) return;
+					Route = m.default;
+					window.scrollTo(0, 0);
+				});
+			} else {
+				Route = m.default;
+				window.scrollTo(0, 0);
+			}
+		});
+	}
+
+	function track(obj) {
+		uri = obj.state || obj.uri || location.pathname;
+	}
+
+	addEventListener('replacestate', track);
+	addEventListener('pushstate', track);
+	addEventListener('popstate', track);
+
+
+    let w = {
+        "period": "2020#01",
+        "workingDays": 20,
+        "totalHours": "99:00:00",
+        "overtime": "10:22:00"
+    };
+    let weekly = {
+        "title" : "Wochenansicht",
+        "records" : [w, w]
+    };
+    let m = {
+        "period": "2020-01",
+        "workingDays": 20,
+        "totalHours": "99:00:00",
+        "overtime": "10:22:00"
+    };
+    let monthly = {
+        "title" : "Monatsansicht",
+        "records" : [m, m]
+    };
+    let y = {
+        "period": "2020",
+        "workingDays": 20,
+        "totalHours": "99:00:00",
+        "overtime": "10:22:00"
+    };
+    let yearly = {
+        "title" : "Jahresansicht",
+        "records" : [y, y]
+    };
+    let r = {
+        "workingDay": "2020-01-15",
+        "workingTime": "09:00:00"
+    };
+    let records = {
+        "title" : "Einträge",
+        "records" : [r, r]
+    };
+
+	const router = Navaid('/')
+		.on('/', () => run(import('../routes/Home.svelte'), weekly))
+		.on('/views/weekly', () => run(import('../routes/Views.svelte'), weekly))
+		.on('/views/monthly', () => run(import('../routes/Views.svelte'), monthly))
+		.on('/views/yearly', () => run(import('../routes/Views.svelte'), yearly))
+		.on('/working-hours', () => run(import('../routes/WorkingHours.svelte'), records))
+		.listen();
+
+	onDestroy(router.unlisten);
+</script>
@@ -0,0 +1,15 @@
+<!--suppress HtmlUnknownTarget -->
+<nav>
+	<ul>
+		<li><a class="{ isActive('home') }" href="/">Home</a></li>
+		<li><a class="{ isActive('weekly') }" href="/views/weekly">Wochenansicht</a></li>
+		<li><a class="{ isActive('monthly') }" href="/views/monthly">Monatsansicht</a></li>
+		<li><a class="{ isActive('yearly') }" href="/views/yearly">Jahresansicht</a></li>
+		<li><a class="{ isActive('working-hours') }" href="/working-hours">Einträge</a></li>
+	</ul>
+</nav>
+
+<script>
+	export let active;
+	$: isActive = str => active === str ? 'selected' : '';
+</script>
@@ -0,0 +1,5 @@
+import App from './components/App.svelte';
+
+new App({
+	target: document.body
+});
@@ -0,0 +1,6 @@
+<Views {params} />
+
+<script>
+    import Views from "./Views.svelte";
+    export let params;
+</script>
@@ -0,0 +1,35 @@
+<script>
+    export let params;
+</script>
+
+<svelte:head>
+	<title>{params.title}</title>
+</svelte:head>
+
+<section id="list-records">
+    <header>
+        <h1>{params.title}</h1>
+    </header>
+    <article>
+        <table>
+            <thead>
+            <tr>
+                <th>Zeitraum</th>
+                <th>Arbeitstage</th>
+                <th>Arbeitsstunden</th>
+                <th>Über- / Unterstunden</th>
+            </tr>
+            </thead>
+            <tbody>
+            {#each params.records as record}
+                <tr>
+                    <td>{record.period}</td>
+                    <td>{record.workingDays}</td>
+                    <td>{record.totalHours}</td>
+                    <td>{record.overtime}</td>
+                </tr>
+            {/each}
+            </tbody>
+        </table>
+    </article>
+</section>
@@ -0,0 +1,72 @@
+<script>
+    export let params;
+    let title = "Bearbeitung Einträge"
+    import IconifyIcon from '@iconify/svelte';
+    import wrenchIcon from '@iconify-icons/oi/wrench';
+    import trashIcon from '@iconify-icons/oi/trash';
+    import checkIcon from '@iconify-icons/oi/check';
+    import xIcon from '@iconify-icons/oi/x';
+    let activeRecord = null;
+</script>
+
+<svelte:head>
+    <title>{title}</title>
+</svelte:head>
+
+{#if activeRecord === null}
+    <section id="list-records">
+        <header>
+            <h1>{title}</h1>
+        </header>
+        <article>
+            <table>
+                <thead>
+                <tr>
+                    <th>Datum</th>
+                    <th>Arbeitsstunden</th>
+                    <th>Aktionen</th>
+                </tr>
+                </thead>
+                <tbody>
+                {#each params.records as record}
+                    <tr>
+                        <td>{record.workingDay}</td>
+                        <td>{record.workingTime}</td>
+                        <td>
+                            <button>Bearbeiten <IconifyIcon icon={wrenchIcon} /></button>
+                            <button>Löschen <IconifyIcon icon={trashIcon} color="red" /></button>
+                        </td>
+                    </tr>
+                {/each}
+                </tbody>
+            </table>
+        </article>
+    </section>
+{:else}
+    <section id="edit-record">
+        <header>
+            <h1>{title}</h1>
+        </header>
+        <article>
+            <!--suppress HtmlUnknownTarget -->
+            <form action="/working-hours" name="editRecord">
+                <fieldset name="record-data">
+                    <div>
+                        <label for="workingDay">Arbeitstag</label>
+                        <!--suppress JSUnresolvedVariable -->
+                        <input bind:value={activeRecord.workingDay} placeholder="Arbeitstag" type="date" id="workingDay">
+                    </div>
+                    <div>
+                        <label for="workingTime">Arbeitszeit</label>
+                        <!--suppress JSUnresolvedVariable -->
+                        <input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time" id="workingTime">
+                    </div>
+                </fieldset>
+                <fieldset name="buttons">
+                    <button>Übernehmen <IconifyIcon icon={checkIcon} color="green" /></button>
+                    <button>Abbrechen <IconifyIcon icon={xIcon} /></button>
+                </fieldset>
+            </form>
+        </article>
+    </section>
+{/if}