html-sites #3
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
@@ -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}
|
||||||
Reference in New Issue
Block a user