2.1
parent
55ec581373
commit
1520711a5c
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2017 Theenoro
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
|
@ -1,2 +1,5 @@
|
|||
# wochenbericht-manager
|
||||
# Wochenbericht Manager
|
||||
|
||||
[![pipeline status](https://gitlab.thee.moe/theenoro/wochenbericht-manager/badges/master/pipeline.svg)](https://gitlab.thee.moe/theenoro/wochenbericht-manager/commits/master)
|
||||
|
||||
[Online Version](https://wbm.lucajaents.ch)
|
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"name": "wochenbericht-manager",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"axios": "^0.18.0",
|
||||
"chance": "^1.0.16",
|
||||
"jspdf": "^1.4.1",
|
||||
"moment": "^2.22.2",
|
||||
"nunjucks": "^3.1.3",
|
||||
"random-weighted-choice": "^0.1.3",
|
||||
"rc-tabs": "^9.3.1",
|
||||
"react": "^16.4.1",
|
||||
"react-dom": "^16.4.1",
|
||||
"react-infinite-calendar": "^2.3.1",
|
||||
"react-router-dom": "^4.3.1",
|
||||
"react-scripts": "1.1.4",
|
||||
"shuffle-array": "^1.0.1",
|
||||
"sql.js": "^0.5.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject",
|
||||
"less": "less-watch-compiler ./src_less ./public/ main.less"
|
||||
}
|
||||
}
|
Binary file not shown.
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is added to the
|
||||
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<link rel="stylesheet" href="%PUBLIC_URL%/main.css">
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,895 @@
|
|||
@font-face {
|
||||
font-family: 'Exo';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Exo Regular'), local('Exo-Regular'), url(/font/exo.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Exo', monospace !important;
|
||||
}
|
||||
#container {
|
||||
display: flex;
|
||||
}
|
||||
#nav {
|
||||
height: 100vh;
|
||||
width: 200px;
|
||||
line-height: 50px;
|
||||
box-shadow: 0 0 5px #454545;
|
||||
background-color: #3C6F9B;
|
||||
color: #fff;
|
||||
}
|
||||
#nav .header {
|
||||
background-color: #004F5B;
|
||||
height: 98px;
|
||||
line-height: 98px;
|
||||
font-size: 41px;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 3px #000000;
|
||||
}
|
||||
#nav button {
|
||||
display: block;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
width: calc(100% - 10px);
|
||||
background: none;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
border-bottom: 3px solid;
|
||||
border-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
#nav button:hover {
|
||||
border-color: white;
|
||||
}
|
||||
#content {
|
||||
width: calc(100% - 200px);
|
||||
}
|
||||
#content > div {
|
||||
box-shadow: 0px 0px 5px #454545;
|
||||
}
|
||||
#editor-frame {
|
||||
display: flex;
|
||||
}
|
||||
#editor-frame #mask {
|
||||
width: 100%;
|
||||
}
|
||||
#editor-frame #mask .header {
|
||||
display: block;
|
||||
min-height: 98px;
|
||||
background-color: #004F5B;
|
||||
}
|
||||
#editor-frame #mask .lower-header {
|
||||
height: 49px;
|
||||
display: block;
|
||||
background-color: #004F5B;
|
||||
}
|
||||
#editor-frame #mask .inputGroup {
|
||||
font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
padding: 10px;
|
||||
}
|
||||
#editor-frame #mask .inputGroup .input {
|
||||
border-bottom: 1px solid #a2a2a2;
|
||||
padding: 5px;
|
||||
}
|
||||
#editor-frame #mask .inputGroup label {
|
||||
display: block;
|
||||
}
|
||||
#editor-frame #mask .inputGroup input,
|
||||
#editor-frame #mask .inputGroup textarea {
|
||||
width: 100%;
|
||||
font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
input {
|
||||
padding: 5px;
|
||||
height: 34px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#generator-frame textarea {
|
||||
min-height: 337px;
|
||||
min-width: 604px;
|
||||
}
|
||||
#generator-frame .rc-tabs-tabpane {
|
||||
vertical-align: top;
|
||||
}
|
||||
button.btn,
|
||||
button {
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
background: #FFF;
|
||||
border: 3px solid #004F5B;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
button.btn.success,
|
||||
button.success {
|
||||
border-color: #62D6CE;
|
||||
background: #62D6CE;
|
||||
color: #F9F9E8;
|
||||
}
|
||||
button.btn.success:hover,
|
||||
button.success:hover {
|
||||
border-color: #EDD1A1;
|
||||
background: #62D6CE;
|
||||
}
|
||||
#generator-frame .header {
|
||||
height: 98px;
|
||||
background-color: #004F5B;
|
||||
color: #FFF;
|
||||
line-height: 98px;
|
||||
padding: 0 25px;
|
||||
font-size: 30px;
|
||||
}
|
||||
/*
|
||||
* Range selection styles
|
||||
*/
|
||||
.Cal__Day__root {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 14.28571%;
|
||||
list-style: none;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.Cal__Day__root:first-child {
|
||||
position: relative;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__enabled.Cal__Day__highlighted {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__enabled.Cal__Day__highlighted:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-top: -26px;
|
||||
margin-left: -26px;
|
||||
border-radius: 50%;
|
||||
background-color: #EFEFEF;
|
||||
z-index: -1;
|
||||
opacity: 1;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__enabled:active {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__enabled:active:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-top: -26px;
|
||||
margin-left: -26px;
|
||||
border-radius: 50%;
|
||||
background-color: #EFEFEF;
|
||||
z-index: -1;
|
||||
opacity: 1;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__enabled:hover {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__enabled:hover:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-top: -26px;
|
||||
margin-left: -26px;
|
||||
border-radius: 50%;
|
||||
background-color: #EFEFEF;
|
||||
z-index: -1;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__today {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__today > span {
|
||||
color: #3d3d3d;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__today:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-top: -26px;
|
||||
margin-left: -26px;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0 0 0 1px;
|
||||
z-index: -1;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__today.Cal__Day__disabled > span {
|
||||
color: #AAA;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__today.Cal__Day__disabled:before {
|
||||
box-shadow: inset 0 0 0 1px #BBB;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__selected {
|
||||
position: relative;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__selected > .Cal__Day__month {
|
||||
display: none;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__selected > .Cal__Day__year {
|
||||
display: none;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__selected:before {
|
||||
display: none;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__selected .Cal__Day__selection {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-top: -26px;
|
||||
margin-left: -26px;
|
||||
border-radius: 50%;
|
||||
line-height: 56px;
|
||||
z-index: 2;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__selected .Cal__Day__selection .Cal__Day__month {
|
||||
top: 9px;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__selected .Cal__Day__selection .Cal__Day__day {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__disabled {
|
||||
color: #AAA;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.Cal__Day__month {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
top: 5px;
|
||||
}
|
||||
.Cal__Day__year {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
bottom: 5px;
|
||||
}
|
||||
.Cal__Day__range.Cal__Day__selected.Cal__Day__start:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
height: 52px;
|
||||
margin-top: -26px;
|
||||
box-shadow: inset 56px 56px;
|
||||
right: 0;
|
||||
}
|
||||
.Cal__Day__range.Cal__Day__selected.Cal__Day__start .Cal__Day__selection {
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
}
|
||||
.Cal__Day__range.Cal__Day__selected.Cal__Day__end:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
height: 52px;
|
||||
margin-top: -26px;
|
||||
box-shadow: inset 56px 56px;
|
||||
left: 0;
|
||||
}
|
||||
.Cal__Day__range.Cal__Day__selected.Cal__Day__end .Cal__Day__selection {
|
||||
border-top-right-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
color: inherit !important;
|
||||
background-color: #FFF !important;
|
||||
border: 2px solid;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.Cal__Day__range.Cal__Day__selected.Cal__Day__end .Cal__Day__selection .Cal__Day__day {
|
||||
top: 4px;
|
||||
}
|
||||
.Cal__Day__range.Cal__Day__selected.Cal__Day__disabled .Cal__Day__selection.Cal__Day__selection {
|
||||
background-color: #EEE !important;
|
||||
}
|
||||
.Cal__Day__range.Cal__Day__selected.Cal__Day__disabled .Cal__Day__selection.Cal__Day__selection .Cal__Day__day {
|
||||
color: #AAA;
|
||||
font-weight: 300;
|
||||
}
|
||||
.Cal__Day__range.Cal__Day__selected.Cal__Day__disabled .Cal__Day__selection.Cal__Day__selection .Cal__Day__month {
|
||||
color: #AAA;
|
||||
font-weight: 300;
|
||||
}
|
||||
.Cal__Day__range.Cal__Day__selected.Cal__Day__start.Cal__Day__end:after {
|
||||
display: none;
|
||||
}
|
||||
.Cal__Day__range.Cal__Day__selected.Cal__Day__betweenRange .Cal__Day__selection {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 0;
|
||||
}
|
||||
.Cal__Day__range.Cal__Day__selected.Cal__Day__betweenRange .Cal__Day__day {
|
||||
top: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.Cal__Day__range.Cal__Day__selected.Cal__Day__betweenRange .Cal__Day__month {
|
||||
display: none;
|
||||
}
|
||||
.Cal__Container__root {
|
||||
position: relative;
|
||||
display: table;
|
||||
z-index: 1;
|
||||
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-weight: 300;
|
||||
outline: none;
|
||||
text-align: left;
|
||||
}
|
||||
.Cal__Container__root.Cal__Container__landscape {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.Cal__Container__root.Cal__Container__landscape .Cal__Container__wrapper {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
.Cal__Container__listWrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #FFF;
|
||||
}
|
||||
.Cal__Header__root {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
min-height: 98px;
|
||||
padding: 20px;
|
||||
line-height: 1.3;
|
||||
font-weight: 400;
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
.Cal__Header__root.Cal__Header__landscape {
|
||||
align-items: flex-start;
|
||||
min-width: 200px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
.Cal__Header__root.Cal__Header__landscape .Cal__Header__dateWrapper.Cal__Header__day {
|
||||
flex-grow: 1;
|
||||
height: 76px;
|
||||
}
|
||||
.Cal__Header__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.Cal__Header__wrapper.Cal__Header__blank {
|
||||
height: 58px;
|
||||
line-height: 58px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 18px;
|
||||
cursor: default;
|
||||
}
|
||||
.Cal__Header__dateWrapper {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.Cal__Header__dateWrapper.Cal__Header__active {
|
||||
color: white;
|
||||
}
|
||||
.Cal__Header__dateWrapper.Cal__Header__day {
|
||||
height: 38px;
|
||||
font-size: 36px;
|
||||
line-height: 36px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.Cal__Header__dateWrapper.Cal__Header__year {
|
||||
height: 20px;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.Cal__Header__date {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.Cal__Header__range {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.Cal__Header__range .Cal__Header__dateWrapper {
|
||||
overflow: visible;
|
||||
}
|
||||
.Cal__Header__range .Cal__Header__wrapper:first-child:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: -50px;
|
||||
margin-left: -50px;
|
||||
border-top: 100px solid transparent;
|
||||
border-bottom: 100px solid transparent;
|
||||
border-left: 60px solid;
|
||||
color: rgba(255, 255, 255, 0.15);
|
||||
transform: translateX(1px);
|
||||
}
|
||||
.Cal__Header__range .Cal__Header__wrapper:first-child:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: -50px;
|
||||
margin-left: -50px;
|
||||
border-top: 100px solid transparent;
|
||||
border-bottom: 100px solid transparent;
|
||||
border-left: 60px solid;
|
||||
}
|
||||
.Cal__Header__range .Cal__Header__wrapper:last-child {
|
||||
margin-left: 60px;
|
||||
}
|
||||
.Cal__Header__range .Cal__Header__wrapper .Cal__Header__date {
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
}
|
||||
.Cal__Today__root {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
padding: 6px;
|
||||
box-sizing: border-box;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
font-weight: 500;
|
||||
line-height: 0;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
.Cal__Today__root .Cal__Today__chevron {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
margin-left: 5px;
|
||||
transform: rotate(270deg);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.Cal__Today__root.Cal__Today__show {
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
.Cal__Today__root.Cal__Today__show .Cal__Today__chevron {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.Cal__Today__root.Cal__Today__chevronUp .Cal__Today__chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.Cal__Today__root.Cal__Today__chevronDown .Cal__Today__chevron {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
.Cal__MonthList__root {
|
||||
width: 100% !important;
|
||||
background-color: #FFF;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.Cal__MonthList__root.Cal__MonthList__scrolling > div {
|
||||
pointer-events: none;
|
||||
}
|
||||
.Cal__MonthList__root.Cal__MonthList__scrolling label {
|
||||
opacity: 1;
|
||||
}
|
||||
.Cal__Weekdays__root {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.Cal__Weekdays__day {
|
||||
padding: 15px 0;
|
||||
flex-basis: 14.28571%;
|
||||
flex-grow: 1;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
.Cal__Years__root {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
.Cal__Years__root:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 50px;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
.Cal__Years__root:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 50px;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
|
||||
}
|
||||
.Cal__Years__list {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.Cal__Years__list.Cal__Years__center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.Cal__Years__year {
|
||||
display: flex;
|
||||
padding: 0 20px;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.Cal__Years__year label {
|
||||
flex-basis: 42%;
|
||||
}
|
||||
.Cal__Years__year label span {
|
||||
flex-shrink: 0;
|
||||
color: #333;
|
||||
}
|
||||
.Cal__Years__year ol {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.Cal__Years__year ol li {
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
color: #444;
|
||||
font-weight: 400;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.Cal__Years__year ol li:hover {
|
||||
background-color: #EFEFEF;
|
||||
}
|
||||
.Cal__Years__year ol li.Cal__Years__currentMonth {
|
||||
border: 1px solid;
|
||||
}
|
||||
.Cal__Years__year ol li.Cal__Years__selected {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: blue;
|
||||
color: #FFF !important;
|
||||
border: 0;
|
||||
}
|
||||
.Cal__Years__year ol li.Cal__Years__disabled {
|
||||
cursor: not-allowed;
|
||||
color: #AAA;
|
||||
}
|
||||
.Cal__Years__year ol li.Cal__Years__disabled:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
.Cal__Years__year:hover {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.Cal__Years__year:hover label > span {
|
||||
color: inherit;
|
||||
}
|
||||
.Cal__Years__year.Cal__Years__withMonths {
|
||||
border-bottom: 1px solid #E9E9E9;
|
||||
}
|
||||
.Cal__Years__year.Cal__Years__withMonths label {
|
||||
height: 88px;
|
||||
padding-top: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.Cal__Years__year.Cal__Years__active {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 32px;
|
||||
}
|
||||
.Cal__Years__year.Cal__Years__active label > span {
|
||||
color: inherit;
|
||||
}
|
||||
.Cal__Years__year.Cal__Years__currentYear {
|
||||
position: relative;
|
||||
}
|
||||
.Cal__Years__year.Cal__Years__currentYear label > span {
|
||||
min-width: 50px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 3px solid;
|
||||
}
|
||||
.Cal__Years__year.Cal__Years__currentYear.Cal__Years__active label > span {
|
||||
min-width: 85px;
|
||||
}
|
||||
.Cal__Years__year.Cal__Years__first {
|
||||
padding-top: 40px;
|
||||
}
|
||||
.Cal__Years__year.Cal__Years__last {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
.Cal__Animation__enter {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
.Cal__Animation__enter.Cal__Animation__enterActive {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.Cal__Animation__leave {
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
.Cal__Animation__leave.Cal__Animation__leaveActive {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
.Cal__Slider__root {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.Cal__Slider__slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 20px 65px;
|
||||
}
|
||||
.Cal__Slider__slide:first-child {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.Cal__Slider__wrapper {
|
||||
height: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.Cal__Slider__arrow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.Cal__Slider__arrow svg {
|
||||
width: 15px;
|
||||
}
|
||||
.Cal__Slider__arrow:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.Cal__Slider__arrowRight {
|
||||
right: 0;
|
||||
}
|
||||
.Cal__Slider__arrowLeft {
|
||||
left: 0;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.Cal__transition__enter {
|
||||
opacity: 0;
|
||||
}
|
||||
.Cal__transition__enterActive {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.Cal__transition__leave {
|
||||
opacity: 1;
|
||||
}
|
||||
.Cal__transition__leaveActive {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.Cal__Month__rows {
|
||||
position: relative;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.05) 100%);
|
||||
}
|
||||
.Cal__Month__row {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.Cal__Month__row:first-child {
|
||||
text-align: right;
|
||||
}
|
||||
.Cal__Month__row:first-child li {
|
||||
background-color: #FFF;
|
||||
box-shadow: 0 -1px 0 #E9E9E9;
|
||||
}
|
||||
.Cal__Month__row:nth-child(2) {
|
||||
box-shadow: 0 -1px 0 #E9E9E9;
|
||||
}
|
||||
.Cal__Month__row.Cal__Month__partial:first-child li:first-child {
|
||||
box-shadow: 0px -1px 0 #E9E9E9, inset 1px 0 0 #E9E9E9;
|
||||
}
|
||||
.Cal__Month__row.Cal__Month__partial:last-of-type li {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.Cal__Month__label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.Cal__Month__label > span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.Cal__Month__label.Cal__Month__partialFirstRow {
|
||||
top: 56px;
|
||||
}
|
||||
.rc-tabs {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.rc-tabs .rc-tabs-ink-bar {
|
||||
display: none !important;
|
||||
}
|
||||
.rc-tabs .rc-tabs-nav {
|
||||
display: flex;
|
||||
background-color: #3C6F9B;
|
||||
color: #FFF;
|
||||
font-size: 15px;
|
||||
height: 49px;
|
||||
line-height: 33px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.rc-tabs .rc-tabs-nav .rc-tabs-tab {
|
||||
width: auto;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.rc-tabs .rc-tabs-nav .rc-tabs-tab:hover {
|
||||
background-color: #003942;
|
||||
}
|
||||
.rc-tabs .rc-tabs-content {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.rc-tabs .rc-tabs-content .rc-tabs-tabpane {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
#fileloader-frame {
|
||||
background: rgba(0, 0, 0, 0.61);
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
left: 0;
|
||||
}
|
||||
#fileloader-frame button {
|
||||
width: 100%;
|
||||
}
|
||||
#fileloader-frame .contents {
|
||||
border: 1px solid;
|
||||
width: 300px;
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
left: calc(50% - 160px);
|
||||
background-color: #FFF;
|
||||
box-shadow: 1px 1px 1px #454545;
|
||||
padding: 10px;
|
||||
}
|
||||
#print-frame .header {
|
||||
height: 98px;
|
||||
background-color: #004F5B;
|
||||
color: #FFF;
|
||||
display: flex;
|
||||
}
|
||||
#print-frame .header div {
|
||||
vertical-align: middle;
|
||||
line-height: 100px;
|
||||
margin: 0 5px 0px 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#print-frame #pdf {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - 102px);
|
||||
border: none;
|
||||
}
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
}
|
||||
],
|
||||
"start_url": "./index.html",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
|
@ -0,0 +1,133 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style type="text/css">
|
||||
html {
|
||||
background: #eaeaea;
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
font-size: 3mm;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 0.1mm solid black;
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
font-size: 3mm;
|
||||
border-spacing:0;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
flex-flow: row-reverse;
|
||||
}
|
||||
|
||||
.nachweis {
|
||||
margin-top: 2mm;
|
||||
}
|
||||
|
||||
.unterschrift {
|
||||
margin-top: 2mm;
|
||||
}
|
||||
|
||||
.height {
|
||||
padding: 10mm;
|
||||
}
|
||||
|
||||
.bheight {
|
||||
padding: 100px;
|
||||
}
|
||||
|
||||
.bemerkung {}
|
||||
|
||||
.bericht {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
.bericht table {
|
||||
width: 210mm;
|
||||
margin-top: 2mm;
|
||||
}
|
||||
|
||||
.bericht td:nth-child(1),
|
||||
.bericht th:nth-child(1) {
|
||||
width: 28mm;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bericht td:nth-child(2),
|
||||
.bericht th:nth-child(2) {
|
||||
width: 28mm;
|
||||
overflow: hidden;
|
||||
}
|
||||
/*●*/
|
||||
|
||||
td,
|
||||
th {
|
||||
vertical-align: top;
|
||||
padding: 2mm 2mm 2mm 2mm;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.bericht ul {
|
||||
padding: 0mm 5mm;
|
||||
-webkit-margin-before: 1em;
|
||||
-webkit-margin-after: 1mm;
|
||||
-webkit-margin-start: 0mm;
|
||||
-webkit-margin-end: 0mm;
|
||||
-webkit-padding-start: 5mm;
|
||||
}
|
||||
.task {
|
||||
display: list-item;
|
||||
list-style-position: initial;
|
||||
margin-left: 5mm;
|
||||
list-style-type: none;
|
||||
}
|
||||
.task::before{
|
||||
content: "● ";
|
||||
font-size: 2mm;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.page {
|
||||
width: 210.1mm;
|
||||
min-height: 269.9mm;
|
||||
padding: 20mm;
|
||||
margin: 10mm auto;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media print {
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 210mm;
|
||||
min-height: 297mm;
|
||||
background: #FFF;
|
||||
}
|
||||
.page {
|
||||
page-break-before : always;
|
||||
box-shadow: 0 0 0 transparent;
|
||||
background: #FFF;
|
||||
width: 210.1mm;
|
||||
height: 269.9mm;
|
||||
margin: 0;
|
||||
padding: 20mm;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
|
@ -0,0 +1,100 @@
|
|||
{% for id, week in weeks %}
|
||||
<div class="page">
|
||||
<div class="name">
|
||||
<table border=1 style="width:100%">
|
||||
|
||||
<tr>
|
||||
<th style="width:30mm">Name, Vorname:</th>
|
||||
<td>
|
||||
<p id="nv">{{name}}</p>
|
||||
</td>
|
||||
</td>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<div class="nachweis">
|
||||
<table border=1 style="width:100%">
|
||||
|
||||
<tr>
|
||||
<th>Ausbildungsnachweis Nr.:</th>
|
||||
<td>
|
||||
<p id="num">{{week.num}}</p>
|
||||
</td>
|
||||
<td>Von:</td>
|
||||
<td>
|
||||
<p id="ws">{{week.start}}</p>
|
||||
</td>
|
||||
<td>Bis:</td>
|
||||
<td>
|
||||
<p id="we">{{week.end}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="unterschrift">
|
||||
<table border="1" style="width: 100%;">
|
||||
<tr>
|
||||
<th style="width:50%;text-align:left"> Für die Richtigkeit aller Angaben:</th>
|
||||
<th style="width:50%;text-align:left"> Für die Richtigkeit aller Angaben über die betriebliche Ausbildung:</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Auszubildender </br>
|
||||
Unterschrift + Datum</td>
|
||||
<td> Ausbilder </br> Unterschrift + Datum </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="height">{{unterschrift}}</td>
|
||||
<td class="height"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="bericht">
|
||||
<table border="1" style="width: 100%;">
|
||||
<tr>
|
||||
<th>
|
||||
Tag
|
||||
</th>
|
||||
<th>
|
||||
Von - Bis
|
||||
</th>
|
||||
<th>
|
||||
Tätigkeiten
|
||||
</th>
|
||||
</tr>
|
||||
{% for day in week.data %}
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<p id="day">{{day[1]}}</p>
|
||||
</td>
|
||||
<td>
|
||||
<p id="time">{{day[2]}} - {{day[4]}}</p>
|
||||
</td>
|
||||
<td>
|
||||
{% for task in day[5] %}
|
||||
<div class="task">{{task}}</div>
|
||||
{% endfor %}
|
||||
</td>
|
||||
<!-- Tätigkeit -->
|
||||
</tr>
|
||||
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Bemerkung des Ausbilders:</p>
|
||||
|
||||
<div class="bemerkung">
|
||||
<table border="1" style="width: 100%;">
|
||||
<tr>
|
||||
<td>Bemerkung über ausgeführte Ausbildungsarbeiten, Zwischenprüfungen, Ausbildungslehrgänge, Ausbildungsnachweis
|
||||
usw.</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
|
@ -0,0 +1,28 @@
|
|||
.App {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #222;
|
||||
height: 150px;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-title {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.App-intro {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
|
@ -0,0 +1,17 @@
|
|||
import React, { Component } from 'react';
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
|
||||
import {Nav} from './jsx/ui/nav';
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Nav/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<App />, div);
|
||||
ReactDOM.unmountComponentAtNode(div);
|
||||
});
|
|
@ -0,0 +1,5 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import registerServiceWorker from './registerServiceWorker';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
registerServiceWorker();
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
|
||||
import {FileLoader} from './ui/fileLoader';
|
||||
import {Nav} from './ui/nav';
|
||||
|
||||
|
||||
class Welcome extends React.Component {
|
||||
render() {
|
||||
return <h1>Hello, {this.props.name}</h1>;
|
||||
}
|
||||
}
|
||||
const element = (
|
||||
<div >
|
||||
<FileLoader/>
|
||||
</div>
|
||||
);
|
||||
ReactDOM.render(
|
||||
element,
|
||||
document.getElementById('root')
|
||||
);
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
export class Log{
|
||||
static debug(txt){
|
||||
console.debug('%cDEBUG: '+txt, 'background: #222; color: #bada55');
|
||||
}
|
||||
}
|
|
@ -0,0 +1,243 @@
|
|||
import {Log} from './debug';
|
||||
|
||||
const SQL = require('sql.js')
|
||||
|
||||
|
||||
export class DB{
|
||||
static cdb;
|
||||
static loaded = false;
|
||||
static loadedCB = [];
|
||||
static newDB(){
|
||||
Log.debug('create new database');
|
||||
DB.cdb = new SQL.Database();
|
||||
DB.cdb.exec(
|
||||
`CREATE TABLE settings (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
ke TEXT not null,
|
||||
val TEXT not null
|
||||
);
|
||||
CREATE TABLE days (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
date DATETIME ,
|
||||
startTime DATETIME ,
|
||||
breakTime INTEGER ,
|
||||
endTime DATETIME ,
|
||||
taskList TEXT
|
||||
);
|
||||
CREATE TABLE tasks (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
taskName TEXT not NULL
|
||||
);
|
||||
INSERT INTO settings (ke,val)
|
||||
VALUES ('name','Max');
|
||||
INSERT INTO settings (ke,val)
|
||||
VALUES ('start','2018-08-01');
|
||||
`)
|
||||
DB.loaded = true;
|
||||
DB.__load()
|
||||
DB.storeLocalStorage()
|
||||
}
|
||||
static storeLocalStorage(){
|
||||
var data = DB.cdb.export();
|
||||
var buffer = new Buffer(data);
|
||||
var blob = new Blob([buffer]);
|
||||
var reader = new FileReader();
|
||||
reader.onload = function() {
|
||||
localStorage.setItem('storage',reader.result)
|
||||
}
|
||||
reader.readAsBinaryString(blob);
|
||||
}
|
||||
static loadLocalStorage(){
|
||||
var i, l, d, array;
|
||||
array = new Uint8Array(localStorage.getItem('storage'));
|
||||
for (var i = 0; i < l; i++){
|
||||
array[i] = d.charCodeAt(i);
|
||||
}
|
||||
DB.loadDB(array);
|
||||
DB.loaded = true;
|
||||
DB.__load()
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @param {type:Uint8Array} file Uint8Array
|
||||
*/
|
||||
static loadDB(file){
|
||||
Log.debug('load database');
|
||||
|
||||
DB.cdb = new SQL.Database(file);
|
||||
DB.storeLocalStorage()
|
||||
DB.loaded = true;
|
||||
DB.__load()
|
||||
return "";
|
||||
}
|
||||
static __load(){
|
||||
Log.debug('DB onload EVENT');
|
||||
for(var l in DB.loadedCB){
|
||||
DB.loadedCB[l]();
|
||||
}
|
||||
}
|
||||
static onLoad(cb){
|
||||
Log.debug('added DB onload EVENT');
|
||||
DB.loadedCB.push(cb);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
static exportDB(){
|
||||
Log.debug('export database');
|
||||
var data = DB.cdb.export();
|
||||
var buffer = new Buffer(data);
|
||||
console.log(buffer);
|
||||
var blob = new Blob([buffer],{type:'application/x-sqlite3'});
|
||||
console.log(blob);
|
||||
console.log(window.URL.createObjectURL(blob));
|
||||
var link = document.createElement('a');
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
var fileName = "wbm.sqlite";
|
||||
link.download = fileName;
|
||||
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(link);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {*} date
|
||||
*/
|
||||
static loadDate(date){
|
||||
//var re = DB.cdb.exec("SELECT * FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE='BASE TABLE'");
|
||||
//console.log(re)
|
||||
console.log(date)
|
||||
Log.debug('load from date:'+date.getTime())
|
||||
var sql = `SELECT * FROM days WHERE date=:date;`;
|
||||
var stmt = DB.cdb.prepare(sql);
|
||||
var res = stmt.getAsObject({":date":date.getTime()})
|
||||
stmt.free();
|
||||
Log.debug(JSON.stringify(res));
|
||||
|
||||
if(Object.keys(res).length === 0){
|
||||
return {breakTime: 0, date: null,startTime:null, endTime: null, taskList:[]}
|
||||
}else{
|
||||
var tasks = res.taskList.split(',');
|
||||
sql = `SELECT * FROM tasks WHERE id=:id`;
|
||||
for ( var task in tasks){
|
||||
stmt = DB.cdb.prepare(sql);
|
||||
tasks[task] = stmt.getAsObject({":id":tasks[task]}).taskName;
|
||||
stmt.free();
|
||||
}
|
||||
res.taskList = tasks;
|
||||
return res;
|
||||
}
|
||||
}
|
||||
static saveDate(args){
|
||||
Log.debug('save date');
|
||||
Log.debug(JSON.stringify(args))
|
||||
var sql;
|
||||
var stmt;
|
||||
var res;
|
||||
var tasks = args.taskList;
|
||||
var taskss = []
|
||||
console.log(tasks);
|
||||
for(var t in tasks){
|
||||
if(typeof tasks[t] === 'undefined'){
|
||||
continue;
|
||||
}
|
||||
tasks[t] = tasks[t].trim();
|
||||
sql = `SELECT * FROM tasks WHERE taskName=:task`;
|
||||
stmt = DB.cdb.prepare(sql);
|
||||
res = stmt.getAsObject({':task':tasks[t]});
|
||||
stmt.free();
|
||||
console.log(res);
|
||||
if(Object.keys(res).length === 0){
|
||||
sql = `INSERT INTO tasks(taskName) VALUES(:task);`;
|
||||
stmt = DB.cdb.prepare(sql);
|
||||
res = stmt.getAsObject(
|
||||
{
|
||||
":task":tasks[t]
|
||||
}
|
||||
)
|
||||
stmt.free()
|
||||
sql = `SELECT * FROM tasks WHERE taskName=:task`;
|
||||
stmt = DB.cdb.prepare(sql);
|
||||
res = stmt.getAsObject({':task':tasks[t]});
|
||||
stmt.free();
|
||||
console.log(res);
|
||||
}
|
||||
taskss[t]= res.id;
|
||||
|
||||
}
|
||||
sql = `SELECT * FROM days WHERE date=:date;`;
|
||||
stmt = DB.cdb.prepare(sql);
|
||||
console.log(args);
|
||||
res = stmt.getAsObject({":date":args.date})
|
||||
stmt.free()
|
||||
|
||||
if(Object.keys(res).length === 0){
|
||||
Log.debug('added new entry');
|
||||
Log.debug(JSON.stringify(args))
|
||||
sql = `INSERT INTO days(date,startTime,breakTime,endTime,taskList) VALUES(:date,:startTime,:breakTime,:endTime,:taskList);`;
|
||||
stmt = DB.cdb.prepare(sql);
|
||||
res = stmt.getAsObject(
|
||||
{
|
||||
":date":args.date,
|
||||
":startTime":args.startTime,
|
||||
":breakTime":args.breakTime,
|
||||
":endTime":args.endTime,
|
||||
":taskList":taskss.join()
|
||||
}
|
||||
)
|
||||
stmt.free()
|
||||
}else{
|
||||
Log.debug('update entry');
|
||||
Log.debug(JSON.stringify(args))
|
||||
sql = `UPDATE days SET startTime=:startTime,breakTime=:breakTime,endTime=:endTime,taskList=:taskList WHERE date=:date;`;
|
||||
stmt = DB.cdb.prepare(sql);
|
||||
res = stmt.getAsObject(
|
||||
{
|
||||
":date":args.date,
|
||||
":startTime":args.startTime,
|
||||
":breakTime":args.breakTime,
|
||||
":endTime":args.endTime,
|
||||
":taskList":taskss.join()
|
||||
}
|
||||
)
|
||||
Log.debug(res);
|
||||
stmt.free()
|
||||
}
|
||||
}
|
||||
static handleTasks(){
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
static loadSettings(key){
|
||||
var sql = `SELECT * FROM settings WHERE ke=:key`;
|
||||
var stmt = DB.cdb.prepare(sql);
|
||||
var res = stmt.getAsObject({':key':key});
|
||||
stmt.free();
|
||||
return res;
|
||||
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @param {*} obj name: Name , start: Date ( 2018-08-01 )
|
||||
*/
|
||||
static saveSettings(obj){
|
||||
var sql = `UPDATE settings SET val=:name WHERE ke="name"`;
|
||||
var stmt = DB.cdb.prepare(sql);
|
||||
stmt.getAsObject({':name':obj.name});
|
||||
stmt.free();
|
||||
|
||||
sql = `UPDATE settings SET val=:start WHERE ke="start"`;
|
||||
stmt = DB.cdb.prepare(sql);
|
||||
stmt.getAsObject({':start':obj.start});
|
||||
stmt.free();
|
||||
return "";
|
||||
}
|
||||
}
|
|
@ -0,0 +1,25 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
const nunjucks = require('nunjucks');
|
||||
const jsPDF = require('jspdf');
|
||||
/*
|
||||
var html = nunjucks.renderString('Hello {{ username }}', { username: 'James' });
|
||||
|
||||
console.log(html);
|
||||
|
||||
var doc = new jsPDF()
|
||||
|
||||
doc.text('Hello world!', 10, 10)
|
||||
doc.save('a4.pdf')
|
||||
*/
|
||||
|
||||
export class Print extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div id="fileloader-frame">
|
||||
</div>);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,189 @@
|
|||
import React from 'react';
|
||||
import InfiniteCalendar from 'react-infinite-calendar';
|
||||
import {DB} from '../static/storage'
|
||||
import { Log } from '../static/debug';
|
||||
//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
|
||||
|
||||
//const { ipcRenderer} = require('electron');
|
||||
const moment = require('moment');
|
||||
|
||||
var me = null;
|
||||
|
||||
/*
|
||||
#2C3A47;
|
||||
@background-2:#596571;
|
||||
*/
|
||||
|
||||
const cal_theme = {
|
||||
accentColor: '#3C6F9B',
|
||||
floatingNav: {
|
||||
background: '#2C3A47',
|
||||
chevron: '#ffb142',
|
||||
color: '#FFF',
|
||||
},
|
||||
headerColor: '#004F5B',
|
||||
selectionColor: '#3C6F9B',
|
||||
textColor: {
|
||||
active: '#FFF',
|
||||
default: '#333',
|
||||
},
|
||||
todayColor: '#ffb142',
|
||||
weekdayColor: '#3C6F9B',
|
||||
}
|
||||
|
||||
export class Calender extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
// Render the Calendar
|
||||
this.cal_date = new Date();
|
||||
this.state = {
|
||||
breakTime: 0,
|
||||
date:new Date(),
|
||||
endTime:null,
|
||||
startTime:null,
|
||||
taskList:[]
|
||||
}
|
||||
this.startTimeChange = this.startTimeChange.bind(this);
|
||||
this.endTimeChange = this.endTimeChange.bind(this);
|
||||
this.breakTimeChange = this.breakTimeChange.bind(this);
|
||||
this.taskListChange = this.taskListChange.bind(this);
|
||||
this.getDate = this.getDate.bind(this)
|
||||
this.save = this.save.bind(this);
|
||||
me = this;
|
||||
|
||||
this.today = new Date();
|
||||
this.lastWeek = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 7);
|
||||
|
||||
this.worktime = 0;
|
||||
/*
|
||||
@TODO LOAD CURRENT DATE
|
||||
ipcRenderer.on('loadDate-reply', (event, arg) => {
|
||||
//console.log(arg) // prints "pong"
|
||||
this.setState(
|
||||
arg.data
|
||||
)
|
||||
if(arg.data.date === null){
|
||||
this.setState({date:this.cal_date});
|
||||
}
|
||||
if(arg.data.startTime === null){
|
||||
this.setState({startTime:this.cal_date});
|
||||
}
|
||||
if(arg.data.endTime === null){
|
||||
this.setState({endTime:this.cal_date});
|
||||
}
|
||||
})
|
||||
*/
|
||||
}
|
||||
componentWillUnmount(){
|
||||
//ipcRenderer.removeAllListeners('loadDate-reply');
|
||||
}
|
||||
getDate(date){
|
||||
////console.log(me)
|
||||
me.cal_date = date;
|
||||
////console.log(new Date(date));
|
||||
//
|
||||
//ipcRenderer.send('loadDate', {date:date})
|
||||
var res = DB.loadDate(date)
|
||||
//console.log(res) // prints "pong"
|
||||
this.setState(
|
||||
res
|
||||
)
|
||||
if(res.date === null){
|
||||
this.setState({date:this.cal_date});
|
||||
}
|
||||
if(res.startTime === null){
|
||||
this.setState({startTime:this.cal_date});
|
||||
}
|
||||
if(res.endTime === null){
|
||||
this.setState({endTime:this.cal_date});
|
||||
}
|
||||
|
||||
}
|
||||
startTimeChange(e){
|
||||
//this.setState({startTime: e.target.value});
|
||||
var hm = e.target.value.split(':');
|
||||
this.setState({startTime: moment(this.state.date).set({hour:hm[0],minute:hm[1]}).unix()*1000});
|
||||
}
|
||||
endTimeChange(e){
|
||||
////console.log(e.target.value)
|
||||
var hm = e.target.value.split(':');
|
||||
////console.log(moment(this.state.date).set({hour:hm[0],minute:hm[1]}).format('HH:mm:ss'))
|
||||
this.setState({endTime: moment(this.state.date).set({hour:hm[0],minute:hm[1]}).unix()*1000 });
|
||||
}
|
||||
breakTimeChange(e){
|
||||
|
||||
this.setState({breakTime: e.target.value});
|
||||
}
|
||||
taskListChange(e){
|
||||
this.setState({taskList: e.target.value.split(',')});
|
||||
}
|
||||
save(){
|
||||
//console.log("Speichern")
|
||||
Log.debug(JSON.stringify(this.state))
|
||||
Log.debug(JSON.stringify({
|
||||
breakTime: this.state.breakTime,
|
||||
date:moment(this.state.date).unix()*1000,
|
||||
endTime:this.state.endTime,
|
||||
startTime:this.state.startTime,
|
||||
taskList:this.state.taskList
|
||||
}))
|
||||
DB.saveDate(
|
||||
{
|
||||
breakTime: this.state.breakTime,
|
||||
date:moment(this.state.date).unix()*1000,
|
||||
endTime:this.state.endTime,
|
||||
startTime:this.state.startTime,
|
||||
taskList:this.state.taskList
|
||||
}
|
||||
);
|
||||
//ipcRenderer.send('saveDate',s)
|
||||
}
|
||||
render() {
|
||||
var wk = 0;
|
||||
if(this.state.endTime !== null){
|
||||
try{
|
||||
wk = moment.duration(moment(this.state.endTime).diff(moment(this.state.startTime).subtract(-this.state.breakTime,'minutes')));
|
||||
//console.log('XD ',wk)
|
||||
wk = moment.utc(wk._milliseconds).format('HH:mm')
|
||||
}catch(e){
|
||||
//console.log(e)
|
||||
}
|
||||
}else{
|
||||
|
||||
}
|
||||
console.log(moment(this.state.date).diff(moment(DB.loadSettings('start').val),'week'));
|
||||
////console.log(moment(this.state.endTime).format('HH:mm:ss'))
|
||||
var loc = {blank: 'Datum auswählen...', headerFormat: 'ddd, MMM Do', todayLabel: { long: 'Heute', }, locale: require('date-fns/locale/de'), weekdays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'], weekStartsOn: 1 }
|
||||
return ( <div id="editor-frame">
|
||||
<div id="calender">
|
||||
<InfiniteCalendar selected = { this.today } theme={cal_theme} locale = { loc } onSelect={this.getDate}/>
|
||||
</div >
|
||||
<div id="mask">
|
||||
<div className="header">Editor</div>
|
||||
<div className="lower-header"></div>
|
||||
<div className="inputGroup">
|
||||
<div className="input">
|
||||
<label>Arbeitszeit :</label><input type="text" disable="true" value={wk}/>
|
||||
</div>
|
||||
<div className="input">
|
||||
<label>Anfangszeit:</label><input type="time" value={moment(this.state.startTime).format('HH:mm')} onChange={this.startTimeChange}/>
|
||||
</div>
|
||||
<div className="input">
|
||||
<label>Feierabend :</label><input type="time" value={moment(this.state.endTime).format('HH:mm')} onChange={this.endTimeChange}/>
|
||||
</div>
|
||||
<div className="input">
|
||||
<label>Pause :</label><input type="number" min="0" value={this.state.breakTime} onChange={this.breakTimeChange}/>
|
||||
</div>
|
||||
<div className="input">
|
||||
<label>Tätigkeiten</label>
|
||||
<label><sub>( mit Komma ',' getrennt ):</sub></label><br/><textarea value={this.state.taskList} onChange={this.taskListChange}></textarea>
|
||||
</div>
|
||||
<div className="input">
|
||||
<label></label><button className="btn success" onClick={this.save}>Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> );
|
||||
}
|
||||
}
|
|
@ -0,0 +1,77 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
export const Tabs = React.createClass ({
|
||||
displayName: 'Tabs',
|
||||
propTypes: {
|
||||
selected: React.PropTypes.number,
|
||||
children: React.PropTypes.oneOfType([
|
||||
React.PropTypes.array,
|
||||
React.PropTypes.element
|
||||
]).isRequired
|
||||
},
|
||||
getDefaultProps() {
|
||||
return {
|
||||
selected: 0
|
||||
};
|
||||
},
|
||||
getInitialState() {
|
||||
return {
|
||||
selected: this.props.selected
|
||||
};
|
||||
},
|
||||
handleClick(index, event) {
|
||||
event.preventDefault();
|
||||
this.setState({
|
||||
selected: index
|
||||
});
|
||||
},
|
||||
_renderTitles() {
|
||||
function labels(child, index) {
|
||||
let activeClass = (this.state.selected === index ? 'active' : '');
|
||||
return (
|
||||
<li key={index}>
|
||||
<a href="#"
|
||||
className={activeClass}
|
||||
onClick={this.handleClick.bind(this, index)}>
|
||||
{child.props.label}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<ul className="tabs__labels">
|
||||
{this.props.children.map(labels.bind(this))}
|
||||
</ul>
|
||||
);
|
||||
},
|
||||
_renderContent() {
|
||||
return (
|
||||
<div className="tabs__content">
|
||||
{this.props.children[this.state.selected]}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div className="tabs">
|
||||
{this._renderTitles()}
|
||||
{this._renderContent()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
export const Pane = React.createClass ({
|
||||
displayName: 'Pane',
|
||||
propTypes: {
|
||||
label: React.PropTypes.string.isRequired,
|
||||
children: React.PropTypes.element.isRequired
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
|
@ -0,0 +1,56 @@
|
|||
|
||||
import axios from 'axios'
|
||||
|
||||
export class Templates{
|
||||
static template = {
|
||||
header:"",
|
||||
wochenbericht:"",
|
||||
monatsbericht:"",
|
||||
arbeitszeiten:"",
|
||||
footer:""
|
||||
};
|
||||
static getTemplates(){
|
||||
axios.get('/templates/header.ptt')
|
||||
.then ((result) => {
|
||||
Templates.template.header = result.data;
|
||||
})
|
||||
.catch ((error) => {
|
||||
console.log(error);
|
||||
})
|
||||
axios.get('/templates/wochenbericht.ptt')
|
||||
.then ((result) => {
|
||||
|
||||
Templates.template.wochenbericht = result.data;
|
||||
})
|
||||
.catch ((error) => {
|
||||
console.log(error);
|
||||
})
|
||||
axios.get('/templates/monatsbericht.ptt')
|
||||
.then ((result) => {
|
||||
|
||||
Templates.template.monatsbericht = result.data;
|
||||
})
|
||||
.catch ((error) => {
|
||||
console.log(error);
|
||||
})
|
||||
axios.get('/templates/arbeitszeiten.ptt')
|
||||
.then ((result) => {
|
||||
|
||||
Templates.template.arbeitszeiten = result.data;
|
||||
})
|
||||
.catch ((error) => {
|
||||
console.log(error);
|
||||
})
|
||||
axios.get('/templates/footer.ptt')
|
||||
.then ((result) => {
|
||||
|
||||
Templates.template.footer = result.data;
|
||||
})
|
||||
.catch ((error) => {
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
printTimes(){
|
||||
return ``
|
||||
}
|
||||
}
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react';
|
||||
var entry = [];
|
||||
|
||||
export class Entrys extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div id="entrys">
|
||||
{Object.keys(entry).map((item, i) => (
|
||||
<li className="travelcompany-input" key={i}>
|
||||
<span className="input-label">key: {i} Name: {entry[item]}</span>
|
||||
</li>)
|
||||
)}
|
||||
</div>);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,122 @@
|
|||
|
||||
|
||||
import React from 'react';
|
||||
import {DB} from '../static/storage'
|
||||
//var SQL = require('sql.js');
|
||||
//const moment = require('moment');
|
||||
|
||||
|
||||
var BASE64_MARKER = ';base64,';
|
||||
|
||||
function convertDataURIToBinary(dataURI) {
|
||||
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
|
||||
var base64 = dataURI.substring(base64Index);
|
||||
var raw = window.atob(base64);
|
||||
var rawLength = raw.length;
|
||||
var array = new Uint8Array(new ArrayBuffer(rawLength));
|
||||
|
||||
for(var i = 0; i < rawLength; i++) {
|
||||
array[i] = raw.charCodeAt(i);
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
export class FileLoader extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleFileSelect = this.handleFileSelect.bind(this);
|
||||
this.createNew = this.createNew.bind(this);
|
||||
|
||||
}
|
||||
b64toBlob(b64Data, contentType, sliceSize) {
|
||||
contentType = contentType || '';
|
||||
sliceSize = sliceSize || 512;
|
||||
|
||||
var byteCharacters = atob(b64Data);
|
||||
var byteArrays = [];
|
||||
|
||||
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
|
||||
var slice = byteCharacters.slice(offset, offset + sliceSize);
|
||||
|
||||
var byteNumbers = new Array(slice.length);
|
||||
for (var i = 0; i < slice.length; i++) {
|
||||
byteNumbers[i] = slice.charCodeAt(i);
|
||||
}
|
||||
|
||||
var byteArray = new Uint8Array(byteNumbers);
|
||||
|
||||
byteArrays.push(byteArray);
|
||||
}
|
||||
|
||||
var blob = new Blob(byteArrays, {type: contentType});
|
||||
return blob;
|
||||
}
|
||||
handleFileSelect(evt) {
|
||||
var files = evt.target.files; // FileList object
|
||||
|
||||
// Loop through the FileList and render image files as thumbnails.
|
||||
for (var i = 0, f; f = files[i]; i++) {
|
||||
|
||||
// Only process image files.
|
||||
/*if (!f.type.match('image.*')) {
|
||||
continue;
|
||||
}*/
|
||||
console.log(f.type)
|
||||
var reader = new FileReader();
|
||||
|
||||
// Closure to capture the file information.
|
||||
var me = this;
|
||||
reader.onload = (function (theFile) {
|
||||
return function (e) {
|
||||
// Render thumbnail.
|
||||
console.log(e.target.result)
|
||||
console.log(theFile)
|
||||
var blob = me.b64toBlob(e.target.result.split('base64,')[1],theFile.type);
|
||||
console.log(blob)
|
||||
//var fi = new FileReader();
|
||||
//var f_ = fi.readAsDataURL(e.target.result);
|
||||
var uInt8Array = new Uint8Array(convertDataURIToBinary(e.target.result));
|
||||
|
||||
DB.loadDB(uInt8Array);
|
||||
//DB.loadDate('2018-06-25 22:00:00.000 +00:00');
|
||||
};
|
||||
})(f);
|
||||
|
||||
// Read in the image file as a data URL.
|
||||
reader.readAsDataURL(f);
|
||||
console.log(f)
|
||||
}
|
||||
}
|
||||
createNew(){
|
||||
DB.newDB();
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div id="fileloader-frame">
|
||||
<div className="contents">
|
||||
<button onClick={this.createNew}>Neue Wochenberichtsmappe</button>
|
||||
<hr/>
|
||||
<input type="file" id="files" name="files[]" onChange={this.handleFileSelect}/>
|
||||
<output id="list"></output>
|
||||
<hr/>
|
||||
Erstellt von:<br/><a rel="noopener noreferrer" target="_blank" href="https://lucajaents.ch">Luca Jäntsch</a>
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
||||
export class Export extends React.Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
|
||||
}
|
||||
}
|
||||
render(){
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
|
@ -0,0 +1,377 @@
|
|||
import React from 'react';
|
||||
import {DB} from '../static/storage';
|
||||
//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
|
||||
|
||||
const moment = require('moment');
|
||||
|
||||
const shuffle = function(array) {
|
||||
for (var i = array.length - 1; i > 0; i--) {
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
var temp = array[i];
|
||||
array[i] = array[j];
|
||||
array[j] = temp;
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const cal_theme = {
|
||||
accentColor: '#706fd3',
|
||||
floatingNav: {
|
||||
background: '#004F5B',
|
||||
chevron: '#ffb142',
|
||||
color: '#FFF',
|
||||
},
|
||||
headerColor: '#004F5B',
|
||||
selectionColor: '#706fd3',
|
||||
textColor: {
|
||||
active: '#FFF',
|
||||
default: '#333',
|
||||
},
|
||||
todayColor: '#ffb142',
|
||||
weekdayColor: '#004F5B',
|
||||
}
|
||||
var isoDays = [
|
||||
"mo", "tu", "we", "th", "fr", "sa", "su"
|
||||
]
|
||||
|
||||
export class Generator extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
start: Date(),
|
||||
stop: Date(),
|
||||
weeks: 0,
|
||||
tasks: "",
|
||||
activeDays: {
|
||||
mo: false,
|
||||
tu: false,
|
||||
we: false,
|
||||
th: false,
|
||||
fr: false,
|
||||
sa: false,
|
||||
su: false
|
||||
},
|
||||
tasksD: {
|
||||
mo: "",
|
||||
tu: "",
|
||||
we: "",
|
||||
th: "",
|
||||
fr: "",
|
||||
sa: "",
|
||||
su: ""
|
||||
},
|
||||
times: {
|
||||
mo: {
|
||||
start: "08:30",
|
||||
end: "17:30",
|
||||
break: 30
|
||||
},
|
||||
tu: {
|
||||
start: "08:30",
|
||||
end: "17:30",
|
||||
break: 30
|
||||
},
|
||||
we: {
|
||||
start: "08:30",
|
||||
end: "17:30",
|
||||
break: 30
|
||||
},
|
||||
th: {
|
||||
start: "08:30",
|
||||
end: "17:30",
|
||||
break: 30
|
||||
},
|
||||
fr: {
|
||||
start: "08:30",
|
||||
end: "15:00",
|
||||
break: 30
|
||||
},
|
||||
sa: {
|
||||
start: 0,
|
||||
end: 0,
|
||||
break: 0
|
||||
},
|
||||
su: {
|
||||
start: 0,
|
||||
end: 0,
|
||||
break: 0
|
||||
}
|
||||
},
|
||||
taskListGen: []
|
||||
}
|
||||
this.handleChangeStart = this.handleChangeStart.bind(this);
|
||||
this.handleChangeEnd = this.handleChangeEnd.bind(this);
|
||||
this.handleChangeTasks = this.handleChangeTasks.bind(this);
|
||||
this.generate = this.generate.bind(this);
|
||||
this.handleMo = this.handleMo.bind(this);
|
||||
|
||||
this.handleChangeDayStart = this.handleChangeDayStart.bind(this);
|
||||
this.handleChangeDayEnd = this.handleChangeDayEnd.bind(this);
|
||||
this.handleChangeDayBreak = this.handleChangeDayBreak.bind(this);
|
||||
/*ipcRenderer.send('loadTasks', {});
|
||||
ipcRenderer.once('loadedTasks', (event, args) => {
|
||||
console.log(args)
|
||||
})*/
|
||||
}
|
||||
handleChangeStart(e) {
|
||||
this.setState({
|
||||
start: e.target.value
|
||||
})
|
||||
}
|
||||
handleChangeEnd(e) {
|
||||
this.setState({
|
||||
stop: e.target.value
|
||||
})
|
||||
}
|
||||
displayWeeks() {
|
||||
moment(this.state.start).diff(moment(this.state.end));
|
||||
}
|
||||
handleChangeTasks(e) {
|
||||
this.setState({
|
||||
tasks: e.target.value
|
||||
});
|
||||
var taskList = e.target.value.split(/\r?\n/);
|
||||
for (var i = 0; i < taskList.length; i++) {
|
||||
if (taskList[i] === "" || typeof taskList[i].split(',')[1] === 'undefined' || taskList[i].split(',')[1] === "") {
|
||||
taskList.splice(i, 1);
|
||||
} else {
|
||||
taskList[i] = taskList[i].split(',');
|
||||
taskList[i] = {
|
||||
id: taskList[i][0],
|
||||
weight: taskList[i][1]
|
||||
};
|
||||
}
|
||||
}
|
||||
console.log(taskList)
|
||||
|
||||
// random
|
||||
this.setState({
|
||||
taskListGen: taskList
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {*} e Button Event
|
||||
*/
|
||||
generate(e) {
|
||||
console.log(this.state)
|
||||
//console.log(this)
|
||||
var me = this;
|
||||
var diff = moment.duration(moment(me.state.start).diff(moment(this.state.stop)));
|
||||
var diffInDays = (-diff.asDays()) + 1;
|
||||
//console.log(diffInDays)
|
||||
var taskList= JSON.parse(JSON.stringify({'data':this.state.taskListGen})).data;
|
||||
console.log(taskList);
|
||||
var m = false;
|
||||
for(var t in taskList){
|
||||
var y = taskList[t].id.charAt(0);
|
||||
if(y === '+'){
|
||||
m = true;
|
||||
taskList[t] = {do:'+',task:taskList[t].id.substring(1)}
|
||||
}else if(y === '-'){
|
||||
m = true;
|
||||
taskList[t] = {do:'-',task:taskList[t].id.substring(1)}
|
||||
}
|
||||
}
|
||||
if(m === false){
|
||||
var today = moment(me.state.start);
|
||||
var tage = [];
|
||||
for(var d=0;d<diffInDays;d++)
|
||||
{
|
||||
var day = moment(today).add(d,'days');
|
||||
var isod = moment(day).isoWeekday() - 1;
|
||||
if (this.state.activeDays[isoDays[isod]] === "on") {
|
||||
var tmp_list = shuffle(taskList)
|
||||
var tasks = [];
|
||||
for( var i=0;i<tmp_list.length; i++)
|
||||
{
|
||||
var z = Math.ceil(Math.random()*100)
|
||||
var nw = 100 - tmp_list[i].weight
|
||||
if(z>nw)
|
||||
{
|
||||
tasks.push(tmp_list[i].id);
|
||||
}
|
||||
}
|
||||
tage.push({day:day,tasks:tasks})
|
||||
DB.saveDate(
|
||||
{
|
||||
breakTime: this.state.times[isoDays[isod]].break,
|
||||
date:day.unix()*1000,
|
||||
endTime:moment(day).set({ hour: this.state.times[isoDays[isod]].end.split(':')[0], minute: this.state.times[isoDays[isod]].end.split(':')[1] }).unix()*1000,
|
||||
startTime:moment(day).set({ hour: this.state.times[isoDays[isod]].start.split(':')[0], minute: this.state.times[isoDays[isod]].start.split(':')[1]}).unix()*1000,
|
||||
taskList:tasks
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
}else{
|
||||
var today = moment(me.state.start);
|
||||
var tage = [];
|
||||
for(var d=0;d<diffInDays;d++)
|
||||
{
|
||||
var day = moment(today).add(d,'days');
|
||||
var isod = moment(day).isoWeekday() - 1;
|
||||
if (this.state.activeDays[isoDays[isod]] === "on") {
|
||||
console.log(new Date(day.unix()*1000));
|
||||
var d = DB.loadDate(new Date(day.unix()*1000));
|
||||
var tasks = d.tasks;
|
||||
|
||||
for(var t in taskList){
|
||||
if(taskList[t].do === '+'){
|
||||
tasks.push(taskList[t].task);
|
||||
}else if(taskList[t].do === '-'){
|
||||
for(var a in tasks){
|
||||
if(tasks[a] === taskList[t].task){
|
||||
tasks.splice(a,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tage.push({day:day,tasks:tasks})
|
||||
DB.saveDate(
|
||||
{
|
||||
breakTime: this.state.times[isoDays[isod]].break,
|
||||
date:new Date(d.date),
|
||||
endTime:d.endTime,
|
||||
startTime:d.startTime,
|
||||
taskList:tasks
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
handleMo(e) {
|
||||
//console.log(e.target.id);
|
||||
var d = this.state.activeDays;
|
||||
d[e.target.id.split('-')[1]] = e.target.value;
|
||||
this.setState({
|
||||
activeDays: d
|
||||
});
|
||||
}
|
||||
handleChangeTasksPerDay(e) {
|
||||
this.setState({
|
||||
tasksPerDay: e.target.value
|
||||
});
|
||||
var tasksPerDayList = e.target.value.split(/\r?\n/);
|
||||
for (var i = 0; i < tasksPerDayList.length; i++) {
|
||||
if (tasksPerDayList[i] === "" || typeof tasksPerDayList[i].split(',')[1] === 'undefined' || tasksPerDayList[i].split(',')[1] === "") {
|
||||
tasksPerDayList.splice(i, 1);
|
||||
} else {
|
||||
tasksPerDayList[i] = tasksPerDayList[i].split(',');
|
||||
tasksPerDayList[i] = {
|
||||
id: tasksPerDayList[i][0],
|
||||
weight: tasksPerDayList[i][1]
|
||||
};
|
||||
}
|
||||
}
|
||||
this.taskPerDay = tasksPerDayList;
|
||||
}
|
||||
handleChangeTasksDmin(e) {
|
||||
|
||||
}
|
||||
|
||||
handleChangeDayStart(e) {
|
||||
var d = this.state.times;
|
||||
d[e.target.id.split('-')[1]].start = e.target.value;
|
||||
this.setState({
|
||||
times: d
|
||||
});
|
||||
}
|
||||
handleChangeDayEnd(e) {
|
||||
var d = this.state.times;
|
||||
d[e.target.id.split('-')[1]].end = e.target.value;
|
||||
this.setState({
|
||||
times: d
|
||||
});
|
||||
}
|
||||
handleChangeDayBreak(e) {
|
||||
var d = this.state.times;
|
||||
d[e.target.id.split('-')[1]].break = e.target.value;
|
||||
this.setState({
|
||||
times: d
|
||||
});
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div id="generator-frame">
|
||||
<div className="header">
|
||||
Generator
|
||||
</div>
|
||||
<button onClick={this.generate}>Generate</button>
|
||||
Von: <input type="date" value={this.state.start} onChange={this.handleChangeStart} />
|
||||
Bis: <input type="date" value={this.state.stop} onChange={this.handleChangeEnd} />
|
||||
Wochen: <input type="text" disable="true" value={-(moment(this.state.start).diff(moment(this.state.end), 'week'))} />
|
||||
<hr />
|
||||
Tätigkeiten:<br />
|
||||
<textarea value={this.state.tasks} onChange={this.handleChangeTasks} placeholder="Support,50"></textarea><br />
|
||||
Tätigkeiten pro Tag: <br />
|
||||
<hr />
|
||||
<input type="checkbox" id="day-mo" defaultChecked={this.state.activeDays.mo} onChange={this.handleMo} /> Montag
|
||||
<input type="checkbox" id="day-tu" defaultChecked={this.state.activeDays.tu} onChange={this.handleMo} /> Dienstag
|
||||
<input type="checkbox" id="day-we" defaultChecked={this.state.activeDays.we} onChange={this.handleMo} /> Mittwoch
|
||||
<input type="checkbox" id="day-th" defaultChecked={this.state.activeDays.th} onChange={this.handleMo} /> Donnerstag
|
||||
<input type="checkbox" id="day-fr" defaultChecked={this.state.activeDays.fr} onChange={this.handleMo} /> Freitag
|
||||
<input type="checkbox" id="day-sa" defaultChecked={this.state.activeDays.sa} onChange={this.handleMo} /> Samstag
|
||||
<input type="checkbox" id="day-su" defaultChecked={this.state.activeDays.su} onChange={this.handleMo} /> Sonntag
|
||||
|
||||
<hr/>
|
||||
<table border="1">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Tag</th><th>Start</th><th>Pause</th><th>Feierabend</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Montag</td>
|
||||
<td><input id="dts-mo" value={this.state.times.mo.start} onChange={this.handleChangeDayStart} type="time" /></td>
|
||||
<td><input id="dtb-mo" value={this.state.times.mo.break} onChange={this.handleChangeDayBreak} type="number" /></td>
|
||||
<td><input id="dte-mo" value={this.state.times.mo.end} onChange={this.handleChangeDayEnd} type="time" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dienstag</td>
|
||||
<td><input id="dts-tu" value={this.state.times.tu.start} onChange={this.handleChangeDayStart} type="time" /></td>
|
||||
<td><input id="dtb-tu" value={this.state.times.tu.break} onChange={this.handleChangeDayBreak} type="number" /></td>
|
||||
<td><input id="dte-tu" value={this.state.times.tu.end} onChange={this.handleChangeDayEnd} type="time" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mittwoch</td>
|
||||
<td><input id="dts-we" value={this.state.times.we.start} onChange={this.handleChangeDayStart} type="time" /></td>
|
||||
<td><input id="dtb-we" value={this.state.times.we.break} onChange={this.handleChangeDayBreak} type="number" /></td>
|
||||
<td><input id="dte-we" value={this.state.times.we.end} onChange={this.handleChangeDayEnd} type="time" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donnerstag</td>
|
||||
<td><input id="dts-th" value={this.state.times.th.start} onChange={this.handleChangeDayStart} type="time" /></td>
|
||||
<td><input id="dtb-th" value={this.state.times.th.break} onChange={this.handleChangeDayBreak} type="number" /></td>
|
||||
<td><input id="dte-th" value={this.state.times.th.end} onChange={this.handleChangeDayEnd} type="time" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Freitag</td>
|
||||
<td><input id="dts-fr" value={this.state.times.fr.start} onChange={this.handleChangeDayStart} type="time" /></td>
|
||||
<td><input id="dtb-fr" value={this.state.times.fr.break} onChange={this.handleChangeDayBreak} type="number" /></td>
|
||||
<td><input id="dte-fr" value={this.state.times.fr.end} onChange={this.handleChangeDayEnd} type="time" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Samstag
|
||||
</td>
|
||||
<td><input id="dts-sa" value={this.state.times.sa.start} onChange={this.handleChangeDayStart} type="time" /></td>
|
||||
<td><input id="dtb-sa" value={this.state.times.sa.break} onChange={this.handleChangeDayBreak} type="number" /></td>
|
||||
<td><input id="dte-sa" value={this.state.times.sa.end} onChange={this.handleChangeDayEnd} type="time" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonntag</td>
|
||||
<td><input id="dts-su" value={this.state.times.su.start} onChange={this.handleChangeDayStart} type="time" /></td>
|
||||
<td><input id="dtb-su" value={this.state.times.su.break} onChange={this.handleChangeDayBreak} type="number" /></td>
|
||||
<td><input id="dte-su" value={this.state.times.su.end} onChange={this.handleChangeDayEnd} type="time" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,35 @@
|
|||
import React from 'react';
|
||||
import {FileLoader} from './fileLoader'
|
||||
import {DB} from './../static/storage'
|
||||
//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
|
||||
|
||||
var me;
|
||||
|
||||
export class Home extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
rel:false
|
||||
}
|
||||
DB.onLoad(this.Dblo);
|
||||
me = this;
|
||||
}
|
||||
Dblo(){
|
||||
me.setState({rel:!me.state.rel})
|
||||
}
|
||||
DbLoaded(){
|
||||
|
||||
if(DB.loaded === false){
|
||||
return <FileLoader/>
|
||||
}else{
|
||||
return ""
|
||||
}
|
||||
}
|
||||
render(){
|
||||
return (
|
||||
<div id="home-frame">
|
||||
<this.DbLoaded/>
|
||||
|
||||
</div>);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,54 @@
|
|||
import React from 'react';
|
||||
|
||||
import {Home} from './home';
|
||||
import {Calender} from './calender';
|
||||
import {Generator} from './generator';
|
||||
import {Print} from './print';
|
||||
import {Settings} from './settings';
|
||||
|
||||
import {DB} from './../static/storage'
|
||||
|
||||
export class Nav extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
tab:(<Home/>)
|
||||
}
|
||||
this.handleExportFile = this.handleExportFile.bind(this);
|
||||
}
|
||||
handleExportFile(){
|
||||
/**
|
||||
* @TODO
|
||||
* LOAD FILE
|
||||
*/
|
||||
}
|
||||
handleCreateFile(){
|
||||
/**
|
||||
* @TODO
|
||||
* CREATE FILE
|
||||
*/
|
||||
}
|
||||
render() {
|
||||
/*<button onClick={this.handleCreateFile}>Erstellen </button>*/
|
||||
return (
|
||||
<div id="container">
|
||||
<div id="nav">
|
||||
<div className="header">
|
||||
WBM
|
||||
</div>
|
||||
<button onClick={()=>{this.setState({tab:(<Home/>)})}}>Home</button>
|
||||
|
||||
<button onClick={()=>{DB.exportDB()}}>Exportieren </button>
|
||||
<button onClick={()=>{this.setState({tab:(<Calender/>)})}}>Kalender</button>
|
||||
<button onClick={()=>{this.setState({tab:(<Generator/>)})}}>Generator</button>
|
||||
<button onClick={()=>{this.setState({tab:(<Print/>)})}}>Drucken</button>
|
||||
<button onClick={()=>{this.setState({tab:(<Settings/>)})}}>Einstellungen</button>
|
||||
<hr/>
|
||||
Erstellt von:<br/><a target="_blank" rel="noopener noreferrer" href="https://lucajaents.ch">Luca Jäntsch</a>
|
||||
</div>
|
||||
<div id="content">
|
||||
{this.state.tab}
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,85 @@
|
|||
// FIX
|
||||
import React from 'react';
|
||||
|
||||
import {Templates} from './components/templates';
|
||||
import { DB } from '../static/storage';
|
||||
import { Modi_Week } from './print_modi/week';
|
||||
|
||||
const moment = require('moment');
|
||||
|
||||
export class Print extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state={
|
||||
status:"",
|
||||
print_modi:"week",
|
||||
start:Date(),
|
||||
end:Date(),
|
||||
startWeek:0,
|
||||
endWeek:0,
|
||||
diff:0,
|
||||
html:""
|
||||
}
|
||||
this.preview = this.preview.bind(this);
|
||||
this.print = this.print.bind(this);
|
||||
this.handleChangeStart = this.handleChangeStart.bind(this);
|
||||
this.handleChangeEnd = this.handleChangeEnd.bind(this);
|
||||
Templates.getTemplates()
|
||||
}
|
||||
preview(){
|
||||
var name = DB.loadSettings('name').val;
|
||||
var anfang = DB.loadSettings('start').val;
|
||||
|
||||
var start = moment(this.state.start);
|
||||
var end = moment(this.state.end);
|
||||
var me = this;
|
||||
Modi_Week.preview(name,anfang,start,end,me)
|
||||
|
||||
}
|
||||
print(){
|
||||
var ifrm = document.getElementById('pdf');
|
||||
ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
|
||||
ifrm.focus();
|
||||
ifrm.print();
|
||||
}
|
||||
handleChangeStart(e){
|
||||
var d = e.target.value;
|
||||
var x = moment(d)
|
||||
x = x.startOf('isoWeek')._d;
|
||||
console.log(moment(x).week())
|
||||
this.setState({startWeek:moment(x).weeks()})
|
||||
this.setState({start:moment(x).format("YYYY-MM-DD")})
|
||||
this.getWeeks(moment(x).weeks(),this.state.endWeek);
|
||||
}
|
||||
handleChangeEnd(e){
|
||||
var d = e.target.value;
|
||||
var x = moment(d)
|
||||
x = x.endOf('isoWeek')._d;
|
||||
this.setState({endWeek:moment(x).weeks()})
|
||||
this.setState({end:moment(x).format("YYYY-MM-DD")})
|
||||
this.getWeeks(this.state.startWeek,moment(x).weeks());
|
||||
}
|
||||
getWeeks(s,e){
|
||||
|
||||
var diff = e - s;
|
||||
this.setState({diff:diff});
|
||||
console.log(diff);
|
||||
}
|
||||
render(){
|
||||
|
||||
return (
|
||||
<div id="print-frame">
|
||||
<div className="header">
|
||||
<div>
|
||||
Wochen: {this.state.diff}
|
||||
</div>
|
||||
<div>Start: <input type="date" value={this.state.start} onChange={this.handleChangeStart}/></div>
|
||||
<div>Ende: <input type="date" value={this.state.end} onChange={this.handleChangeEnd}/></div>
|
||||
<div><button onClick={this.preview}>Vorschau</button><button onClick={this.print}>Drucken</button></div>
|
||||
</div>
|
||||
<iframe id="pdf" title="PDF OUTPUT">
|
||||
</iframe>
|
||||
{this.state.status}
|
||||
</div>);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,105 @@
|
|||
import {Templates} from '../components/templates';
|
||||
import { DB } from '../../static/storage';
|
||||
//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
|
||||
const moment = require('moment');
|
||||
const nunjucks = require('nunjucks');
|
||||
|
||||
export class Modi_Week{
|
||||
static preview(name,anfang,start,end,me){
|
||||
var sql = 'SELECT * FROM days WHERE date BETWEEN '+(moment(me.state.start).unix()*1000)+' AND '+(moment(me.state.end).unix()*1000);
|
||||
var days = DB.cdb.exec(sql);
|
||||
//for(var result = []; days.step();) result.push(days.getAsObject({':start':me.state.start,':end':me.state.end}));
|
||||
|
||||
var d = days[0].values;
|
||||
var weeks = {};
|
||||
for(var i in d){
|
||||
var md = d[i];
|
||||
var week =moment(md[4]).diff(start,'weeks');
|
||||
if(typeof weeks[week] === 'undefined'){
|
||||
weeks[week] = {};
|
||||
weeks[week].data = [];
|
||||
weeks[week].start = md[1];
|
||||
weeks[week].num = moment(md[1]).diff(moment(anfang),'weeks')+1;
|
||||
weeks[week].end = "";
|
||||
}
|
||||
var tasks = md[5].split(',');
|
||||
for(var t in tasks){
|
||||
sql = 'SELECT * FROM tasks WHERE id=:id';
|
||||
var stmt = DB.cdb.prepare(sql);
|
||||
var res = stmt.getAsObject({':id':tasks[t]});
|
||||
stmt.free();
|
||||
tasks[t] = res.taskName;
|
||||
}
|
||||
md[5] = tasks;
|
||||
md[1] = moment(md[1]).format('dddd');
|
||||
md[2] = moment(md[2]).format('HH:mm');
|
||||
md[4] = moment(md[4]).format('HH:mm');
|
||||
|
||||
var wnum = 0;
|
||||
switch(md[1]){
|
||||
case 'Monday':
|
||||
md[1] = 'Montag';
|
||||
break;
|
||||
case 'Tuesday':
|
||||
md[1] = 'Dienstag';
|
||||
wnum = 1;
|
||||
break;
|
||||
case 'Wednesday':
|
||||
md[1] = 'Mittwoch';
|
||||
wnum = 2;
|
||||
break;
|
||||
case 'Thursday':
|
||||
md[1] = 'Donnerstag';
|
||||
wnum = 3;
|
||||
break;
|
||||
case 'Friday':
|
||||
md[1] = 'Freitag';
|
||||
wnum = 4
|
||||
break;
|
||||
case 'Saturday':
|
||||
md[1] = 'Samstag';
|
||||
wnum = 5;
|
||||
break;
|
||||
case 'Sunday' :
|
||||
md[1] = 'Sonntag';
|
||||
wnum = 6;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
weeks[week].data[wnum] = md;
|
||||
}
|
||||
|
||||
for(var w in weeks){
|
||||
weeks[w].start = moment(weeks[w].start).format('YYYY-MM-DD');
|
||||
weeks[w].end = moment(moment(weeks[w].start).day(7)).format('YYYY-MM-DD');
|
||||
|
||||
|
||||
for(d in weeks[w].data){
|
||||
for(t in weeks[w].data[d][5]){
|
||||
if(weeks[w].data[d][5][t].trim()===""){
|
||||
weeks[w].data[d][5].splice(t,1);
|
||||
}
|
||||
}
|
||||
if(weeks[w].data[d][5].length <=0){
|
||||
weeks[w].data.splice(d,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
var build = Templates.template.header+Templates.template.wochenbericht+Templates.template.footer;
|
||||
|
||||
var html = nunjucks.renderString(build, {name:name,weeks:weeks});
|
||||
|
||||
//console.log(html);
|
||||
//var printWindow = window.open('', '', 'height=400,width=800');
|
||||
//printWindow.document.write(html);
|
||||
//printWindow.document.close();
|
||||
//printWindow.print()
|
||||
var ifrm = document.getElementById('pdf');
|
||||
ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
|
||||
ifrm.document.open();
|
||||
ifrm.document.write(html);
|
||||
ifrm.document.close();
|
||||
ifrm.focus();
|
||||
}
|
||||
}
|
|
@ -0,0 +1,53 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import InfiniteCalendar from 'react-infinite-calendar';
|
||||
import { DB } from '../static/storage';
|
||||
//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
|
||||
|
||||
const moment = require('moment');
|
||||
|
||||
export class Settings extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
name:"",
|
||||
start:0
|
||||
}
|
||||
this.onChangeName = this.onChangeName.bind(this);
|
||||
this.onChangeStart = this.onChangeStart.bind(this);
|
||||
this.save = this.save.bind(this);
|
||||
}
|
||||
componentDidMount(){
|
||||
this.setState({name:DB.loadSettings('name').val,start:DB.loadSettings('start').val});
|
||||
|
||||
}
|
||||
onChangeName(e){
|
||||
this.setState({name:e.target.value})
|
||||
}
|
||||
onChangeStart(e){
|
||||
this.setState({start:e.target.value});
|
||||
}
|
||||
save(){
|
||||
DB.saveSettings(this.state);
|
||||
}
|
||||
render() {
|
||||
console.log(this.state)
|
||||
return (
|
||||
<div id="settings-frame">
|
||||
Einstellungen
|
||||
<div class="form-group ">
|
||||
<label class="control-label " for="name">
|
||||
Name
|
||||
</label>
|
||||
<input class="form-control" id="name" name="name" type="text" value={this.state.name} onChange={this.onChangeName}/>
|
||||
</div>
|
||||
<div class="form-group ">
|
||||
<label class="control-label " for="name">
|
||||
Anfangsdatum
|
||||
</label>
|
||||
<input class="form-control" id="name" name="name" type="date" onChange={this.onChangeStart} value={this.state.start} />
|
||||
</div>
|
||||
<button onClick={this.save}>Speichern</button>
|
||||
</div>);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
|
||||
<g fill="#61DAFB">
|
||||
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
|
||||
<circle cx="420.9" cy="296.5" r="45.7"/>
|
||||
<path d="M520.5 78.1z"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 2.6 KiB |
|
@ -0,0 +1,117 @@
|
|||
// In production, we register a service worker to serve assets from local cache.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||
// cached resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||
// This link also includes instructions on opting out of this behavior.
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
|
||||
export default function register() {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Lets check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl);
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log(
|
||||
'This web app is being served cache-first by a service ' +
|
||||
'worker. To learn more, visit https://goo.gl/SC7cgQ'
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// Is not local host. Just register service worker
|
||||
registerValidSW(swUrl);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the old content will have been purged and
|
||||
// the fresh content will have been added to the cache.
|
||||
// It's the perfect time to display a "New content is
|
||||
// available; please refresh." message in your web app.
|
||||
console.log('New content is available; please refresh.');
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl)
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
if (
|
||||
response.status === 404 ||
|
||||
response.headers.get('content-type').indexOf('javascript') === -1
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(
|
||||
'No internet connection found. App is running in offline mode.'
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister();
|
||||
});
|
||||
}
|
||||
}
|
|
@ -0,0 +1,755 @@
|
|||
@color_1: #3d3d3d;
|
||||
@color_2: #AAA;
|
||||
@color_3: inherit;
|
||||
@color_4: rgba(255, 255, 255, 0.5);
|
||||
@color_5: white;
|
||||
@color_6: rgba(255, 255, 255, 0.15);
|
||||
@color_7: #333;
|
||||
@color_8: #444;
|
||||
@color_9: #FFF;
|
||||
@background_color_1: #EFEFEF;
|
||||
@background_color_2: #EEE;
|
||||
@background_color_3: #FFF;
|
||||
@background_color_4: #F9F9F9;
|
||||
@background_color_5: blue;
|
||||
@background_color_6: inherit;
|
||||
@background_color_7: rgba(255, 255, 255, 0.6);
|
||||
|
||||
/*
|
||||
* Range selection styles
|
||||
*/
|
||||
.Cal__Day__root {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 14.28571%;
|
||||
list-style: none;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
&:first-child {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__enabled.Cal__Day__highlighted {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-top: -26px;
|
||||
margin-left: -26px;
|
||||
border-radius: 50%;
|
||||
background-color: @background_color_1;
|
||||
z-index: -1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__enabled {
|
||||
&:active {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-top: -26px;
|
||||
margin-left: -26px;
|
||||
border-radius: 50%;
|
||||
background-color: @background_color_1;
|
||||
z-index: -1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-top: -26px;
|
||||
margin-left: -26px;
|
||||
border-radius: 50%;
|
||||
background-color: @background_color_1;
|
||||
z-index: -1;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__today {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
>span {
|
||||
color: @color_1;
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-top: -26px;
|
||||
margin-left: -26px;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0 0 0 1px;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__today.Cal__Day__disabled {
|
||||
>span {
|
||||
color: @color_2;
|
||||
}
|
||||
&:before {
|
||||
box-shadow: inset 0 0 0 1px #BBB;
|
||||
}
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__selected {
|
||||
position: relative;
|
||||
>.Cal__Day__month {
|
||||
display: none;
|
||||
}
|
||||
>.Cal__Day__year {
|
||||
display: none;
|
||||
}
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
.Cal__Day__selection {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-top: -26px;
|
||||
margin-left: -26px;
|
||||
border-radius: 50%;
|
||||
line-height: 56px;
|
||||
z-index: 2;
|
||||
.Cal__Day__month {
|
||||
top: 9px;
|
||||
}
|
||||
.Cal__Day__day {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.Cal__Day__root.Cal__Day__disabled {
|
||||
color: @color_2;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.Cal__Day__month {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
top: 5px;
|
||||
}
|
||||
.Cal__Day__year {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
bottom: 5px;
|
||||
}
|
||||
.Cal__Day__range.Cal__Day__selected.Cal__Day__start {
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
height: 52px;
|
||||
margin-top: -26px;
|
||||
box-shadow: inset 56px 56px;
|
||||
right: 0;
|
||||
}
|
||||
.Cal__Day__selection {
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
}
|
||||
}
|
||||
.Cal__Day__range.Cal__Day__selected.Cal__Day__end {
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
height: 52px;
|
||||
margin-top: -26px;
|
||||
box-shadow: inset 56px 56px;
|
||||
left: 0;
|
||||
}
|
||||
.Cal__Day__selection {
|
||||
border-top-right-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
color: @color_3 !important;
|
||||
background-color: @background_color_3 !important;
|
||||
border: 2px solid;
|
||||
box-sizing: border-box;
|
||||
.Cal__Day__day {
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.Cal__Day__range.Cal__Day__selected.Cal__Day__disabled {
|
||||
.Cal__Day__selection.Cal__Day__selection {
|
||||
background-color: @background_color_2 !important;
|
||||
.Cal__Day__day {
|
||||
color: @color_2;
|
||||
font-weight: 300;
|
||||
}
|
||||
.Cal__Day__month {
|
||||
color: @color_2;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
.Cal__Day__range.Cal__Day__selected.Cal__Day__start.Cal__Day__end {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.Cal__Day__range.Cal__Day__selected.Cal__Day__betweenRange {
|
||||
.Cal__Day__selection {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 0;
|
||||
}
|
||||
.Cal__Day__day {
|
||||
top: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.Cal__Day__month {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.Cal__Container__root {
|
||||
position: relative;
|
||||
display: table;
|
||||
z-index: 1;
|
||||
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-weight: 300;
|
||||
outline: none;
|
||||
text-align: left;
|
||||
}
|
||||
.Cal__Container__root.Cal__Container__landscape {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.Cal__Container__wrapper {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
}
|
||||
.Cal__Container__listWrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: @background_color_3;
|
||||
}
|
||||
.Cal__Header__root {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
min-height: 98px;
|
||||
padding: 20px;
|
||||
line-height: 1.3;
|
||||
font-weight: 400;
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
.Cal__Header__root.Cal__Header__landscape {
|
||||
align-items: flex-start;
|
||||
min-width: 200px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 3px;
|
||||
.Cal__Header__dateWrapper.Cal__Header__day {
|
||||
flex-grow: 1;
|
||||
height: 76px;
|
||||
}
|
||||
}
|
||||
.Cal__Header__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.Cal__Header__wrapper.Cal__Header__blank {
|
||||
height: 58px;
|
||||
line-height: 58px;
|
||||
color: @color_4;
|
||||
font-size: 18px;
|
||||
cursor: default;
|
||||
}
|
||||
.Cal__Header__dateWrapper {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: @color_4;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.Cal__Header__dateWrapper.Cal__Header__active {
|
||||
color: @color_5;
|
||||
}
|
||||
.Cal__Header__dateWrapper.Cal__Header__day {
|
||||
height: 38px;
|
||||
font-size: 36px;
|
||||
line-height: 36px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.Cal__Header__dateWrapper.Cal__Header__year {
|
||||
height: 20px;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.Cal__Header__date {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.Cal__Header__range {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
.Cal__Header__dateWrapper {
|
||||
overflow: visible;
|
||||
}
|
||||
.Cal__Header__wrapper {
|
||||
&:first-child {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: -50px;
|
||||
margin-left: -50px;
|
||||
border-top: 100px solid transparent;
|
||||
border-bottom: 100px solid transparent;
|
||||
border-left: 60px solid;
|
||||
color: @color_6;
|
||||
transform: translateX(1px);
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: -50px;
|
||||
margin-left: -50px;
|
||||
border-top: 100px solid transparent;
|
||||
border-bottom: 100px solid transparent;
|
||||
border-left: 60px solid;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-left: 60px;
|
||||
}
|
||||
.Cal__Header__date {
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.Cal__Today__root {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
padding: 6px;
|
||||
box-sizing: border-box;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
font-weight: 500;
|
||||
line-height: 0;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
transition-delay: 0.3s;
|
||||
.Cal__Today__chevron {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
margin-left: 5px;
|
||||
transform: rotate(270deg);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
.Cal__Today__root.Cal__Today__show {
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition-delay: 0s;
|
||||
.Cal__Today__chevron {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
.Cal__Today__root.Cal__Today__chevronUp {
|
||||
.Cal__Today__chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.Cal__Today__root.Cal__Today__chevronDown {
|
||||
.Cal__Today__chevron {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.Cal__MonthList__root {
|
||||
width: 100% !important;
|
||||
background-color: @background_color_3;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.Cal__MonthList__root.Cal__MonthList__scrolling {
|
||||
>div {
|
||||
pointer-events: none;
|
||||
}
|
||||
label {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.Cal__Weekdays__root {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.Cal__Weekdays__day {
|
||||
padding: 15px 0;
|
||||
flex-basis: 14.28571%;
|
||||
flex-grow: 1;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
.Cal__Years__root {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: @background_color_4;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 50px;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 50px;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
|
||||
}
|
||||
}
|
||||
.Cal__Years__list {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.Cal__Years__list.Cal__Years__center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.Cal__Years__year {
|
||||
display: flex;
|
||||
padding: 0 20px;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
box-sizing: border-box;
|
||||
label {
|
||||
flex-basis: 42%;
|
||||
span {
|
||||
flex-shrink: 0;
|
||||
color: @color_7;
|
||||
}
|
||||
}
|
||||
ol {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
li {
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
color: @color_8;
|
||||
font-weight: 400;
|
||||
text-transform: capitalize;
|
||||
&:hover {
|
||||
background-color: @background_color_1;
|
||||
}
|
||||
}
|
||||
li.Cal__Years__currentMonth {
|
||||
border: 1px solid;
|
||||
}
|
||||
li.Cal__Years__selected {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: @background_color_5;
|
||||
color: @color_9 !important;
|
||||
border: 0;
|
||||
}
|
||||
li.Cal__Years__disabled {
|
||||
cursor: not-allowed;
|
||||
color: @color_2;
|
||||
&:hover {
|
||||
background-color: @background_color_6;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
label {
|
||||
>span {
|
||||
color: @color_3;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
.Cal__Years__year.Cal__Years__withMonths {
|
||||
border-bottom: 1px solid #E9E9E9;
|
||||
label {
|
||||
height: 88px;
|
||||
padding-top: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.Cal__Years__year.Cal__Years__active {
|
||||
label {
|
||||
>span {
|
||||
color: @color_3;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 32px;
|
||||
}
|
||||
.Cal__Years__year.Cal__Years__currentYear {
|
||||
position: relative;
|
||||
label {
|
||||
>span {
|
||||
min-width: 50px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 3px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
.Cal__Years__year.Cal__Years__currentYear.Cal__Years__active {
|
||||
label {
|
||||
>span {
|
||||
min-width: 85px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.Cal__Years__year.Cal__Years__first {
|
||||
padding-top: 40px;
|
||||
}
|
||||
.Cal__Years__year.Cal__Years__last {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
.Cal__Animation__enter {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
.Cal__Animation__enter.Cal__Animation__enterActive {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.Cal__Animation__leave {
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
.Cal__Animation__leave.Cal__Animation__leaveActive {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
.Cal__Slider__root {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.Cal__Slider__slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 20px 65px;
|
||||
&:first-child {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
.Cal__Slider__wrapper {
|
||||
height: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.Cal__Slider__arrow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
svg {
|
||||
width: 15px;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.Cal__Slider__arrowRight {
|
||||
right: 0;
|
||||
}
|
||||
.Cal__Slider__arrowLeft {
|
||||
left: 0;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.Cal__transition__enter {
|
||||
opacity: 0;
|
||||
}
|
||||
.Cal__transition__enterActive {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.Cal__transition__leave {
|
||||
opacity: 1;
|
||||
}
|
||||
.Cal__transition__leaveActive {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.Cal__Month__rows {
|
||||
position: relative;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.05) 100%);
|
||||
}
|
||||
.Cal__Month__row {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
&:first-child {
|
||||
text-align: right;
|
||||
li {
|
||||
background-color: @background_color_3;
|
||||
box-shadow: 0 -1px 0 #E9E9E9;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
box-shadow: 0 -1px 0 #E9E9E9;
|
||||
}
|
||||
}
|
||||
.Cal__Month__row.Cal__Month__partial {
|
||||
&:first-child {
|
||||
li {
|
||||
&:first-child {
|
||||
box-shadow: 0px -1px 0 #E9E9E9, inset 1px 0 0 #E9E9E9;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
li {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.Cal__Month__label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
background-color: @background_color_7;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
>span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
.Cal__Month__label.Cal__Month__partialFirstRow {
|
||||
top: 56px;
|
||||
}
|
|
@ -0,0 +1,22 @@
|
|||
#fileloader-frame{
|
||||
background: rgba(0, 0, 0, 0.61);
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
left: 0;
|
||||
button{
|
||||
width:100%;
|
||||
}
|
||||
.contents{
|
||||
border: 1px solid;
|
||||
width: 300px;
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
left: calc(50% - 160px);
|
||||
background-color: #FFF;
|
||||
box-shadow: 1px 1px 1px #454545;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,150 @@
|
|||
@background:#004F5B;
|
||||
@background-2:#3C6F9B;
|
||||
@color:#FFF;
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Exo';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Exo Regular'), local('Exo-Regular'), url(/font/exo.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
html,body{
|
||||
margin:0;
|
||||
font-family: 'Exo', monospace !important;
|
||||
}
|
||||
*{
|
||||
|
||||
}
|
||||
#container{
|
||||
display: flex;
|
||||
}
|
||||
#nav{
|
||||
height: 100vh;
|
||||
width: 200px;
|
||||
line-height: 50px;
|
||||
box-shadow: 0 0 5px #454545;
|
||||
background-color:@background-2;
|
||||
color: #fff;
|
||||
.header{
|
||||
background-color: @background;
|
||||
height:98px;
|
||||
line-height: 98px;
|
||||
font-size: 41px;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 3px #000000;
|
||||
}
|
||||
button{
|
||||
display: block;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
width: calc(100% - 10px);
|
||||
background: none;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
border-bottom: 3px solid;
|
||||
border-color: transparent;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
border-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
#content{
|
||||
width: ~"calc(100% - 200px)";
|
||||
>div{
|
||||
box-shadow: 0px 0px 5px #454545;
|
||||
}
|
||||
}
|
||||
|
||||
//@import './style.css'
|
||||
|
||||
#editor-frame{
|
||||
display: flex;
|
||||
#calender{
|
||||
|
||||
}
|
||||
|
||||
#mask{
|
||||
width:100%;
|
||||
.header{
|
||||
display: block;
|
||||
min-height: 98px;
|
||||
background-color: @background;
|
||||
}
|
||||
.lower-header{
|
||||
height:49px;
|
||||
display: block;
|
||||
background-color:@background;
|
||||
}
|
||||
.inputGroup{
|
||||
font: 16px 'Helvetica Neue',Helvetica,Arial,sans-serif;
|
||||
padding: 10px;
|
||||
.input{
|
||||
border-bottom: 1px solid #a2a2a2;
|
||||
padding: 5px;
|
||||
}
|
||||
label{
|
||||
display: block;
|
||||
}
|
||||
input,textarea{
|
||||
width: 100%;
|
||||
font: 16px 'Helvetica Neue',Helvetica,Arial,sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
input{
|
||||
padding: 5px;
|
||||
height: 34px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#generator-frame{
|
||||
textarea{
|
||||
min-height: 337px;
|
||||
min-width: 604px;
|
||||
}
|
||||
.rc-tabs-tabpane {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
button.btn, button {
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
background: @color;
|
||||
border: 3px solid @background;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
transition: all .3s;
|
||||
&.success{
|
||||
border-color: #62D6CE;
|
||||
background: #62D6CE;
|
||||
color: #F9F9E8;
|
||||
&:hover{
|
||||
border-color:#EDD1A1;
|
||||
background:#62D6CE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#generator-frame{
|
||||
.header{
|
||||
height: 98px;
|
||||
background-color: @background;
|
||||
color: @color;
|
||||
line-height: 98px;
|
||||
padding: 0 25px;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@import './calender.less';
|
||||
@import './tabs.less';
|
||||
@import './fileloader.less';
|
||||
@import './print.less';
|
|
@ -0,0 +1,21 @@
|
|||
#print-frame{
|
||||
|
||||
.header{
|
||||
height:98px;
|
||||
background-color: @background;
|
||||
color:#FFF;
|
||||
display:flex;
|
||||
div {
|
||||
vertical-align: middle;
|
||||
line-height: 100px;
|
||||
margin: 0 5px 0px 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
#pdf{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: ~'calc(100vh - 102px)';
|
||||
border:none;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,34 @@
|
|||
.rc-tabs{
|
||||
overflow-x:hidden;
|
||||
|
||||
.rc-tabs-ink-bar{
|
||||
display:none !important;
|
||||
}
|
||||
.rc-tabs-nav{
|
||||
display: flex;
|
||||
background-color: @background-2;
|
||||
color: #FFF;
|
||||
font-size: 15px;
|
||||
height:49px;
|
||||
line-height: 33px;
|
||||
vertical-align: middle;
|
||||
.rc-tabs-tab {
|
||||
width: auto;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
background-color: lighten(@background,-5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.rc-tabs-content{
|
||||
white-space: nowrap;
|
||||
|
||||
.rc-tabs-tabpane {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
Loading…
Reference in New Issue