environments/production/deployments/1
Luca Jäntsch 2018-09-05 13:34:00 +02:00
parent 55ec581373
commit 1520711a5c
44 changed files with 15596 additions and 1 deletions

21
LICENSE 100644
View File

@ -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.

View File

@ -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)

11732
package-lock.json generated 100644

File diff suppressed because it is too large Load Diff

28
package.json 100644
View File

@ -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"
}
}

BIN
public/favicon.ico 100644

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

31
public/index.html 100644
View File

@ -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>

895
public/main.css 100644
View File

@ -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;
}

View File

@ -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"
}

View File

View File

@ -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>

View File

@ -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 %}

28
src/App.css 100644
View File

@ -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); }
}

17
src/App.js 100644
View File

@ -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;

9
src/App.test.js 100644
View File

@ -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);
});

5
src/index.css 100644
View File

@ -0,0 +1,5 @@
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}

8
src/index.js 100644
View File

@ -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();

22
src/jsx/main.jsx 100644
View File

@ -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')
);

View File

@ -0,0 +1,6 @@
export class Log{
static debug(txt){
console.debug('%cDEBUG: '+txt, 'background: #222; color: #bada55');
}
}

View File

@ -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 "";
}
}

View File

@ -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>);
}
}

View File

@ -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> );
}
}

View File

View File

@ -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>
);
}
});

View File

@ -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 ``
}
}

View File

@ -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>);
}
}

View File

@ -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>
)
}
}

View File

@ -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>);
}
}

View File

@ -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>);
}
}

54
src/jsx/ui/nav.jsx 100644
View File

@ -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>);
}
}

View File

@ -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>);
}
}

View File

@ -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();
}
}

View File

@ -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>);
}
}

7
src/logo.svg 100644
View File

@ -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

View File

@ -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();
});
}
}

View File

@ -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;
}

View File

@ -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;
}
}

150
src_less/main.less 100644
View File

@ -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';

View File

@ -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;
}
}

34
src_less/tabs.less 100644
View File

@ -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;
}
}
}