Theenoro
/
wochenbericht-manager
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

2.4 

Speicherversion auf 2. Unfertige UIs hinzugefügt. Wird nächste Woche nach gepusht. SQL geupdatet.
environments/production/deployments/15
Theenoro 2019-09-01 19:33:40 +02:00
parent 61aa2131a9
commit 72a9f6c0eb
21 changed files with 1561 additions and 970 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
.gitignore vendored
View File

@ -1,64 +1,66 @@
# Logs
logs
*.log
npm-debug.log*
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
#build/Release
release-builds
# Dependency directories
node_modules
jspm_packages
# Optional npm cache directory
.npm
# Optional REPL history
.node_repl_history
dist/app*
dist/make*
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
node_modules
# testing
/coverage
# production
/build
build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
build/
# Logs
logs
*.log
npm-debug.log*
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
#build/Release
release-builds
# Dependency directories
node_modules
jspm_packages
# Optional npm cache directory
.npm
# Optional REPL history
.node_repl_history
dist/app*
dist/make*
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
node_modules
# testing
/coverage
# production
/build
build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
build/
.vscode/

36
public/main.css
View File

@ -948,3 +948,39 @@ button.success:hover {
#settings-frame .form-group input {
width: 100%;
}
#tasks-frame {
display: flex;
}
#tasks-frame #tasks {
width: 25em;
}
#tasks-frame #dates {
width: 8em;
}
#tasks-frame #info {
width: 100%;
}
#notes-frame {
min-height: 100vh;
display: flex;
}
#notes-frame #notes-list {
width: 200px;
border-right: 1px solid #454545;
}
#notes-frame #notes-list .note.heigh {
border-color: #DD0000;
}
#notes-frame #notes-list .note.normal {
border-color: #DDDD00;
}
#notes-frame #notes-list .note.low {
border-color: #00DD55;
}
#notes-frame #notes-edit {
padding: 10px;
}
#notes-frame #notes-edit textarea {
width: calc(100vw - 450px);
height: 300px;
}

30
public/manifest.json
View File

@ -1,15 +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"
}
{
"short_name": "WBM",
"name": "Wochenbericht Manager",
"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"
}

10
src/jsx/static/debug.jsx
View File

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

75
src/jsx/static/migration-sc/0-1.jsx 100644
View File

@ -0,0 +1,75 @@
import {DB} from './../storage'
export class Mig_0_1{
constructor(){
var res = DB.cdb.exec("SELECT * FROM settings WHERE ke='version'");
if(res.length == 0){
console.log("UPDATE STORAGE")
this.mig_tasks();
}
}
mig_tasks(){
// TODO: MIGRATION TOOL FOR SAVE VERSION 1
DB.cdb.exec("CREATE TABLE IF NOT EXISTS days_have_tasks(day_id INTEGER ,task_id INTEGER);");
var res = DB.cdb.exec("SELECT * FROM days")[0].values;
console.log(res)
if(res.length>0){
for(var i = 0;i<res.length;i++){
// 5 = taskList
//console.log(res[i][5])
var tasks_for_day = res[i][5].split(',');
// 0 = Tag ID
var day_id = res[i][0];
for(var j = 0;j<tasks_for_day.length;j++){
console.log(tasks_for_day[j])
var sql2 = "INSERT INTO days_have_tasks VALUES ( "+day_id+","+tasks_for_day[j]+");";
//console.log(sql2)
DB.cdb.exec(sql2);
}
}
}
this.deleteOldTaskColumn();
}
deleteOldTaskColumn(){
//var sql = `ALTER TABLE "days" DROP COLUMN "taskList";`
var sql = `
PRAGMA foreign_keys=off;
BEGIN TRANSACTION;
CREATE TABLE IF NOT EXISTS new_days(
id INTEGER PRIMARY KEY AUTOINCREMENT,
date DATETIME ,
startTime DATETIME ,
breakTime INTEGER ,
endTime DATETIME
);
INSERT INTO new_days(id,date,startTime,breakTime,endTime)
SELECT id,date,startTime,breakTime,endTime
FROM days;
DROP TABLE days;
ALTER TABLE new_days RENAME TO days;
COMMIT;
PRAGMA foreign_keys=on;
`
DB.cdb.exec(sql);
this.addNotesTable();
}
addNotesTable(){
var sql = `CREATE TABLE notes (
id INTEGER PRIMARY KEY AUTOINCREMENT,
date DATETIME ,
title TEXT,
text TEXT,
priority TEXT
);`
DB.cdb.exec(sql);
this.updateVersion();
}
updateVersion(){
var sql = `INSERT INTO settings (ke,val) VALUES ("version","2")`
DB.cdb.exec(sql);
}
}

8
src/jsx/static/migration.jsx 100644
View File

@ -0,0 +1,8 @@
export class Migration {
constructor() {
}
}

639
src/jsx/static/storage.jsx
View File

@ -1,243 +1,398 @@
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 "";
}
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
);
CREATE TABLE tasks (
id INTEGER PRIMARY KEY AUTOINCREMENT,
taskName TEXT not NULL
);
CREATE TABLE IF NOT EXISTS days_have_tasks(day_id INTEGER ,task_id INTEGER);
CREATE TABLE notes (
id INTEGER PRIMARY KEY AUTOINCREMENT,
date DATETIME ,
title TEXT,
text TEXT,
priority TEXT
);
INSERT INTO settings (ke,val)
VALUES ('name','Max');
INSERT INTO settings (ke,val)
VALUES ('start','2018-08-01');
INSERT INTO settings (ke,val)
VALUES ('version','2');
`)
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)
Log.debug('load from date:'+date.getTime())
// get date
var sql = `SELECT * FROM days WHERE date=:date;`;
var stmt = DB.cdb.prepare(sql);
var res = stmt.getAsObject({":date":date.getTime()})
// clear statement memory
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 sql2 = `SELECT * FROM days_have_tasks WHERE day_id=:id`
var stmt2 = DB.cdb.prepare(sql2);
var tasks = [];
tasks.push(stmt2.getAsObject({":id":res.id}).task_id);
while (stmt2.step()) tasks.push(stmt2.get()[1]);
stmt2.free();
//return {breakTime: 0, date: null,startTime:null, endTime: null, taskList:[]}
//return 0;
//var tasks = resu.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();
/**
* @INFO: search for TASK name
*/
sql = `SELECT * FROM tasks WHERE taskName=:task`;
stmt = DB.cdb.prepare(sql);
res = stmt.getAsObject({':task':tasks[t]});
stmt.free();
//console.log(res);
/**
* @INFO: if task is not found add it as new task
* into the tasks table and research the taskname again
*/
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);
}
/**
* @INFO: store the task id in taskss[t]
*
*/
taskss[t]= res.id;
}
/**
* @INFO: get the choosen date
*/
sql = `SELECT * FROM days WHERE date=:date;`;
stmt = DB.cdb.prepare(sql);
console.log(args);
res = stmt.getAsObject({":date":args.date})
stmt.free()
/**
* @INFO: CHECK IF DATE EXISTS
*/
if(Object.keys(res).length === 0){
/**
* @TODO: rework if date not exists
*/
Log.debug('added new entry');
Log.debug(JSON.stringify(args))
sql = `INSERT INTO days(date,startTime,breakTime,endTime) VALUES(:date,:startTime,:breakTime,:endTime);`;
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()
sql = `SELECT * FROM days WHERE date=:date;`;
stmt = DB.cdb.prepare(sql);
res = stmt.getAsObject({
":date":args.date
});
/* DAY ID */
var d_id = res.id;
/**
* @INFO:
* for each day insert into days_have_tasks the tasks and the day id
*/
for(var i = 0;i<taskss.length;i++){
sql = `INSERT INTO days_have_tasks(day_id,task_id) VALUES(:did,:task);`;
stmt = DB.cdb.prepare(sql);
res = stmt.getAsObject(
{
":did":d_id,
":task":taskss[i]
}
)
stmt.free()
}
}else{
/**
* @INFO: get DATE ID
* @TODO: rewrite it as a external method
*/
sql = `SELECT * FROM days WHERE date=:date;`
stmt = DB.cdb.prepare(sql);
var id = stmt.getAsObject({":date":args.date}).id;
stmt.free()
sql = `SELECT * FROM days_have_tasks WHERE day_id=:id`
stmt = DB.cdb.prepare(sql);
var day_tasks = stmt.getAsObject({":id":id});
var old_tasks = [];
// load all old tasks in array
old_tasks.push(day_tasks.task_id)
while (stmt.step()) old_tasks.push(stmt.get()[1]);
stmt.free();
for(var x = 0;x<old_tasks.length;x++){
var t = taskss.indexOf(old_tasks[x])
if(t===-1){
sql = `DELETE FROM days_have_tasks WHERE day_id=:id AND task_id=:t_id;`
stmt = DB.cdb.prepare(sql);
stmt.getAsObject({":id":id,":t_id":old_tasks[x]});
}
}
/**
* @INFO
* ALL USED TASKS @var - taskss
*
* SELECT
*/
for(var i = 0;i<taskss.length;i++){
sql = `SELECT * FROM days_have_tasks WHERE day_id=:id AND task_id=:tid;`
stmt = DB.cdb.prepare(sql);
var tid = taskss[i];
var res = stmt.getAsObject({":id":id,":tid":tid});
stmt.free()
/**
* ADD TASK TO DAY
*/
if(typeof res.day_id == "undefined"){
var taskID = taskss[i];
/**
* @INFO: relate day_id and task_id in days_have_tasks
*/
sql = `INSERT INTO days_have_tasks(day_id,task_id) VALUES(:did,:task);`;
stmt = DB.cdb.prepare(sql);
res = stmt.getAsObject(
{
":did":id,
":task":taskID
}
)
stmt.free()
}
}
/** DELETE NOT USED TASKS */
/** @TODO: DELETE NOT USED TASKS FOR DAY */
/*
sql = `SELECT * FROM days_have_tasks WHERE day_id=:id AND task_id NOT IN :tid;`
stmt = DB.cdb.prepare(sql);
var tid = taskss[i];
var res = stmt.getAsObject({":id":id,":tid":"\"("+taskss.join('","')+")\""});
console.log(res);
stmt.free()
*/
/** */
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 "";
}
/**
* RES MAPPING
*/
static resMap(res){
}
}

456
src/jsx/ui/calender.jsx
View File

@ -1,228 +1,228 @@
import React from 'react';
import InfiniteCalendar from 'react-infinite-calendar';
import {DB} from '../static/storage'
import { Log } from '../static/debug';
import {Notify} from '../static/notify';
import { Tasks } from './calender/tasks';
//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: '#34495e',
floatingNav: {
background: '#34495e',
chevron: '#ffb142',
color: '#FFF',
},
headerColor: '#34495e',
selectionColor: '#34495e',
textColor: {
active: '#FFF',
default: '#333',
},
todayColor: '#ffb142',
weekdayColor: '#FFF',
}
var ct = ()=>{}
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);
this.entryChange = this.entryChange.bind(this);
this.addTask = this.addTask.bind(this);
this.delTask = this.delTask.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(){
Log.debug("unload Calender")
}
getDate(date){
// set selected date
me.cal_date = date;
var res = DB.loadDate(date)
Log.debug('LOAD RES')
console.log(res)
if(res.date === null){
res.date=this.cal_date;
}
if(res.startTime === null){
res.startTime=moment(this.cal_date).unix()*1000;
}
if(res.endTime === null){
res.endTime=moment(this.cal_date).unix()*1000;
}
this.setState(
res
)
}
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
}
);
Notify.emit({title:"",body:"Eintrag gespeichert.",type:"success"});
//ipcRenderer.send('saveDate',s)
}
entryChange(e){
console.log(e.target.attributes.getNamedItem("data-key").value+" "+e.target.value);
var tmp = this.state.taskList
tmp[e.target.attributes.getNamedItem("data-key").value] = e.target.value
this.setState({taskList: tmp});
}
addTask(){
var tmp = this.state.taskList;
tmp.push("");
this.setState({taskList: tmp})
}
delTask(e){
var tmp = this.state.taskList;
tmp.splice(e.target.attributes.getNamedItem("data-key").value,1);
this.setState({taskList: tmp});
}
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"></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></label><br/><textarea className="hidden" value={this.state.taskList} onChange={this.taskListChange}>
</textarea>
<div id="entrys">
{this.state.taskList.map((item, i) => (
<div className="entry-input" key={i}>
<input type="text" value={item} data-key={i} onChange={this.entryChange}/><button data-key={i} onClick={this.delTask}><i class="fas fa-trash"></i></button>
</div>)
)}
</div>
<button onClick={this.addTask}><i class="fas fa-plus"></i></button>
</div>
<div className="input">
<label></label><button className="btn success" onClick={this.save}>Speichern</button>
</div>
</div>
</div>
</div> );
}
}
import React from 'react';
import InfiniteCalendar from 'react-infinite-calendar';
import {DB} from '../static/storage'
import { Log } from '../static/debug';
import {Notify} from '../static/notify';
import { Tasks } from './calender/tasks';
//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: '#34495e',
floatingNav: {
background: '#34495e',
chevron: '#ffb142',
color: '#FFF',
},
headerColor: '#34495e',
selectionColor: '#34495e',
textColor: {
active: '#FFF',
default: '#333',
},
todayColor: '#ffb142',
weekdayColor: '#FFF',
}
var ct = ()=>{}
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);
this.entryChange = this.entryChange.bind(this);
this.addTask = this.addTask.bind(this);
this.delTask = this.delTask.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(){
Log.debug("unload Calender")
}
getDate(date){
// set selected date
me.cal_date = date;
var res = DB.loadDate(date)
Log.debug('LOAD RES')
Log.debug(JSON.stringify(res))
if(res.date === null){
res.date=this.cal_date;
}
if(res.startTime === null){
res.startTime=moment(this.cal_date).unix()*1000;
}
if(res.endTime === null){
res.endTime=moment(this.cal_date).unix()*1000;
}
this.setState(
res
)
}
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
}
);
Notify.emit({title:"",body:"Eintrag gespeichert.",type:"success"});
//ipcRenderer.send('saveDate',s)
}
entryChange(e){
//console.log(e.target.attributes.getNamedItem("data-key").value+" "+e.target.value);
var tmp = this.state.taskList
tmp[e.target.attributes.getNamedItem("data-key").value] = e.target.value
this.setState({taskList: tmp});
}
addTask(){
var tmp = this.state.taskList;
tmp.push("");
this.setState({taskList: tmp})
}
delTask(e){
var tmp = this.state.taskList;
tmp.splice(e.target.attributes.getNamedItem("data-key").value,1);
this.setState({taskList: tmp});
}
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"></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></label><br/><textarea className="hidden" value={this.state.taskList} onChange={this.taskListChange}>
</textarea>
<div id="entrys">
{this.state.taskList.map((item, i) => (
<div className="entry-input" key={i}>
<input type="text" value={item} data-key={i} onChange={this.entryChange}/><button data-key={i} onClick={this.delTask}><i class="fas fa-trash"></i></button>
</div>)
)}
</div>
<button onClick={this.addTask}><i class="fas fa-plus"></i></button>
</div>
<div className="input">
<label></label><button className="btn success" onClick={this.save}>Speichern</button>
</div>
</div>
</div>
</div> );
}
}

0
src/jsx/ui/components/modal.jsx 100644
View File

253
src/jsx/ui/fileLoader.jsx
View File

@ -1,122 +1,133 @@
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>
)
}
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);
this.state = {upBTN:null}
this.upload = this.upload.bind(this);
this.loadWBM = this.loadWBM.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();
}
upload(e){
this.setState({upBTN:e})
}
loadWBM(e){
this.state.upBTN.click();
}
render() {
return (
<div id="fileloader-frame">
<div className="contents">
<button onClick={this.createNew}>Neue Wochenberichtsmappe</button>
<hr/>
<button onClick={this.loadWBM}> 📂 Bestehende Wochenberichtsmappe laden</button>
<input ref={this.upload} type="file" id="files" name="files[]" onChange={this.handleFileSelect} style={{display:"none"}}/>
<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>
)
}
}

70
src/jsx/ui/home.jsx
View File

@ -1,35 +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>);
}
}
import React from 'react';
import {FileLoader} from './fileLoader'
import {DB} from './../static/storage'
import { Migrate } from './migrate';
//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 (<div><Migrate/></div>)
}
}
render(){
return (
<div id="home-frame">
<this.DbLoaded/>
</div>);
}
}

46
src/jsx/ui/migrate.jsx 100644
View File

@ -0,0 +1,46 @@
import React from 'react';
import {
FileLoader
} from './fileLoader'
import {
DB
} from './../static/storage'
import {Mig_0_1} from '../static/migration-sc/0-1'
//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
var me;
export class Migrate extends React.Component {
constructor(props) {
super(props);
this.state = {
saveVersion: "0",
}
}
componentDidMount(){
var res = DB.cdb.exec("SELECT * FROM settings WHERE ke='version'");
console.log(res);
if(res.length==0){
new Mig_0_1();
}else{
var version = res[0].values[0][2];
this.setState({saveVersion:version});
switch(version){
case "2":
console.log('All up to date')
break;
default:
break;
}
}
}
render() {
return (
<div id = "migrate-frame" >
Deine Speicher Version: {this.state.saveVersion} - Derzeitige Programm Version
</div>);
}
}

155
src/jsx/ui/nav.jsx
View File

@ -1,74 +1,81 @@
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'
import { Notify } from '../static/notify';
export class Nav extends React.Component {
constructor(props) {
super(props);
this.state = {
tab:(<Home/>),
notify:(<span></span>)
}
this.handleExportFile = this.handleExportFile.bind(this);
var me = this;
Notify.on((data)=>{
me.setState({notify:me.notify(data)});
setTimeout(function(){
me.setState({notify:(<span></span>)});
},3000)
});
}
handleExportFile(){
/**
* @TODO
* LOAD FILE
*/
}
handleCreateFile(){
/**
* @TODO
* CREATE FILE
*/
}
notify(data){
return(
<div className="notification success">
<div className="title">{data.title}</div>
<div className="body">{data.body}</div>
</div>
)
}
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 id="notify-center">
{this.state.notify}
</div>
</div>);
}
}
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 {WorkTimes} from './worktimes';
import {TasksUI} from './tasks';
import {DB} from './../static/storage'
import { Notify } from '../static/notify';
import { Notes } from './notes';
export class Nav extends React.Component {
constructor(props) {
super(props);
this.state = {
tab:(<Home/>),
notify:(<span></span>)
}
this.handleExportFile = this.handleExportFile.bind(this);
var me = this;
Notify.on((data)=>{
me.setState({notify:me.notify(data)});
setTimeout(function(){
me.setState({notify:(<span></span>)});
},3000)
});
}
handleExportFile(){
/**
* @TODO
* LOAD FILE
*/
}
handleCreateFile(){
/**
* @TODO
* CREATE FILE
*/
}
notify(data){
return(
<div className="notification success">
<div className="title">{data.title}</div>
<div className="body">{data.body}</div>
</div>
)
}
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={()=>{this.setState({tab:(<Notes/>)})}}>Notizen</button>
<button onClick={()=>{DB.exportDB()}}>Exportieren </button>
<button onClick={()=>{this.setState({tab:(<Calender/>)})}}>Kalender</button>
<button onClick={()=>{this.setState({tab:(<TasksUI/>)})}}>Tasks</button>
<button onClick={()=>{this.setState({tab:(<WorkTimes/>)})}}>Arbeitszeiten</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>
<a href='https://ko-fi.com/W7W511YSC' target='_blank'><img height='36' style={{border:0+"px",height:36+'px'}} src='https://az743702.vo.msecnd.net/cdn/kofi5.png?v=2' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
</div>
<div id="content">
{this.state.tab}
</div>
<div id="notify-center">
{this.state.notify}
</div>
</div>);
}
}

87
src/jsx/ui/notes.jsx 100644
View File

@ -0,0 +1,87 @@
import React from 'react';
import { DB } from '../static/storage';
const moment = require('moment');
export class Notes extends React.Component {
constructor(props) {
super(props);
var x = new Date();
this.state = {
notes:[],
date: moment(x).format("YYYY-MM-DD"),
time:moment(x).format("HH:MM"),
title:"-",
text:"---",
priority:"low"
}
this.chDate = this.chDate.bind(this);
this.chTime = this.chTime.bind(this);
this.chTitle = this.chTitle.bind(this);
this.chText = this.chText.bind(this);
this.chPriority = this.chPriority.bind(this);
this.save = this.save.bind(this);
this.delete = this.delete.bind(this);
}
componentDidMount(){
var sql = "SELECT * FROM notes;"
var stmt = DB.cdb.exec(sql);
/*var res = stmt.getAsObject(
{}
)
var dates = [];
dates.push(res.date);
while (stmt.step()) dates.push(stmt.get()[0]);
this.setState({dates:dates});*/
}
chDate(e){
var d = e.target.value;
this.setState({date:d});
}
chTime(e){
var t = e.target.value;
this.setState({time:t})
}
chTitle(e){
var t = e.target.value;
this.setState({title:t});
}
chText(e){
var t = e.target.value;
this.setState({text:t});
}
chPriority(e){
var p = e.target.value;
this.setState({priority:p})
}
delete(e){
}
save(e){
console.log("SAVE");
console.log(this.state.date);
var sql = `INSERT INTO notes ()`
}
render() {
return (
<div id="notes-frame">
<div id="notes-list">
</div>
<div id="notes-edit">
<button onClick={this.save}>Speichern</button><button onClick={this.delete}>Löschen</button>
<hr/>
Datum:<input type="date" value={this.state.date} onChange={this.chDate}/><br/>
Zeit:<input type="time" value={this.state.time} onChange={this.chTime}/><br/>
Titel:<input type="text" value={this.state.title} onChange={this.chTitle}/><br/>
Dringlichkeit:<select value={this.state.priority} onChange={this.chPriority}>
<option value="heigh">Hoch</option>
<option value="normal">Normal</option>
<option value="low">Niedrig</option>
</select><br/>
<textarea value={this.state.text} onChange={this.chText}></textarea>
</div>
</div>);
}
}

265
src/jsx/ui/print_modi/week.jsx
View File

@ -1,131 +1,136 @@
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{
/**
*
* @param {*} name
* @param {*} anfang
* @param {*} start
* @param {*} end
* @param {*} me
* @param {*} choosenTemplate
*/
static preview(name,anfang,start,end,me,choosenTemplate){
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).startOf('isoWeek'),'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');
if( md[2] === "00:00" && md[4] === "00:00"){
md[2] = "";
md[4] = "";
}
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){
if(choosenTemplate != "wochenbericht"){
var tmp = weeks[w].start;
weeks[w].start = moment(weeks[w].start).add(0, "days").format('DD/MM/YYYY');
weeks[w].end = moment(moment(tmp).day(7)).format('DD/MM/YYYY');
}else{
weeks[w].start = moment(weeks[w].start).add(0, "days").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);
}
}
}
/**
* @INFO
* Putting all Templates together for the print
*/
var build = Templates.template.header+Templates.template[choosenTemplate]+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();
}
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{
/**
*
* @param {*} name
* @param {*} anfang
* @param {*} start
* @param {*} end
* @param {*} me
* @param {*} choosenTemplate
*/
static preview(name,anfang,start,end,me,choosenTemplate){
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).startOf('isoWeek'),'weeks')+1;
weeks[week].end = "";
}
sql = `SELECT * FROM days_have_tasks WHERE day_id=`+md[0];
var ts = DB.cdb.exec(sql);
var tasks = []
for(var x in ts[0].values){
tasks.push(ts[0].values[x][1]);
}
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');
if( md[2] === "00:00" && md[4] === "00:00"){
md[2] = "";
md[4] = "";
}
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){
if(choosenTemplate != "wochenbericht"){
var tmp = weeks[w].start;
weeks[w].start = moment(weeks[w].start).add(0, "days").format('DD/MM/YYYY');
weeks[w].end = moment(moment(tmp).day(7)).format('DD/MM/YYYY');
}else{
weeks[w].start = moment(weeks[w].start).add(0, "days").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);
}
}
}
/**
* @INFO
* Putting all Templates together for the print
*/
var build = Templates.template.header+Templates.template[choosenTemplate]+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();
}
}

111
src/jsx/ui/settings.jsx
View File

@ -1,55 +1,56 @@
import React from 'react';
import ReactDOM from 'react-dom';
import InfiniteCalendar from 'react-infinite-calendar';
import { DB } from '../static/storage';
import { Notify } from '../static/notify';
//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);
Notify.emit({title:"",body:"Einstellungen gespeichert.",type:"success"});
}
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>);
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import InfiniteCalendar from 'react-infinite-calendar';
import { DB } from '../static/storage';
import { Notify } from '../static/notify';
//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);
Notify.emit({title:"",body:"Einstellungen gespeichert.",type:"success"});
}
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>
<hr/>
<button onClick={this.save}>Speichern</button>
</div>);
}
}

94
src/jsx/ui/tasks.jsx 100644
View File

@ -0,0 +1,94 @@
import React from 'react';
import {FileLoader} from './fileLoader'
import {DB} from './../static/storage'
const moment = require('moment');
//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
var me;
export class TasksUI extends React.Component {
constructor(props) {
super(props);
this.state = {
tasks:[{name:"",count:0,tid:0}],
dates:[],
selDate:"-",
taskss:""
}
this.onTaskClick = this.onTaskClick.bind(this);
this.loadDay = this.loadDay.bind(this);
}
componentDidMount(){
var sql = "SELECT dt.task_id,t.taskName , COUNT(dt.day_id) FROM days_have_tasks as dt,tasks as t WHERE dt.task_id=t.id GROUP BY dt.task_id;";
var tmp = DB.cdb.exec(sql);
if(tmp.length>0){
tmp = tmp[0].values
console.log(tmp)
var tt = [];
for(var t in tmp){
tt.push({tid:tmp[t][0],name:tmp[t][1],count:tmp[t][2]});
}
this.setState({tasks:tt});
}
}
onTaskClick(e){
var val = e.target.attributes.getNamedItem("data-value").value;
console.log(val);
var sql = "SELECT days.date FROM days_have_tasks as dt, days WHERE dt.day_id = days.id AND dt.task_id=:task_id ;"
var stmt = DB.cdb.prepare(sql);
var res = stmt.getAsObject(
{
":task_id":val
}
)
var dates = [];
dates.push(res.date);
while (stmt.step()) dates.push(stmt.get()[0]);
this.setState({dates:dates});
// console.log(moment(stmt.get()[0]).format('DD.MM.YYYY'));
stmt.free();
}
loadDay(e){
var val = e.target.attributes.getNamedItem("data-value").value;
var today = DB.loadDate(new Date(val/1));
this.setState({
selDate:val,
taskss:today.taskList.join(", ")
})
}
render(){
console.log(this.state.tasks)
return (
<div id="tasks-frame">
<table id="tasks">
<tbody>
<tr><th>Aufgaben Name</th><th>Anzahl</th></tr>
{Object.keys(this.state.tasks).map((item,val) => (
<tr data-value={this.state.tasks[item].tid} onClick={this.onTaskClick}>
<td data-value={this.state.tasks[item].tid}>{this.state.tasks[item].name}</td><td data-value={this.state.tasks[item].tid}>{this.state.tasks[item].count}</td>
</tr>)
)}
</tbody>
</table>
<table id="dates">
<tbody>
<tr><th>Datum</th></tr>
{this.state.dates.map((val)=>(
<tr><td><div onClick={this.loadDay} data-value={val}>{moment(val).format('DD.MM.YYYY')}</div></td></tr>
)
)}
</tbody>
</table>
<div id="info">
Date:{moment(this.state.selDate/1).format('DD.MM.YYYY')}<br/>
Aufgabe(n):{this.state.taskss}
</div>
</div>);
}
}

24
src/jsx/ui/worktimes.jsx 100644
View File

@ -0,0 +1,24 @@
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 WorkTimes extends React.Component {
constructor(props) {
super(props);
this.state = {
rel: false
}
}
render() {
return ( <div id = "home-frame" >
</div>);
}
}

4
src_less/main.less
View File

@ -166,4 +166,6 @@ button.btn, button {
@import './tabs.less';
@import './fileloader.less';
@import './print.less';
@import './settings.less';
@import './settings.less';
@import './tasks.less';
@import './notes.less';

26
src_less/notes.less 100644
View File

@ -0,0 +1,26 @@
#notes-frame{
min-height:100vh;
display:flex;
#notes-list{
width: 200px;
border-right: 1px solid #454545;
.note{
&.heigh{
border-color: #DD0000;
}
&.normal{
border-color: #DDDD00;
}
&.low{
border-color: #00DD55;
}
}
}
#notes-edit{
padding: 10px;
textarea{
width: ~"calc(100vw - 450px)";
height: 300px;
}
}
}

12
src_less/tasks.less 100644
View File

@ -0,0 +1,12 @@
#tasks-frame{
display:flex;
#tasks{
width: 25em;
}
#dates{
width:8em;
}
#info{
width: 100%;
}
}