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

36
public/main.css
View File

@ -948,3 +948,39 @@ button.success:hover {
#settings-frame .form-group input { #settings-frame .form-group input {
width: 100%; 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", "short_name": "WBM",
"name": "Create React App Sample", "name": "Wochenbericht Manager",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16", "sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon" "type": "image/x-icon"
} }
], ],
"start_url": "./index.html", "start_url": "./index.html",
"display": "standalone", "display": "standalone",
"theme_color": "#000000", "theme_color": "#000000",
"background_color": "#ffffff" "background_color": "#ffffff"
} }

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

@ -1,6 +1,6 @@
export class Log{ export class Log{
static debug(txt){ static debug(txt){
//console.debug('%cDEBUG: '+txt, 'background: #222; color: #bada55'); // 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'; import {Log} from './debug';
const SQL = require('sql.js') const SQL = require('sql.js')
export class DB{ export class DB{
static cdb; static cdb;
static loaded = false; static loaded = false;
static loadedCB = []; static loadedCB = [];
static newDB(){ static newDB(){
Log.debug('create new database'); Log.debug('create new database');
DB.cdb = new SQL.Database(); DB.cdb = new SQL.Database();
DB.cdb.exec( DB.cdb.exec(
`CREATE TABLE settings ( `CREATE TABLE settings (
id INTEGER PRIMARY KEY AUTOINCREMENT, id INTEGER PRIMARY KEY AUTOINCREMENT,
ke TEXT not null, ke TEXT not null,
val TEXT not null val TEXT not null
); );
CREATE TABLE days ( CREATE TABLE days (
id INTEGER PRIMARY KEY AUTOINCREMENT, id INTEGER PRIMARY KEY AUTOINCREMENT,
date DATETIME , date DATETIME ,
startTime DATETIME , startTime DATETIME ,
breakTime INTEGER , breakTime INTEGER ,
endTime DATETIME , endTime DATETIME
taskList TEXT );
); CREATE TABLE tasks (
CREATE TABLE tasks ( id INTEGER PRIMARY KEY AUTOINCREMENT,
id INTEGER PRIMARY KEY AUTOINCREMENT, taskName TEXT not NULL
taskName TEXT not NULL );
); CREATE TABLE IF NOT EXISTS days_have_tasks(day_id INTEGER ,task_id INTEGER);
INSERT INTO settings (ke,val) CREATE TABLE notes (
VALUES ('name','Max'); id INTEGER PRIMARY KEY AUTOINCREMENT,
INSERT INTO settings (ke,val) date DATETIME ,
VALUES ('start','2018-08-01'); title TEXT,
`) text TEXT,
DB.loaded = true; priority TEXT
DB.__load() );
DB.storeLocalStorage() INSERT INTO settings (ke,val)
} VALUES ('name','Max');
static storeLocalStorage(){ INSERT INTO settings (ke,val)
var data = DB.cdb.export(); VALUES ('start','2018-08-01');
var buffer = new Buffer(data); INSERT INTO settings (ke,val)
var blob = new Blob([buffer]); VALUES ('version','2');
var reader = new FileReader(); `)
reader.onload = function() { DB.loaded = true;
localStorage.setItem('storage',reader.result) DB.__load()
} DB.storeLocalStorage()
reader.readAsBinaryString(blob); }
} static storeLocalStorage(){
static loadLocalStorage(){ var data = DB.cdb.export();
var i, l, d, array; var buffer = new Buffer(data);
array = new Uint8Array(localStorage.getItem('storage')); var blob = new Blob([buffer]);
for (var i = 0; i < l; i++){ var reader = new FileReader();
array[i] = d.charCodeAt(i); reader.onload = function() {
} localStorage.setItem('storage',reader.result)
DB.loadDB(array); }
DB.loaded = true; reader.readAsBinaryString(blob);
DB.__load() }
} static loadLocalStorage(){
/** var i, l, d, array;
* array = new Uint8Array(localStorage.getItem('storage'));
* @param {type:Uint8Array} file Uint8Array for (var i = 0; i < l; i++){
*/ array[i] = d.charCodeAt(i);
static loadDB(file){ }
Log.debug('load database'); DB.loadDB(array);
DB.loaded = true;
DB.cdb = new SQL.Database(file); DB.__load()
DB.storeLocalStorage() }
DB.loaded = true; /**
DB.__load() *
return ""; * @param {type:Uint8Array} file Uint8Array
} */
static __load(){ static loadDB(file){
Log.debug('DB onload EVENT'); Log.debug('load database');
for(var l in DB.loadedCB){
DB.loadedCB[l](); DB.cdb = new SQL.Database(file);
} DB.storeLocalStorage()
} DB.loaded = true;
static onLoad(cb){ DB.__load()
Log.debug('added DB onload EVENT'); return "";
DB.loadedCB.push(cb); }
} static __load(){
Log.debug('DB onload EVENT');
/** for(var l in DB.loadedCB){
* DB.loadedCB[l]();
*/ }
static exportDB(){ }
Log.debug('export database'); static onLoad(cb){
var data = DB.cdb.export(); Log.debug('added DB onload EVENT');
var buffer = new Buffer(data); DB.loadedCB.push(cb);
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); static exportDB(){
var fileName = "wbm.sqlite"; Log.debug('export database');
link.download = fileName; var data = DB.cdb.export();
var buffer = new Buffer(data);
document.body.appendChild(link); //console.log(buffer);
link.click(); var blob = new Blob([buffer],{type:'application/x-sqlite3'});
document.body.removeChild(link); //console.log(blob);
window.URL.revokeObjectURL(link); //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);
* @param {*} date link.click();
*/ document.body.removeChild(link);
static loadDate(date){ window.URL.revokeObjectURL(link);
//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()}) * @param {*} date
stmt.free(); */
Log.debug(JSON.stringify(res)); static loadDate(date){
//var re = DB.cdb.exec("SELECT * FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE='BASE TABLE'");
if(Object.keys(res).length === 0){ //console.log(re)
return {breakTime: 0, date: null,startTime:null, endTime: null, taskList:[]} Log.debug('load from date:'+date.getTime())
}else{ // get date
var tasks = res.taskList.split(','); var sql = `SELECT * FROM days WHERE date=:date;`;
sql = `SELECT * FROM tasks WHERE id=:id`; var stmt = DB.cdb.prepare(sql);
for ( var task in tasks){ var res = stmt.getAsObject({":date":date.getTime()})
stmt = DB.cdb.prepare(sql); // clear statement memory
tasks[task] = stmt.getAsObject({":id":tasks[task]}).taskName; stmt.free();
stmt.free();
} Log.debug(JSON.stringify(res));
res.taskList = tasks;
return res; if(Object.keys(res).length === 0){
} return {breakTime: 0, date: null,startTime:null, endTime: null, taskList:[]}
} }else{
static saveDate(args){ var sql2 = `SELECT * FROM days_have_tasks WHERE day_id=:id`
Log.debug('save date'); var stmt2 = DB.cdb.prepare(sql2);
Log.debug(JSON.stringify(args))
var sql;
var stmt; var tasks = [];
var res; tasks.push(stmt2.getAsObject({":id":res.id}).task_id);
var tasks = args.taskList; while (stmt2.step()) tasks.push(stmt2.get()[1]);
var taskss = [] stmt2.free();
console.log(tasks); //return {breakTime: 0, date: null,startTime:null, endTime: null, taskList:[]}
for(var t in tasks){ //return 0;
if(typeof tasks[t] === 'undefined'){ //var tasks = resu.taskList.split(',');
continue; sql = `SELECT * FROM tasks WHERE id=:id`;
}
tasks[t] = tasks[t].trim(); for ( var task in tasks){
sql = `SELECT * FROM tasks WHERE taskName=:task`; stmt = DB.cdb.prepare(sql);
stmt = DB.cdb.prepare(sql); tasks[task] = stmt.getAsObject({":id":tasks[task]}).taskName;
res = stmt.getAsObject({':task':tasks[t]}); stmt.free();
stmt.free(); }
console.log(res); res.taskList = tasks;
if(Object.keys(res).length === 0){ return res;
sql = `INSERT INTO tasks(taskName) VALUES(:task);`; }
stmt = DB.cdb.prepare(sql); }
res = stmt.getAsObject( static saveDate(args){
{ Log.debug('save date');
":task":tasks[t] Log.debug(JSON.stringify(args))
} var sql;
) var stmt;
stmt.free() var res;
sql = `SELECT * FROM tasks WHERE taskName=:task`; var tasks = args.taskList;
stmt = DB.cdb.prepare(sql); var taskss = []
res = stmt.getAsObject({':task':tasks[t]}); //console.log(tasks);
stmt.free(); for(var t in tasks){
console.log(res); if(typeof tasks[t] === 'undefined'){
} continue;
taskss[t]= res.id; }
tasks[t] = tasks[t].trim();
} /**
sql = `SELECT * FROM days WHERE date=:date;`; * @INFO: search for TASK name
stmt = DB.cdb.prepare(sql); */
console.log(args); sql = `SELECT * FROM tasks WHERE taskName=:task`;
res = stmt.getAsObject({":date":args.date}) stmt = DB.cdb.prepare(sql);
stmt.free() res = stmt.getAsObject({':task':tasks[t]});
stmt.free();
if(Object.keys(res).length === 0){ //console.log(res);
Log.debug('added new entry'); /**
Log.debug(JSON.stringify(args)) * @INFO: if task is not found add it as new task
sql = `INSERT INTO days(date,startTime,breakTime,endTime,taskList) VALUES(:date,:startTime,:breakTime,:endTime,:taskList);`; * into the tasks table and research the taskname again
stmt = DB.cdb.prepare(sql); */
res = stmt.getAsObject( if(Object.keys(res).length === 0){
{ sql = `INSERT INTO tasks(taskName) VALUES(:task);`;
":date":args.date, stmt = DB.cdb.prepare(sql);
":startTime":args.startTime, res = stmt.getAsObject(
":breakTime":args.breakTime, {
":endTime":args.endTime, ":task":tasks[t]
":taskList":taskss.join() }
} )
) stmt.free()
stmt.free() sql = `SELECT * FROM tasks WHERE taskName=:task`;
}else{ stmt = DB.cdb.prepare(sql);
Log.debug('update entry'); res = stmt.getAsObject({':task':tasks[t]});
Log.debug(JSON.stringify(args)) stmt.free();
sql = `UPDATE days SET startTime=:startTime,breakTime=:breakTime,endTime=:endTime,taskList=:taskList WHERE date=:date;`; console.log(res);
stmt = DB.cdb.prepare(sql); }
res = stmt.getAsObject( /**
{ * @INFO: store the task id in taskss[t]
":date":args.date, *
":startTime":args.startTime, */
":breakTime":args.breakTime, taskss[t]= res.id;
":endTime":args.endTime,
":taskList":taskss.join() }
} /**
) * @INFO: get the choosen date
Log.debug(res); */
stmt.free() sql = `SELECT * FROM days WHERE date=:date;`;
} stmt = DB.cdb.prepare(sql);
} console.log(args);
static handleTasks(){ res = stmt.getAsObject({":date":args.date})
stmt.free()
}
/**
* @INFO: CHECK IF DATE EXISTS
*/
static loadSettings(key){ if(Object.keys(res).length === 0){
var sql = `SELECT * FROM settings WHERE ke=:key`; /**
var stmt = DB.cdb.prepare(sql); * @TODO: rework if date not exists
var res = stmt.getAsObject({':key':key}); */
stmt.free(); Log.debug('added new entry');
return res; 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(
* {
* @param {*} obj name: Name , start: Date ( 2018-08-01 ) ":date":args.date,
*/ ":startTime":args.startTime,
static saveSettings(obj){ ":breakTime":args.breakTime,
var sql = `UPDATE settings SET val=:name WHERE ke="name"`; ":endTime":args.endTime
var stmt = DB.cdb.prepare(sql); /*":taskList":taskss.join()*/
stmt.getAsObject({':name':obj.name}); }
stmt.free(); )
stmt.free()
sql = `UPDATE settings SET val=:start WHERE ke="start"`; sql = `SELECT * FROM days WHERE date=:date;`;
stmt = DB.cdb.prepare(sql); stmt = DB.cdb.prepare(sql);
stmt.getAsObject({':start':obj.start}); res = stmt.getAsObject({
stmt.free(); ":date":args.date
return ""; });
} /* 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 React from 'react';
import InfiniteCalendar from 'react-infinite-calendar'; import InfiniteCalendar from 'react-infinite-calendar';
import {DB} from '../static/storage' import {DB} from '../static/storage'
import { Log } from '../static/debug'; import { Log } from '../static/debug';
import {Notify} from '../static/notify'; import {Notify} from '../static/notify';
import { Tasks } from './calender/tasks'; import { Tasks } from './calender/tasks';
//import 'react-infinite-calendar/styles.css'; // only needs to be imported once //import 'react-infinite-calendar/styles.css'; // only needs to be imported once
//const { ipcRenderer} = require('electron'); //const { ipcRenderer} = require('electron');
const moment = require('moment'); const moment = require('moment');
var me = null; var me = null;
/* /*
#2C3A47; #2C3A47;
@background-2:#596571; @background-2:#596571;
*/ */
const cal_theme = { const cal_theme = {
accentColor: '#34495e', accentColor: '#34495e',
floatingNav: { floatingNav: {
background: '#34495e', background: '#34495e',
chevron: '#ffb142', chevron: '#ffb142',
color: '#FFF', color: '#FFF',
}, },
headerColor: '#34495e', headerColor: '#34495e',
selectionColor: '#34495e', selectionColor: '#34495e',
textColor: { textColor: {
active: '#FFF', active: '#FFF',
default: '#333', default: '#333',
}, },
todayColor: '#ffb142', todayColor: '#ffb142',
weekdayColor: '#FFF', weekdayColor: '#FFF',
} }
var ct = ()=>{} var ct = ()=>{}
export class Calender extends React.Component { export class Calender extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
// Render the Calendar // Render the Calendar
this.cal_date = new Date(); this.cal_date = new Date();
this.state = { this.state = {
breakTime: 0, breakTime: 0,
date:new Date(), date:new Date(),
endTime:null, endTime:null,
startTime:null, startTime:null,
taskList:[] taskList:[]
} }
this.startTimeChange = this.startTimeChange.bind(this); this.startTimeChange = this.startTimeChange.bind(this);
this.endTimeChange = this.endTimeChange.bind(this); this.endTimeChange = this.endTimeChange.bind(this);
this.breakTimeChange = this.breakTimeChange.bind(this); this.breakTimeChange = this.breakTimeChange.bind(this);
this.taskListChange = this.taskListChange.bind(this); this.taskListChange = this.taskListChange.bind(this);
this.getDate = this.getDate.bind(this) this.getDate = this.getDate.bind(this)
this.save = this.save.bind(this); this.save = this.save.bind(this);
this.entryChange = this.entryChange.bind(this); this.entryChange = this.entryChange.bind(this);
this.addTask = this.addTask.bind(this); this.addTask = this.addTask.bind(this);
this.delTask = this.delTask.bind(this); this.delTask = this.delTask.bind(this);
me = this; me = this;
this.today = new Date(); this.today = new Date();
this.lastWeek = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 7); this.lastWeek = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 7);
this.worktime = 0; this.worktime = 0;
/* /*
@TODO LOAD CURRENT DATE @TODO LOAD CURRENT DATE
ipcRenderer.on('loadDate-reply', (event, arg) => { ipcRenderer.on('loadDate-reply', (event, arg) => {
//console.log(arg) // prints "pong" //console.log(arg) // prints "pong"
this.setState( this.setState(
arg.data arg.data
) )
if(arg.data.date === null){ if(arg.data.date === null){
this.setState({date:this.cal_date}); this.setState({date:this.cal_date});
} }
if(arg.data.startTime === null){ if(arg.data.startTime === null){
this.setState({startTime:this.cal_date}); this.setState({startTime:this.cal_date});
} }
if(arg.data.endTime === null){ if(arg.data.endTime === null){
this.setState({endTime:this.cal_date}); this.setState({endTime:this.cal_date});
} }
}) })
*/ */
} }
componentWillUnmount(){ componentWillUnmount(){
Log.debug("unload Calender") Log.debug("unload Calender")
} }
getDate(date){ getDate(date){
// set selected date // set selected date
me.cal_date = date; me.cal_date = date;
var res = DB.loadDate(date) var res = DB.loadDate(date)
Log.debug('LOAD RES') Log.debug('LOAD RES')
console.log(res) Log.debug(JSON.stringify(res))
if(res.date === null){ if(res.date === null){
res.date=this.cal_date; res.date=this.cal_date;
} }
if(res.startTime === null){ if(res.startTime === null){
res.startTime=moment(this.cal_date).unix()*1000; res.startTime=moment(this.cal_date).unix()*1000;
} }
if(res.endTime === null){ if(res.endTime === null){
res.endTime=moment(this.cal_date).unix()*1000; res.endTime=moment(this.cal_date).unix()*1000;
} }
this.setState( this.setState(
res res
) )
} }
startTimeChange(e){ startTimeChange(e){
//this.setState({startTime: e.target.value}); //this.setState({startTime: e.target.value});
var hm = e.target.value.split(':'); var hm = e.target.value.split(':');
this.setState({startTime: moment(this.state.date).set({hour:hm[0],minute:hm[1]}).unix()*1000}); this.setState({startTime: moment(this.state.date).set({hour:hm[0],minute:hm[1]}).unix()*1000});
} }
endTimeChange(e){ endTimeChange(e){
////console.log(e.target.value) ////console.log(e.target.value)
var hm = e.target.value.split(':'); var hm = e.target.value.split(':');
////console.log(moment(this.state.date).set({hour:hm[0],minute:hm[1]}).format('HH:mm:ss')) ////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 }); this.setState({endTime: moment(this.state.date).set({hour:hm[0],minute:hm[1]}).unix()*1000 });
} }
breakTimeChange(e){ breakTimeChange(e){
this.setState({breakTime: e.target.value}); this.setState({breakTime: e.target.value});
} }
taskListChange(e){ taskListChange(e){
this.setState({taskList: e.target.value.split(',')}); this.setState({taskList: e.target.value.split(',')});
} }
save(){ save(){
//console.log("Speichern") //console.log("Speichern")
Log.debug(JSON.stringify(this.state)) Log.debug(JSON.stringify(this.state))
Log.debug(JSON.stringify({ Log.debug(JSON.stringify({
breakTime: this.state.breakTime, breakTime: this.state.breakTime,
date:moment(this.state.date).unix()*1000, date:moment(this.state.date).unix()*1000,
endTime:this.state.endTime, endTime:this.state.endTime,
startTime:this.state.startTime, startTime:this.state.startTime,
taskList:this.state.taskList taskList:this.state.taskList
})) }))
DB.saveDate( DB.saveDate(
{ {
breakTime: this.state.breakTime, breakTime: this.state.breakTime,
date:moment(this.state.date).unix()*1000, date:moment(this.state.date).unix()*1000,
endTime:this.state.endTime, endTime:this.state.endTime,
startTime:this.state.startTime, startTime:this.state.startTime,
taskList:this.state.taskList taskList:this.state.taskList
} }
); );
Notify.emit({title:"",body:"Eintrag gespeichert.",type:"success"}); Notify.emit({title:"",body:"Eintrag gespeichert.",type:"success"});
//ipcRenderer.send('saveDate',s) //ipcRenderer.send('saveDate',s)
} }
entryChange(e){ entryChange(e){
console.log(e.target.attributes.getNamedItem("data-key").value+" "+e.target.value); //console.log(e.target.attributes.getNamedItem("data-key").value+" "+e.target.value);
var tmp = this.state.taskList var tmp = this.state.taskList
tmp[e.target.attributes.getNamedItem("data-key").value] = e.target.value tmp[e.target.attributes.getNamedItem("data-key").value] = e.target.value
this.setState({taskList: tmp}); this.setState({taskList: tmp});
} }
addTask(){ addTask(){
var tmp = this.state.taskList; var tmp = this.state.taskList;
tmp.push(""); tmp.push("");
this.setState({taskList: tmp}) this.setState({taskList: tmp})
} }
delTask(e){ delTask(e){
var tmp = this.state.taskList; var tmp = this.state.taskList;
tmp.splice(e.target.attributes.getNamedItem("data-key").value,1); tmp.splice(e.target.attributes.getNamedItem("data-key").value,1);
this.setState({taskList: tmp}); this.setState({taskList: tmp});
} }
render() { render() {
var wk = 0; var wk = 0;
if(this.state.endTime !== null){ if(this.state.endTime !== null){
try{ try{
wk = moment.duration(moment(this.state.endTime).diff(moment(this.state.startTime).subtract(-this.state.breakTime,'minutes'))); wk = moment.duration(moment(this.state.endTime).diff(moment(this.state.startTime).subtract(-this.state.breakTime,'minutes')));
//console.log('XD ',wk) //console.log('XD ',wk)
wk = moment.utc(wk._milliseconds).format('HH:mm') wk = moment.utc(wk._milliseconds).format('HH:mm')
}catch(e){ }catch(e){
//console.log(e) //console.log(e)
} }
}else{ }else{
} }
console.log(moment(this.state.date).diff(moment(DB.loadSettings('start').val),'week')); //console.log(moment(this.state.date).diff(moment(DB.loadSettings('start').val),'week'));
////console.log(moment(this.state.endTime).format('HH:mm:ss')) ////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 } 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"> return ( <div id="editor-frame">
<div id="calender"> <div id="calender">
<InfiniteCalendar selected = { this.today } theme={cal_theme} locale = { loc } onSelect={this.getDate}/> <InfiniteCalendar selected = { this.today } theme={cal_theme} locale = { loc } onSelect={this.getDate}/>
</div > </div >
<div id="mask"> <div id="mask">
<div className="header"></div> <div className="header"></div>
<div className="inputGroup"> <div className="inputGroup">
<div className="input"> <div className="input">
<label>Arbeitszeit :</label><input type="text" disable="true" value={wk}/> <label>Arbeitszeit :</label><input type="text" disable="true" value={wk}/>
</div> </div>
<div className="input"> <div className="input">
<label>Anfangszeit:</label><input type="time" value={moment(this.state.startTime).format('HH:mm')} onChange={this.startTimeChange}/> <label>Anfangszeit:</label><input type="time" value={moment(this.state.startTime).format('HH:mm')} onChange={this.startTimeChange}/>
</div> </div>
<div className="input"> <div className="input">
<label>Feierabend :</label><input type="time" value={moment(this.state.endTime).format('HH:mm')} onChange={this.endTimeChange}/> <label>Feierabend :</label><input type="time" value={moment(this.state.endTime).format('HH:mm')} onChange={this.endTimeChange}/>
</div> </div>
<div className="input"> <div className="input">
<label>Pause :</label><input type="number" min="0" value={this.state.breakTime} onChange={this.breakTimeChange}/> <label>Pause :</label><input type="number" min="0" value={this.state.breakTime} onChange={this.breakTimeChange}/>
</div> </div>
<div className="input"> <div className="input">
<label>Tätigkeiten</label> <label>Tätigkeiten</label>
<label></label><br/><textarea className="hidden" value={this.state.taskList} onChange={this.taskListChange}> <label></label><br/><textarea className="hidden" value={this.state.taskList} onChange={this.taskListChange}>
</textarea> </textarea>
<div id="entrys"> <div id="entrys">
{this.state.taskList.map((item, i) => ( {this.state.taskList.map((item, i) => (
<div className="entry-input" key={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> <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>)
)} )}
</div> </div>
<button onClick={this.addTask}><i class="fas fa-plus"></i></button> <button onClick={this.addTask}><i class="fas fa-plus"></i></button>
</div> </div>
<div className="input"> <div className="input">
<label></label><button className="btn success" onClick={this.save}>Speichern</button> <label></label><button className="btn success" onClick={this.save}>Speichern</button>
</div> </div>
</div> </div>
</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 React from 'react';
import {DB} from '../static/storage' import {DB} from '../static/storage'
//var SQL = require('sql.js'); //var SQL = require('sql.js');
//const moment = require('moment'); //const moment = require('moment');
var BASE64_MARKER = ';base64,'; var BASE64_MARKER = ';base64,';
function convertDataURIToBinary(dataURI) { function convertDataURIToBinary(dataURI) {
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length; var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index); var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64); var raw = window.atob(base64);
var rawLength = raw.length; var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength)); var array = new Uint8Array(new ArrayBuffer(rawLength));
for(var i = 0; i < rawLength; i++) { for(var i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i); array[i] = raw.charCodeAt(i);
} }
return array; return array;
} }
export class FileLoader extends React.Component { export class FileLoader extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleFileSelect = this.handleFileSelect.bind(this); this.handleFileSelect = this.handleFileSelect.bind(this);
this.createNew = this.createNew.bind(this); this.createNew = this.createNew.bind(this);
this.state = {upBTN:null}
}
b64toBlob(b64Data, contentType, sliceSize) { this.upload = this.upload.bind(this);
contentType = contentType || ''; this.loadWBM = this.loadWBM.bind(this)
sliceSize = sliceSize || 512; }
b64toBlob(b64Data, contentType, sliceSize) {
var byteCharacters = atob(b64Data); contentType = contentType || '';
var byteArrays = []; sliceSize = sliceSize || 512;
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { var byteCharacters = atob(b64Data);
var slice = byteCharacters.slice(offset, offset + sliceSize); var byteArrays = [];
var byteNumbers = new Array(slice.length); for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
for (var i = 0; i < slice.length; i++) { var slice = byteCharacters.slice(offset, offset + sliceSize);
byteNumbers[i] = slice.charCodeAt(i);
} var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
var byteArray = new Uint8Array(byteNumbers); byteNumbers[i] = slice.charCodeAt(i);
}
byteArrays.push(byteArray);
} var byteArray = new Uint8Array(byteNumbers);
var blob = new Blob(byteArrays, {type: contentType}); byteArrays.push(byteArray);
return blob; }
}
handleFileSelect(evt) { var blob = new Blob(byteArrays, {type: contentType});
var files = evt.target.files; // FileList object return blob;
}
// Loop through the FileList and render image files as thumbnails. handleFileSelect(evt) {
for (var i = 0, f; f = files[i]; i++) { var files = evt.target.files; // FileList object
// Only process image files. // Loop through the FileList and render image files as thumbnails.
/*if (!f.type.match('image.*')) { for (var i = 0, f; f = files[i]; i++) {
continue;
}*/ // Only process image files.
console.log(f.type) /*if (!f.type.match('image.*')) {
var reader = new FileReader(); continue;
}*/
// Closure to capture the file information. console.log(f.type)
var me = this; var reader = new FileReader();
reader.onload = (function (theFile) {
return function (e) { // Closure to capture the file information.
// Render thumbnail. var me = this;
console.log(e.target.result) reader.onload = (function (theFile) {
console.log(theFile) return function (e) {
var blob = me.b64toBlob(e.target.result.split('base64,')[1],theFile.type); // Render thumbnail.
console.log(blob) //console.log(e.target.result)
//var fi = new FileReader(); //console.log(theFile)
//var f_ = fi.readAsDataURL(e.target.result); var blob = me.b64toBlob(e.target.result.split('base64,')[1],theFile.type);
var uInt8Array = new Uint8Array(convertDataURIToBinary(e.target.result)); //console.log(blob)
//var fi = new FileReader();
DB.loadDB(uInt8Array); //var f_ = fi.readAsDataURL(e.target.result);
//DB.loadDate('2018-06-25 22:00:00.000 +00:00'); var uInt8Array = new Uint8Array(convertDataURIToBinary(e.target.result));
};
})(f); DB.loadDB(uInt8Array);
//DB.loadDate('2018-06-25 22:00:00.000 +00:00');
// Read in the image file as a data URL. };
reader.readAsDataURL(f); })(f);
console.log(f)
} // Read in the image file as a data URL.
} reader.readAsDataURL(f);
createNew(){ console.log(f)
DB.newDB(); }
} }
render() { createNew(){
return ( DB.newDB();
<div id="fileloader-frame"> }
<div className="contents"> upload(e){
<button onClick={this.createNew}>Neue Wochenberichtsmappe</button> this.setState({upBTN:e})
<hr/> }
<input type="file" id="files" name="files[]" onChange={this.handleFileSelect}/> loadWBM(e){
<output id="list"></output> this.state.upBTN.click();
<hr/> }
Erstellt von:<br/><a rel="noopener noreferrer" target="_blank" href="https://lucajaents.ch">Luca Jäntsch</a> render() {
</div> return (
</div>); <div id="fileloader-frame">
} <div className="contents">
}
<button onClick={this.createNew}>Neue Wochenberichtsmappe</button>
export class Export extends React.Component{ <hr/>
constructor(props){ <button onClick={this.loadWBM}> 📂 Bestehende Wochenberichtsmappe laden</button>
super(props); <input ref={this.upload} type="file" id="files" name="files[]" onChange={this.handleFileSelect} style={{display:"none"}}/>
this.state = { <output id="list"></output>
<hr/>
} Erstellt von:<br/><a rel="noopener noreferrer" target="_blank" href="https://lucajaents.ch">Luca Jäntsch</a>
} </div>
render(){ </div>);
return ( }
<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 React from 'react';
import {FileLoader} from './fileLoader' import {FileLoader} from './fileLoader'
import {DB} from './../static/storage' import {DB} from './../static/storage'
//import 'react-infinite-calendar/styles.css'; // only needs to be imported once import { Migrate } from './migrate';
//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
var me;
var me;
export class Home extends React.Component {
constructor(props) { export class Home extends React.Component {
super(props); constructor(props) {
this.state = { super(props);
rel:false this.state = {
} rel:false
DB.onLoad(this.Dblo); }
me = this; DB.onLoad(this.Dblo);
} me = this;
Dblo(){ }
me.setState({rel:!me.state.rel}) Dblo(){
} me.setState({rel:!me.state.rel})
DbLoaded(){ }
DbLoaded(){
if(DB.loaded === false){
return <FileLoader/> if(DB.loaded === false){
}else{ return <FileLoader/>
return "" }else{
} return (<div><Migrate/></div>)
} }
render(){ }
return ( render(){
<div id="home-frame"> return (
<this.DbLoaded/> <div id="home-frame">
<this.DbLoaded/>
</div>); </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 React from 'react';
import {Home} from './home'; import {Home} from './home';
import {Calender} from './calender'; import {Calender} from './calender';
import {Generator} from './generator'; import {Generator} from './generator';
import {Print} from './print'; import {Print} from './print';
import {Settings} from './settings'; import {Settings} from './settings';
import {WorkTimes} from './worktimes';
import {DB} from './../static/storage' import {TasksUI} from './tasks';
import { Notify } from '../static/notify';
import {DB} from './../static/storage'
export class Nav extends React.Component { import { Notify } from '../static/notify';
constructor(props) { import { Notes } from './notes';
super(props);
this.state = { export class Nav extends React.Component {
tab:(<Home/>), constructor(props) {
notify:(<span></span>) super(props);
} this.state = {
this.handleExportFile = this.handleExportFile.bind(this); tab:(<Home/>),
var me = this; notify:(<span></span>)
Notify.on((data)=>{ }
me.setState({notify:me.notify(data)}); this.handleExportFile = this.handleExportFile.bind(this);
setTimeout(function(){ var me = this;
me.setState({notify:(<span></span>)}); Notify.on((data)=>{
},3000) me.setState({notify:me.notify(data)});
}); setTimeout(function(){
} me.setState({notify:(<span></span>)});
handleExportFile(){ },3000)
/** });
* @TODO }
* LOAD FILE handleExportFile(){
*/ /**
} * @TODO
handleCreateFile(){ * LOAD FILE
/** */
* @TODO }
* CREATE FILE handleCreateFile(){
*/ /**
} * @TODO
notify(data){ * CREATE FILE
return( */
<div className="notification success"> }
<div className="title">{data.title}</div> notify(data){
<div className="body">{data.body}</div> return(
</div> <div className="notification success">
) <div className="title">{data.title}</div>
} <div className="body">{data.body}</div>
render() { </div>
/*<button onClick={this.handleCreateFile}>Erstellen </button>*/ )
return ( }
<div id="container"> render() {
<div id="nav"> /*<button onClick={this.handleCreateFile}>Erstellen </button>*/
<div className="header"> return (
WBM <div id="container">
</div> <div id="nav">
<button onClick={()=>{this.setState({tab:(<Home/>)})}}>Home</button> <div className="header">
WBM
<button onClick={()=>{DB.exportDB()}}>Exportieren </button> </div>
<button onClick={()=>{this.setState({tab:(<Calender/>)})}}>Kalender</button> <button onClick={()=>{this.setState({tab:(<Home/>)})}}>Home</button>
<button onClick={()=>{this.setState({tab:(<Generator/>)})}}>Generator</button> <button onClick={()=>{this.setState({tab:(<Notes/>)})}}>Notizen</button>
<button onClick={()=>{this.setState({tab:(<Print/>)})}}>Drucken</button> <button onClick={()=>{DB.exportDB()}}>Exportieren </button>
<button onClick={()=>{this.setState({tab:(<Settings/>)})}}>Einstellungen</button> <button onClick={()=>{this.setState({tab:(<Calender/>)})}}>Kalender</button>
<hr/> <button onClick={()=>{this.setState({tab:(<TasksUI/>)})}}>Tasks</button>
Erstellt von:<br/><a target="_blank" rel="noopener noreferrer" href="https://lucajaents.ch">Luca Jäntsch</a> <button onClick={()=>{this.setState({tab:(<WorkTimes/>)})}}>Arbeitszeiten</button>
</div> <button onClick={()=>{this.setState({tab:(<Generator/>)})}}>Generator</button>
<div id="content"> <button onClick={()=>{this.setState({tab:(<Print/>)})}}>Drucken</button>
{this.state.tab} <button onClick={()=>{this.setState({tab:(<Settings/>)})}}>Einstellungen</button>
</div>
<div id="notify-center"> <hr/>
{this.state.notify} Erstellt von:<br/><a target="_blank" rel="noopener noreferrer" href="https://lucajaents.ch">Luca Jäntsch</a>
</div> <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>
} <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 {Templates} from '../components/templates';
import { DB } from '../../static/storage'; import { DB } from '../../static/storage';
//import 'react-infinite-calendar/styles.css'; // only needs to be imported once //import 'react-infinite-calendar/styles.css'; // only needs to be imported once
const moment = require('moment'); const moment = require('moment');
const nunjucks = require('nunjucks'); const nunjucks = require('nunjucks');
export class Modi_Week{ export class Modi_Week{
/** /**
* *
* @param {*} name * @param {*} name
* @param {*} anfang * @param {*} anfang
* @param {*} start * @param {*} start
* @param {*} end * @param {*} end
* @param {*} me * @param {*} me
* @param {*} choosenTemplate * @param {*} choosenTemplate
*/ */
static preview(name,anfang,start,end,me,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 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); var days = DB.cdb.exec(sql);
//for(var result = []; days.step();) result.push(days.getAsObject({':start':me.state.start,':end':me.state.end})); //for(var result = []; days.step();) result.push(days.getAsObject({':start':me.state.start,':end':me.state.end}));
var d = days[0].values; var d = days[0].values;
var weeks = {}; var weeks = {};
for(var i in d){ for(var i in d){
var md = d[i]; var md = d[i];
var week =moment(md[4]).diff(start,'weeks'); var week =moment(md[4]).diff(start,'weeks');
if(typeof weeks[week] === 'undefined'){ if(typeof weeks[week] === 'undefined'){
weeks[week] = {}; weeks[week] = {};
weeks[week].data = []; weeks[week].data = [];
weeks[week].start = md[1]; weeks[week].start = md[1];
weeks[week].num = moment(md[1]).diff(moment(anfang).startOf('isoWeek'),'weeks')+1; weeks[week].num = moment(md[1]).diff(moment(anfang).startOf('isoWeek'),'weeks')+1;
weeks[week].end = ""; weeks[week].end = "";
} }
var tasks = md[5].split(','); sql = `SELECT * FROM days_have_tasks WHERE day_id=`+md[0];
for(var t in tasks){ var ts = DB.cdb.exec(sql);
sql = 'SELECT * FROM tasks WHERE id=:id'; var tasks = []
var stmt = DB.cdb.prepare(sql); for(var x in ts[0].values){
var res = stmt.getAsObject({':id':tasks[t]}); tasks.push(ts[0].values[x][1]);
stmt.free(); }
tasks[t] = res.taskName; for(var t in tasks){
} sql = 'SELECT * FROM tasks WHERE id=:id';
md[5] = tasks; var stmt = DB.cdb.prepare(sql);
md[1] = moment(md[1]).format('dddd'); var res = stmt.getAsObject({':id':tasks[t]});
md[2] = moment(md[2]).format('HH:mm'); stmt.free();
md[4] = moment(md[4]).format('HH:mm'); tasks[t] = res.taskName;
}
if( md[2] === "00:00" && md[4] === "00:00"){ md[5] = tasks;
md[2] = ""; md[1] = moment(md[1]).format('dddd');
md[4] = ""; md[2] = moment(md[2]).format('HH:mm');
} md[4] = moment(md[4]).format('HH:mm');
var wnum = 0; if( md[2] === "00:00" && md[4] === "00:00"){
switch(md[1]){ md[2] = "";
case 'Monday': md[4] = "";
md[1] = 'Montag'; }
break;
case 'Tuesday': var wnum = 0;
md[1] = 'Dienstag'; switch(md[1]){
wnum = 1; case 'Monday':
break; md[1] = 'Montag';
case 'Wednesday': break;
md[1] = 'Mittwoch'; case 'Tuesday':
wnum = 2; md[1] = 'Dienstag';
break; wnum = 1;
case 'Thursday': break;
md[1] = 'Donnerstag'; case 'Wednesday':
wnum = 3; md[1] = 'Mittwoch';
break; wnum = 2;
case 'Friday': break;
md[1] = 'Freitag'; case 'Thursday':
wnum = 4 md[1] = 'Donnerstag';
break; wnum = 3;
case 'Saturday': break;
md[1] = 'Samstag'; case 'Friday':
wnum = 5; md[1] = 'Freitag';
break; wnum = 4
case 'Sunday' : break;
md[1] = 'Sonntag'; case 'Saturday':
wnum = 6; md[1] = 'Samstag';
default: wnum = 5;
break; break;
} case 'Sunday' :
md[1] = 'Sonntag';
weeks[week].data[wnum] = md; wnum = 6;
} default:
break;
for(var w in weeks){ }
if(choosenTemplate != "wochenbericht"){
var tmp = weeks[w].start; weeks[week].data[wnum] = md;
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{ for(var w in weeks){
weeks[w].start = moment(weeks[w].start).add(0, "days").format('YYYY-MM-DD'); if(choosenTemplate != "wochenbericht"){
weeks[w].end = moment(moment(weeks[w].start).day(7)).format('YYYY-MM-DD'); 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{
for(d in weeks[w].data){ weeks[w].start = moment(weeks[w].start).add(0, "days").format('YYYY-MM-DD');
for(t in weeks[w].data[d][5]){ weeks[w].end = moment(moment(weeks[w].start).day(7)).format('YYYY-MM-DD');
if(weeks[w].data[d][5][t].trim()===""){ }
weeks[w].data[d][5].splice(t,1);
}
} for(d in weeks[w].data){
if(weeks[w].data[d][5].length <=0){ for(t in weeks[w].data[d][5]){
weeks[w].data.splice(d,1); 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}); * @INFO
* Putting all Templates together for the print
//console.log(html); */
//var printWindow = window.open('', '', 'height=400,width=800'); var build = Templates.template.header+Templates.template[choosenTemplate]+Templates.template.footer;
//printWindow.document.write(html);
//printWindow.document.close(); var html = nunjucks.renderString(build, {name:name,weeks:weeks});
//printWindow.print()
var ifrm = document.getElementById('pdf'); //console.log(html);
ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument; //var printWindow = window.open('', '', 'height=400,width=800');
ifrm.document.open(); //printWindow.document.write(html);
ifrm.document.write(html); //printWindow.document.close();
ifrm.document.close(); //printWindow.print()
ifrm.focus(); 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 React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import InfiniteCalendar from 'react-infinite-calendar'; import InfiniteCalendar from 'react-infinite-calendar';
import { DB } from '../static/storage'; import { DB } from '../static/storage';
import { Notify } from '../static/notify'; import { Notify } from '../static/notify';
//import 'react-infinite-calendar/styles.css'; // only needs to be imported once //import 'react-infinite-calendar/styles.css'; // only needs to be imported once
const moment = require('moment'); const moment = require('moment');
export class Settings extends React.Component { export class Settings extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
name:"", name:"",
start:0 start:0
} }
this.onChangeName = this.onChangeName.bind(this); this.onChangeName = this.onChangeName.bind(this);
this.onChangeStart = this.onChangeStart.bind(this); this.onChangeStart = this.onChangeStart.bind(this);
this.save = this.save.bind(this); this.save = this.save.bind(this);
} }
componentDidMount(){ componentDidMount(){
this.setState({name:DB.loadSettings('name').val,start:DB.loadSettings('start').val}); this.setState({name:DB.loadSettings('name').val,start:DB.loadSettings('start').val});
} }
onChangeName(e){ onChangeName(e){
this.setState({name:e.target.value}) this.setState({name:e.target.value})
} }
onChangeStart(e){ onChangeStart(e){
this.setState({start:e.target.value}); this.setState({start:e.target.value});
} }
save(){ save(){
DB.saveSettings(this.state); DB.saveSettings(this.state);
Notify.emit({title:"",body:"Einstellungen gespeichert.",type:"success"}); Notify.emit({title:"",body:"Einstellungen gespeichert.",type:"success"});
} }
render() { render() {
console.log(this.state) console.log(this.state)
return ( return (
<div id="settings-frame"> <div id="settings-frame">
Einstellungen Einstellungen
<div class="form-group "> <div class="form-group ">
<label class="control-label " for="name"> <label class="control-label " for="name">
Name Name
</label> </label>
<input class="form-control" id="name" name="name" type="text" value={this.state.name} onChange={this.onChangeName}/> <input class="form-control" id="name" name="name" type="text" value={this.state.name} onChange={this.onChangeName}/>
</div> </div>
<div class="form-group "> <div class="form-group ">
<label class="control-label " for="name"> <label class="control-label " for="name">
Anfangsdatum Anfangsdatum
</label> </label>
<input class="form-control" id="name" name="name" type="date" onChange={this.onChangeStart} value={this.state.start} /> <input class="form-control" id="name" name="name" type="date" onChange={this.onChangeStart} value={this.state.start} />
</div> </div>
<button onClick={this.save}>Speichern</button> <hr/>
</div>); <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 './tabs.less';
@import './fileloader.less'; @import './fileloader.less';
@import './print.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%;
}
}