refactor/update #30
@@ -109,3 +109,6 @@ Temporary Items
|
||||
/api/tests/_*
|
||||
/api/tests/*.suite.yml
|
||||
/api/.env
|
||||
/ui/static/print.css*
|
||||
/ui/static/global.css*
|
||||
/ui/static/bundle.css*
|
||||
|
||||
@@ -5,50 +5,66 @@
|
||||
html {
|
||||
body {
|
||||
background: @mainColorLight;
|
||||
> header, > footer {
|
||||
color: @mainColorDark;
|
||||
background: @mainColor;
|
||||
font-family: serif;
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-indent: inherit;
|
||||
&:first-letter {
|
||||
font-size: inherit;
|
||||
div {
|
||||
> header, > footer {
|
||||
color: @mainColorDark;
|
||||
background: @mainColor;
|
||||
font-family: serif;
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
text-indent: inherit;
|
||||
|
||||
&:first-letter {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
font-style: italic;
|
||||
}
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
> header h1 {
|
||||
margin: 1rem auto;
|
||||
}
|
||||
> footer {
|
||||
color: contrast(@mainColorDark);
|
||||
}
|
||||
& > nav {
|
||||
ul {
|
||||
background: darken(@mainColorLight,33%,relativ);
|
||||
li {
|
||||
font-weight: bold;
|
||||
&:not(:first-child) {
|
||||
border-left: @mainColorDark solid thin;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: @mainColorDark;
|
||||
}
|
||||
&:hover {
|
||||
background: lighten(@mainColor,20%,relativ);
|
||||
a {
|
||||
color: lighten(@mainColor,66%,relativ);
|
||||
|
||||
> header h1 {
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
> footer {
|
||||
color: contrast(@mainColorDark);
|
||||
}
|
||||
|
||||
& > nav {
|
||||
ul {
|
||||
background: darken(@mainColorLight, 33%, relativ);
|
||||
|
||||
li {
|
||||
font-weight: bold;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left: @mainColorDark solid thin;
|
||||
}
|
||||
}
|
||||
&.selected, &.selected:hover {
|
||||
background: lighten(@mainColor,10%,relativ);
|
||||
|
||||
a {
|
||||
color: lighten(@mainColor,66%,relativ);
|
||||
text-decoration: none;
|
||||
color: @mainColorDark;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten(@mainColor, 20%, relativ);
|
||||
|
||||
a {
|
||||
color: lighten(@mainColor, 66%, relativ);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected, &.selected:hover {
|
||||
background: lighten(@mainColor, 10%, relativ);
|
||||
|
||||
a {
|
||||
color: lighten(@mainColor, 66%, relativ);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -63,15 +79,19 @@ main {
|
||||
border-color: @mainColorDark;
|
||||
border-width: medium;
|
||||
}
|
||||
|
||||
section {
|
||||
@sectionMargin: 1rem;
|
||||
|
||||
h1, h2 {
|
||||
margin: @sectionMargin;
|
||||
}
|
||||
|
||||
p, ul, ol, dl {
|
||||
margin: @sectionMargin;
|
||||
text-indent: @sectionMargin * 2;
|
||||
}
|
||||
|
||||
table {
|
||||
thead {
|
||||
tr:last-child {
|
||||
@@ -79,7 +99,9 @@ main {
|
||||
border-bottom: @mainColor solid thin;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
;
|
||||
|
||||
tbody {
|
||||
td.absence-time {
|
||||
color: @redColor;
|
||||
@@ -87,15 +109,23 @@ main {
|
||||
text-decoration-style: dashed;
|
||||
}
|
||||
}
|
||||
tfoot {
|
||||
* {
|
||||
border: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
@formLabelWidth: 10rem;
|
||||
@formItemWidth: 40rem;
|
||||
|
||||
nav.menu {
|
||||
width: @formItemWidth + @formLabelWidth + 4rem;
|
||||
border-color: @mainColor;
|
||||
border-bottom-style: solid;
|
||||
margin: 1rem auto;
|
||||
|
||||
span {
|
||||
border-color: @mainColor;
|
||||
border-style: solid solid none;
|
||||
@@ -103,73 +133,89 @@ main {
|
||||
display: inline-block;
|
||||
font-weight: bolder;
|
||||
margin-right: 1rem;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken(@mainColorLight,10%,relativ);
|
||||
background-color: darken(@mainColorLight, 10%, relativ);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: darken(@mainColorLight,20%,relativ);
|
||||
background-color: darken(@mainColorLight, 20%, relativ);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
width: @formItemWidth + @formLabelWidth + 2rem;
|
||||
margin: 1rem auto;
|
||||
border-style: solid ;
|
||||
border-style: solid;
|
||||
border-color: @mainColor;
|
||||
padding: @sectionMargin;
|
||||
|
||||
&.tasten {
|
||||
border: none;
|
||||
background-color: @mainColorLight;
|
||||
}
|
||||
|
||||
legend {
|
||||
margin: @sectionMargin;
|
||||
margin-left: @sectionMargin * 2;
|
||||
}
|
||||
|
||||
div {
|
||||
& > label {
|
||||
& > label {
|
||||
width: @formLabelWidth;
|
||||
display: inline-block;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
input {
|
||||
display: inline-block;
|
||||
width: @formItemWidth;
|
||||
padding: 0.25rem;
|
||||
margin-bottom: 1.0rem;
|
||||
border-style: solid;
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
.button(@mainColor, spin(lighten(@mainColor,66%,relativ),@subColor));
|
||||
.button(@mainColor, spin(lighten(@mainColor, 66%, relativ), @subColor));
|
||||
|
||||
&.sub-button {
|
||||
.button(lighten(@mainColor,20%,relativ), spin(@mainColor,@subColor));
|
||||
.button(lighten(@mainColor, 20%, relativ), spin(@mainColor, @subColor));
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: right;
|
||||
padding: 0;
|
||||
|
||||
p {
|
||||
padding: 0.5rem;
|
||||
display: inline-block;
|
||||
margin: inherit;
|
||||
text-indent: inherit;
|
||||
|
||||
&:first-letter {
|
||||
font-size: inherit;
|
||||
}
|
||||
background: @mainColorLight ;
|
||||
color: @mainColor ;
|
||||
|
||||
background: @mainColorLight;
|
||||
color: @mainColor;
|
||||
font-style: italic;
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
nav li {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
}
|
||||
@@ -5,7 +5,7 @@
|
||||
font-size: 10pt;
|
||||
}
|
||||
header, footer, main, nav, aside {
|
||||
body > & {
|
||||
body div > & {
|
||||
width: 19cm;
|
||||
margin: auto;
|
||||
.border-box();
|
||||
@@ -15,7 +15,7 @@
|
||||
padding: 0.5rem;
|
||||
;
|
||||
}
|
||||
body {
|
||||
body div {
|
||||
& > header {
|
||||
font-size: 200%;
|
||||
font-weight: bolder;
|
||||
@@ -71,7 +71,7 @@
|
||||
|
||||
@media screen and (min-width: 831px) {
|
||||
header, footer, main, nav, aside {
|
||||
body > & {
|
||||
body div > & {
|
||||
width: @breiteMainBereich;
|
||||
margin: auto;
|
||||
.border-box();
|
||||
@@ -80,7 +80,7 @@
|
||||
header, footer{
|
||||
padding: 0.5rem;
|
||||
}
|
||||
body {
|
||||
body div {
|
||||
& > header {
|
||||
font-size: 200%;
|
||||
font-weight: bolder;
|
||||
@@ -139,7 +139,7 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 830px) {
|
||||
html body {
|
||||
html body div {
|
||||
@boxHeight: 5rem;
|
||||
& > header {
|
||||
height: @boxHeight;
|
||||
@@ -267,7 +267,7 @@
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 720px) {
|
||||
html body {
|
||||
html body div {
|
||||
@boxHeight: 2.5rem;
|
||||
& > header {
|
||||
height: @boxHeight;
|
||||
@@ -2,7 +2,7 @@ html {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
body div {
|
||||
color: #000;
|
||||
font-size: 1em;
|
||||
font-family: OpenSans, "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
|
||||
@@ -1,5 +1,5 @@
|
||||
html {
|
||||
body {
|
||||
body div {
|
||||
> header, > footer {
|
||||
background: none;
|
||||
font-family: serif;
|
||||
@@ -59,7 +59,7 @@ main {
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tbody div {
|
||||
th {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
+34
-29
@@ -1,31 +1,36 @@
|
||||
{
|
||||
"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",
|
||||
"dotenv": "^8.2.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",
|
||||
"svelte-paginate": "^0.1.0"
|
||||
}
|
||||
"private": true,
|
||||
"name": "svelte-demo",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"prepare": "svelte-kit sync || echo ''",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"ganalytics": "^3.1.2",
|
||||
"navaid": "^1.0.2",
|
||||
"open-iconic": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^6.0.0",
|
||||
"@sveltejs/kit": "^2.16.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-check": "^4.0.0",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^6.2.6",
|
||||
"dotenv": "^8.2.0",
|
||||
"wx-svelte-grid": "^2.1.5",
|
||||
"@iconify-icons/oi": "^1.1.0",
|
||||
"@iconify/svelte": "^5.0.0"
|
||||
},
|
||||
"exports": {
|
||||
".": {
|
||||
"svelte": "./puplic/index.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
<!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" media="screen">
|
||||
<link rel="stylesheet" href="/print.css" media="print">
|
||||
<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>
|
||||
@@ -1,51 +0,0 @@
|
||||
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';
|
||||
import {config} from 'dotenv';
|
||||
|
||||
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'),
|
||||
'env': JSON.stringify({...config().parsed /* attached the .env config*/})
|
||||
}),
|
||||
|
||||
// If we're building for production (npm run build
|
||||
// instead of npm run dev), minify
|
||||
production && terser()
|
||||
],
|
||||
|
||||
watch: {
|
||||
clearScreen: false
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,23 @@
|
||||
<!doctype html>
|
||||
<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='%sveltekit.assets%/favicon.png'>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="color-scheme" content="dark light"/>
|
||||
%sveltekit.head%
|
||||
<link rel="stylesheet" href="%sveltekit.assets%/global.css" media="screen">
|
||||
<link rel="stylesheet" href="%sveltekit.assets%/print.css" media="print">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="display: contents">
|
||||
%sveltekit.body%
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,57 +0,0 @@
|
||||
<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);
|
||||
|
||||
const router = Navaid('/')
|
||||
.on('/', () => run(import('../routes/Home.svelte')))
|
||||
.on('/views/weekly', () => run(import('../routes/WeeklyViews.svelte')))
|
||||
.on('/views/monthly', () => run(import('../routes/MonthlyViews.svelte')))
|
||||
.on('/views/yearly', () => run(import('../routes/YearlyViews.svelte')))
|
||||
.on('/working-hours', () => run(import('../routes/WorkingHours.svelte')))
|
||||
.listen();
|
||||
|
||||
onDestroy(router.unlisten);
|
||||
</script>
|
||||
@@ -1,15 +0,0 @@
|
||||
<!--suppress HtmlUnknownTarget -->
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="{ isActive('home') }"><a href="/">Home</a></li>
|
||||
<li class="{ isActive('weekly') }"><a href="/views/weekly">Wochenansicht</a></li>
|
||||
<li class="{ isActive('monthly') }"><a href="/views/monthly">Monatsansicht</a></li>
|
||||
<li class="{ isActive('yearly') }"><a href="/views/yearly">Jahresansicht</a></li>
|
||||
<li class="{ isActive('working-hours') }"><a href="/working-hours">Einträge</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
export let active;
|
||||
$: isActive = str => active === str ? 'selected' : '';
|
||||
</script>
|
||||
@@ -1,110 +0,0 @@
|
||||
<script context="module">
|
||||
const MyFetch = {
|
||||
'post': async (rest_url, request_body) => {
|
||||
return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(request_body), {})
|
||||
},
|
||||
'put': async (rest_url, http_body) => {
|
||||
return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(http_body, true), {})
|
||||
},
|
||||
'get': async (rest_url, query_parameters) => {
|
||||
if (query_parameters !== null) {
|
||||
let filter = []
|
||||
for (let parameter in query_parameters) {
|
||||
filter.push(parameter + '=' + query_parameters[parameter])
|
||||
}
|
||||
if (filter.length > 0) {
|
||||
rest_url += '?' + filter.join('&')
|
||||
}
|
||||
}
|
||||
return MyFetch._fetch(rest_url, {})
|
||||
},
|
||||
'_fetch': async (rest_url, request_options) => {
|
||||
// noinspection JSUnresolvedVariable
|
||||
let response = await MyFetch._pureFetch(rest_url, request_options).catch(err => {
|
||||
console.error(err)
|
||||
return null
|
||||
})
|
||||
if (!response.ok) {
|
||||
throw new Error('Fail!')
|
||||
}
|
||||
return response.json()
|
||||
},
|
||||
'_buildRequestOptions': (request_body, needPut) => {
|
||||
return {
|
||||
method: (needPut === true) ? 'PUT' : 'POST',
|
||||
mode: 'cors',
|
||||
cache: 'no-cache',
|
||||
credentials: 'omit',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: request_body,
|
||||
}
|
||||
},
|
||||
'_pureFetch': async (rest_url, request_options) => {
|
||||
// noinspection JSUnresolvedVariable
|
||||
return await fetch(env.API_URL + rest_url, request_options)
|
||||
}
|
||||
}
|
||||
|
||||
export const WorkingHoursRepository = {
|
||||
'browse': (startDate = '', endDate = '') => {
|
||||
let filter = {}
|
||||
if (startDate !== '') {
|
||||
filter['start-date'] = startDate
|
||||
}
|
||||
if (endDate !== '') {
|
||||
filter['end-date'] = endDate
|
||||
}
|
||||
return MyFetch.get('/working-hours', filter)
|
||||
},
|
||||
|
||||
'read': date => {
|
||||
return MyFetch.get('/working-hours/' + date)
|
||||
},
|
||||
|
||||
'readOrNew': async date => {
|
||||
let response = await MyFetch._pureFetch('/working-hours/' + date)
|
||||
if (response.status === 404) {
|
||||
return {workingTime: '00:00:00', workingDay: date}
|
||||
} else if (!response.ok) {
|
||||
throw new Error('Fail!')
|
||||
}
|
||||
return response.json()
|
||||
},
|
||||
|
||||
'add': async (record) => {
|
||||
console.debug(record);
|
||||
return MyFetch.post('/working-hours', JSON.stringify(record))
|
||||
},
|
||||
|
||||
'update': async (date, record) => {
|
||||
console.debug(record);
|
||||
return MyFetch.put('/working-hours/' + date, JSON.stringify(record))
|
||||
},
|
||||
|
||||
'addOrUpdate': async (date, record) => {
|
||||
console.debug(record);
|
||||
let request_options = MyFetch._buildRequestOptions(JSON.stringify(record))
|
||||
let response = await MyFetch._pureFetch('/working-hours', request_options)
|
||||
if (response.status === 409) {
|
||||
return WorkingHoursRepository.update(date, record)
|
||||
} else if (!response.ok) {
|
||||
throw new Error('Fail!')
|
||||
}
|
||||
return response.json()
|
||||
}
|
||||
}
|
||||
|
||||
export const WorkingHoursViewsRepository = {
|
||||
'weekly': async () => {
|
||||
return MyFetch.get('/views/working-hours/weekly')
|
||||
},
|
||||
'monthly': async () => {
|
||||
return MyFetch.get('/views/working-hours/monthly')
|
||||
},
|
||||
'yearly': async () => {
|
||||
return MyFetch.get('/views/working-hours/yearly')
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,5 +0,0 @@
|
||||
import App from './components/App.svelte';
|
||||
|
||||
new App({
|
||||
target: document.body
|
||||
});
|
||||
@@ -0,0 +1,17 @@
|
||||
export class PeriodRecord {
|
||||
/**
|
||||
* @param {{ workingDays: Number; totalHours: any; overtime: string; period: string; }} record
|
||||
*/
|
||||
constructor(record) {
|
||||
this.workingDays = Number(record.workingDays)
|
||||
this.totalHours = String(record.totalHours)
|
||||
this.period = String(record.period)
|
||||
this.overtime = String('##:##:##')
|
||||
this.isMinus = false
|
||||
const interval = record.overtime.match(/^(-?)(\d\d:\d\d:\d\d)$/)
|
||||
if (interval) {
|
||||
this.overtime = String(interval[2])
|
||||
this.isMinus = String(interval[1]) === '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
<script module>
|
||||
|
||||
const MyFetch = {
|
||||
/**
|
||||
* @param {String} rest_url
|
||||
* @param {String} request_body
|
||||
*/
|
||||
'post': async (rest_url, request_body) => {
|
||||
return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(request_body, false))
|
||||
},
|
||||
/**
|
||||
* @param {String} rest_url
|
||||
* @param {String} http_body
|
||||
*/
|
||||
'put': async (rest_url, http_body) => {
|
||||
return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(http_body, true))
|
||||
},
|
||||
/**
|
||||
* @param {String} rest_url
|
||||
* @param {Object|null} query_parameters
|
||||
*/
|
||||
'get': async (rest_url, query_parameters = null) => {
|
||||
if (query_parameters !== null) {
|
||||
let filter = []
|
||||
for (let parameter in query_parameters) {
|
||||
filter.push(parameter + '=' + query_parameters[parameter])
|
||||
}
|
||||
if (filter.length > 0) {
|
||||
rest_url += '?' + filter.join('&')
|
||||
}
|
||||
}
|
||||
return MyFetch._fetch(rest_url, {})
|
||||
},
|
||||
/**
|
||||
* @param {String} rest_url
|
||||
* @param {Object} request_options
|
||||
*/
|
||||
'_fetch': async (rest_url, request_options) => {
|
||||
// noinspection JSUnresolvedVariable
|
||||
let response = await MyFetch._pureFetch(rest_url, request_options).catch(err => {
|
||||
console.error(err)
|
||||
return null
|
||||
})
|
||||
if (response === null || !response.ok) {
|
||||
throw new Error('Fail!')
|
||||
}
|
||||
return response.json()
|
||||
},
|
||||
/**
|
||||
* @param {String} request_body
|
||||
* @param {Boolean} needPut
|
||||
*/
|
||||
'_buildRequestOptions': (request_body, needPut) => {
|
||||
return {
|
||||
method: (needPut === true) ? 'PUT' : 'POST',
|
||||
mode: 'cors',
|
||||
cache: 'no-cache',
|
||||
credentials: 'omit',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: request_body,
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @param {String} rest_url
|
||||
* @param {Object} request_options
|
||||
*/
|
||||
'_pureFetch': async (rest_url, request_options = {}) => {
|
||||
// noinspection JSUnresolvedVariable
|
||||
return await fetch(rest_url, request_options)
|
||||
}
|
||||
}
|
||||
|
||||
export const WorkingHoursRepository = {
|
||||
/**
|
||||
* @param {String} api_url
|
||||
* @param {String} startDate
|
||||
* @param {String} endDate
|
||||
*/
|
||||
'browse': (api_url, startDate = '', endDate = '') => {
|
||||
let filter = {}
|
||||
if (startDate !== '') {
|
||||
filter['start-date'] = startDate
|
||||
}
|
||||
if (endDate !== '') {
|
||||
filter['end-date'] = endDate
|
||||
}
|
||||
return MyFetch.get(api_url + '/working-hours', filter)
|
||||
},
|
||||
/**
|
||||
* @param {String} api_url
|
||||
* @param {String} date
|
||||
*/
|
||||
'read': (api_url, date) => {
|
||||
return MyFetch.get(api_url + '/working-hours/' + date)
|
||||
},
|
||||
/**
|
||||
* @param {String} api_url
|
||||
* @param {String} date
|
||||
*/
|
||||
'readOrNew': async (api_url, date) => {
|
||||
let response = await MyFetch._pureFetch(api_url + '/working-hours/' + date)
|
||||
if (response.status === 404) {
|
||||
return {workingTime: '00:00:00', workingDay: date}
|
||||
} else if (!response.ok) {
|
||||
throw new Error('Fail!')
|
||||
}
|
||||
return response.json()
|
||||
},
|
||||
/**
|
||||
* @param {String} api_url
|
||||
* @param {Object} record
|
||||
*/
|
||||
'add': async (api_url, record) => {
|
||||
return MyFetch.post(api_url + '/working-hours', JSON.stringify(record))
|
||||
},
|
||||
/**
|
||||
* @param {String} api_url
|
||||
* @param {String} date
|
||||
* @param {Object} record
|
||||
*/
|
||||
'update': async (api_url, date, record) => {
|
||||
console.debug(record);
|
||||
return MyFetch.put(api_url + '/working-hours/' + date, JSON.stringify(record))
|
||||
},
|
||||
/**
|
||||
* @param {String} api_url
|
||||
* @param {String} date
|
||||
* @param {Object} record
|
||||
*/
|
||||
'addOrUpdate': async (api_url, date, record) => {
|
||||
console.debug(record);
|
||||
let request_options = MyFetch._buildRequestOptions(JSON.stringify(record), false)
|
||||
let response = await MyFetch._pureFetch(api_url + '/working-hours', request_options)
|
||||
if (response.status === 409) {
|
||||
return WorkingHoursRepository.update(api_url, date, record)
|
||||
} else if (!response.ok) {
|
||||
throw new Error('Fail!')
|
||||
}
|
||||
return response.json()
|
||||
}
|
||||
}
|
||||
|
||||
export const WorkingHoursViewsRepository = {
|
||||
/**
|
||||
* @param {String} api_url
|
||||
*/
|
||||
'weekly': async api_url => {
|
||||
return MyFetch.get(api_url + '/views/working-hours/weekly', {})
|
||||
},
|
||||
/**
|
||||
* @param {String} api_url
|
||||
*/
|
||||
'monthly': async api_url => {
|
||||
return MyFetch.get(api_url + '/views/working-hours/monthly', {})
|
||||
},
|
||||
/**
|
||||
* @param {String} api_url
|
||||
*/
|
||||
'yearly': async api_url => {
|
||||
return MyFetch.get(api_url + '/views/working-hours/yearly', {})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,63 @@
|
||||
<script>
|
||||
import {PeriodRecord} from './Models.svelte.js'
|
||||
|
||||
/**
|
||||
* @type {{ promise: Promise<object>; title: string;}}
|
||||
*/
|
||||
let {params} = $props();
|
||||
/** @type PeriodRecord[] **/
|
||||
let records = $state([])
|
||||
let isLoading = $state(true)
|
||||
const init = async () => await params.promise.then(
|
||||
/**
|
||||
* @param {Array<object>} data
|
||||
*/
|
||||
data => {
|
||||
records = data.map(row => new PeriodRecord(row))
|
||||
isLoading = false
|
||||
}
|
||||
)
|
||||
init()
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{params.title}</title>
|
||||
</svelte:head>
|
||||
|
||||
<section id="list-records">
|
||||
<header>
|
||||
<h1>{params.title}</h1>
|
||||
</header>
|
||||
<article>
|
||||
{#if isLoading === true}
|
||||
<p>Loading...</p>
|
||||
{:else}
|
||||
<table>
|
||||
<colgroup>
|
||||
<col/>
|
||||
<col/>
|
||||
<col/>
|
||||
<col/>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Zeitraum</th>
|
||||
<th>Arbeitstage</th>
|
||||
<th>Arbeitsstunden</th>
|
||||
<th>Über- / Unterstunden</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each records as record}
|
||||
<tr>
|
||||
<td>{record.period}</td>
|
||||
<td>{record.workingDays}</td>
|
||||
<td>{record.totalHours}</td>
|
||||
<td class="{record.isMinus ? 'absence-time' : ''}">{record.overtime}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</article>
|
||||
</section>
|
||||
@@ -0,0 +1,19 @@
|
||||
<script>
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/views/weekly">Wochenansicht</a></li>
|
||||
<li><a href="/views/monthly">Monatsansicht</a></li>
|
||||
<li><a href="/views/yearly">Jahresansicht</a></li>
|
||||
<!-- <li><a href="/working-hours">Einträge</a></li>-->
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
{@render children()}
|
||||
</main>
|
||||
|
||||
<footer><p>© Torsten Lücke 2021</p></footer>
|
||||
@@ -0,0 +1,9 @@
|
||||
import {env} from '$env/dynamic/private';
|
||||
import {WorkingHoursViewsRepository} from "../lib/Repositories.svelte";
|
||||
|
||||
export function load() {
|
||||
return {
|
||||
title: 'Wochenansicht',
|
||||
promise: WorkingHoursViewsRepository.weekly(env.API_URL)
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import Views from "$lib/Views.svelte";
|
||||
let { data } = $props();
|
||||
</script>
|
||||
|
||||
<Views params={data}/>
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
<WeeklyViews />
|
||||
|
||||
<script>
|
||||
import WeeklyViews from "./WeeklyViews.svelte";
|
||||
export const params = {};
|
||||
</script>
|
||||
@@ -1,11 +0,0 @@
|
||||
<script>
|
||||
import Views from "./Views.svelte";
|
||||
import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
|
||||
export let params
|
||||
params = {
|
||||
title: 'Monatsansicht',
|
||||
promise: WorkingHoursViewsRepository.monthly()
|
||||
}
|
||||
</script>
|
||||
|
||||
<Views {params} />
|
||||
@@ -1,81 +0,0 @@
|
||||
<script>
|
||||
import { paginate, PaginationNav } from 'svelte-paginate'
|
||||
|
||||
export let params = {}
|
||||
let records = []
|
||||
let isLoading = true
|
||||
console.log(params)
|
||||
let currentPage = 1
|
||||
let pageSize = 15
|
||||
$: paginatedItems = paginate({ items: records, pageSize, currentPage })
|
||||
if (!String.prototype.startsWith) {
|
||||
String.prototype.startsWith = function (searchString, position) {
|
||||
position = position || 0
|
||||
return this.indexOf(searchString, position) === position
|
||||
}
|
||||
}
|
||||
$: isNegative = time => time.startsWith('-') ? 'absence-time' : ''
|
||||
$: cutMinusChar = time => time.startsWith('-') ? time.substr(1) : time
|
||||
|
||||
const init = async () => await params.promise.then(data => {
|
||||
records = data
|
||||
isLoading = false
|
||||
})
|
||||
init()
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{params.title}</title>
|
||||
</svelte:head>
|
||||
|
||||
<section id="list-records">
|
||||
<header>
|
||||
<h1>{params.title}</h1>
|
||||
</header>
|
||||
<article>
|
||||
{#if isLoading === true}
|
||||
<p>Loading...</p>
|
||||
{:else}
|
||||
<table>
|
||||
<colgroup>
|
||||
<col/>
|
||||
<col/>
|
||||
<col/>
|
||||
<col/>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Zeitraum</th>
|
||||
<th>Arbeitstage</th>
|
||||
<th>Arbeitsstunden</th>
|
||||
<th>Über- / Unterstunden</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each paginatedItems as record}
|
||||
<tr>
|
||||
<td>{record.period}</td>
|
||||
<td>{record.workingDays}</td>
|
||||
<td>{record.totalHours}</td>
|
||||
<td class="{ isNegative(record.overtime) }">{cutMinusChar(record.overtime)}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<PaginationNav
|
||||
totalItems="{records.length}"
|
||||
pageSize="{pageSize}"
|
||||
currentPage="{currentPage}"
|
||||
limit="{1}"
|
||||
showStepOptions="{true}"
|
||||
on:setPage="{(e) => currentPage = e.detail.page}"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
{/if}
|
||||
</article>
|
||||
</section>
|
||||
@@ -1,11 +0,0 @@
|
||||
<script>
|
||||
import Views from "./Views.svelte";
|
||||
import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
|
||||
export let params
|
||||
params = {
|
||||
title: 'Wochenansicht',
|
||||
promise: WorkingHoursViewsRepository.weekly()
|
||||
}
|
||||
</script>
|
||||
|
||||
<Views {params} />
|
||||
@@ -1,33 +0,0 @@
|
||||
<script>
|
||||
import List from "./WorkingHours/List.svelte";
|
||||
import Formular from "./WorkingHours/Formular.svelte";
|
||||
export const params = {};
|
||||
|
||||
let TITLE = "Bearbeitung Einträge"
|
||||
let activeRecord = null;
|
||||
let currentPage = 1
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{TITLE}</title>
|
||||
</svelte:head>
|
||||
|
||||
{#if activeRecord === null}
|
||||
<section id="list-records">
|
||||
<header>
|
||||
<h1>{TITLE}</h1>
|
||||
</header>
|
||||
<article>
|
||||
<List bind:activeRecord={activeRecord} bind:currentPage/>
|
||||
</article>
|
||||
</section>
|
||||
{:else}
|
||||
<section id="edit-record">
|
||||
<header>
|
||||
<h1>{TITLE}</h1>
|
||||
</header>
|
||||
<article>
|
||||
<Formular bind:activeRecord={activeRecord}/>
|
||||
</article>
|
||||
</section>
|
||||
{/if}
|
||||
@@ -1,11 +0,0 @@
|
||||
<script>
|
||||
import Views from "./Views.svelte";
|
||||
import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
|
||||
export let params
|
||||
params = {
|
||||
title: 'Jahresansicht',
|
||||
promise: WorkingHoursViewsRepository.yearly()
|
||||
}
|
||||
</script>
|
||||
|
||||
<Views {params} />
|
||||
@@ -0,0 +1,9 @@
|
||||
import {env} from '$env/dynamic/private';
|
||||
import {WorkingHoursViewsRepository} from "$lib/Repositories.svelte";
|
||||
|
||||
export function load() {
|
||||
return {
|
||||
title: 'Monatsansicht',
|
||||
promise: WorkingHoursViewsRepository.monthly(env.API_URL)
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import Views from "$lib/Views.svelte";
|
||||
let { data } = $props();
|
||||
</script>
|
||||
|
||||
<Views params={data}/>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
import {env} from '$env/dynamic/private';
|
||||
import {WorkingHoursViewsRepository} from "$lib/Repositories.svelte";
|
||||
|
||||
export function load() {
|
||||
return {
|
||||
title: 'Wochenansicht',
|
||||
promise: WorkingHoursViewsRepository.weekly(env.API_URL)
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import Views from "$lib/Views.svelte";
|
||||
let { data } = $props();
|
||||
</script>
|
||||
|
||||
<Views params={data}/>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
import {env} from '$env/dynamic/private';
|
||||
import {WorkingHoursViewsRepository} from "$lib/Repositories.svelte";
|
||||
|
||||
export function load() {
|
||||
return {
|
||||
title: 'Jahresansicht',
|
||||
promise: WorkingHoursViewsRepository.yearly(env.API_URL)
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import Views from "$lib/Views.svelte";
|
||||
let { data } = $props();
|
||||
</script>
|
||||
|
||||
<Views params={data}/>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
@@ -0,0 +1,6 @@
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
kit: {}
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler"
|
||||
}
|
||||
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
|
||||
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
|
||||
//
|
||||
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()]
|
||||
});
|
||||
Reference in New Issue
Block a user