Initial commit

.gitignore

@@ -0,0 +1 @@
+.idea

echarts-theme.js

@@ -0,0 +1,204 @@
+(function (root, factory) {if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['exports', 'echarts'], factory);
+} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+    // CommonJS
+    factory(exports, require('echarts'));
+} else {
+    // Browser globals
+    factory({}, root.echarts);
+}
+}(this, function (exports, echarts) {
+    var log = function (msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+
+    var colorPalette = [
+        '#C1232B','#27727B','#FCCE10','#E87C25','#B5C334',
+        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+    ];
+
+    var theme = {
+
+        color: colorPalette,
+
+        title: {
+            textStyle: {
+                fontWeight: 'normal',
+                color: '#27727B'
+            }
+        },
+
+        visualMap: {
+            color:['#C1232B','#FCCE10']
+        },
+
+        toolbox: {
+            iconStyle: {
+                normal: {
+                    borderColor: colorPalette[0]
+                }
+            }
+        },
+
+        tooltip: {
+            backgroundColor: 'rgba(50,50,50,0.5)',
+            axisPointer : {
+                type : 'line',
+                lineStyle : {
+                    color: '#27727B',
+                    type: 'dashed'
+                },
+                crossStyle: {
+                    color: '#27727B'
+                },
+                shadowStyle : {
+                    color: 'rgba(200,200,200,0.3)'
+                }
+            }
+        },
+
+        dataZoom: {
+            dataBackgroundColor: 'rgba(181,195,52,0.3)',
+            fillerColor: 'rgba(181,195,52,0.2)',
+            handleColor: '#27727B'
+        },
+
+        categoryAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: '#27727B'
+                }
+            },
+            splitLine: {
+                show: false
+            }
+        },
+
+        valueAxis: {
+            axisLine: {
+                show: false
+            },
+            splitArea : {
+                show: false
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#ccc'],
+                    type: 'dashed'
+                }
+            }
+        },
+
+        timeline: {
+            lineStyle: {
+                color: '#27727B'
+            },
+            controlStyle: {
+                normal: {
+                    color: '#27727B',
+                    borderColor: '#27727B'
+                }
+            },
+            symbol: 'emptyCircle',
+            symbolSize: 3
+        },
+
+        line: {
+            itemStyle: {
+                normal: {
+                    borderWidth:2,
+                    borderColor:'#fff',
+                    lineStyle: {
+                        width: 3
+                    }
+                },
+                emphasis: {
+                    borderWidth:0
+                }
+            },
+            symbol: 'circle',
+            symbolSize: 3.5
+        },
+
+        candlestick: {
+            itemStyle: {
+                normal: {
+                    color: '#C1232B',
+                    color0: '#B5C334',
+                    lineStyle: {
+                        width: 1,
+                        color: '#C1232B',
+                        color0: '#B5C334'
+                    }
+                }
+            }
+        },
+
+        graph: {
+            color: colorPalette
+        },
+
+        map: {
+            label: {
+                normal: {
+                    textStyle: {
+                        color: '#C1232B'
+                    }
+                },
+                emphasis: {
+                    textStyle: {
+                        color: 'rgb(100,0,0)'
+                    }
+                }
+            },
+            itemStyle: {
+                normal: {
+                    areaColor: '#ddd',
+                    borderColor: '#eee'
+                },
+                emphasis: {
+                    areaColor: '#fe994e'
+                }
+            }
+        },
+
+        gauge: {
+            axisLine: {
+                lineStyle: {
+                    color: [[0.2, '#B5C334'],[0.8, '#27727B'],[1, '#C1232B']]
+                }
+            },
+            axisTick: {
+                splitNumber: 2,
+                length: 5,
+                lineStyle: {
+                    color: '#fff'
+                }
+            },
+            axisLabel: {
+                textStyle: {
+                    color: '#fff'
+                }
+            },
+            splitLine: {
+                length: '5%',
+                lineStyle: {
+                    color: '#fff'
+                }
+            },
+            title : {
+                offsetCenter: [0, -20]
+            }
+        }
+    };
+
+    echarts.registerTheme('infographic', theme);
+}));

index.html

@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <!-- moment.js is needed for date calculations -->
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
+
+    <!-- echarts is used for charts -->
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
+    <script type="text/javascript" src="echarts-theme.js"></script>
+
+    <!-- Application styles and scripts -->
+    <link rel="stylesheet" href="styles.css">
+    <script type="text/javascript" src="model.js"></script>
+    <script type="text/javascript" src="tim-evaluator.js"></script>
+
+    <!-- Initialize the application right when the window has loaded -->
+    <script>
+        window.addEventListener('load', () => {
+            const timEvaluator = new TimEvaluator();
+            timEvaluator.init();
+        });
+    </script>
+
+    <title>Tim Evaluator</title>
+</head>
+<body>
+<header>
+    <div class="wrapper">
+        <h1>Tim Evaluator</h1>
+        <p>
+            Visualizes <a href="https://tim.neat.software" target="_blank">"Tim" time tracker</a> records
+            and allows to fill gaps between tracked times
+        </p>
+    </div>
+</header>
+<main>
+    <div class="wrapper">
+        <div class="file">
+            <div class="file-input">
+                <h2>Import</h2>
+                <label>
+                    File to Import
+                    <input type="file" id="file-input">
+                </label>
+            </div>
+            <div class="views">
+                <h2>Views</h2>
+                <button id="show-evaluation-button">Evaluation</button>
+                <button id="show-records-button">Records</button>
+            </div>
+            <div class="file-output">
+                <h2>Export</h2>
+                <label>
+                    Assign gaps to
+                    <select id="gap-destination"></select>
+                </label>
+                <button id="export-button">Export</button>
+            </div>
+        </div>
+
+        <div class="evaluation">
+            <h2>Evaluation</h2>
+            <div id="bar-chart"></div>
+        </div>
+
+        <div class="records-list">
+            <h2>Records</h2>
+            <table id="records-table">
+                <thead>
+                <tr>
+                    <th>Start</th>
+                    <th>End</th>
+                    <th>Duration</th>
+                    <th>Task</th>
+                    <th>Enabled?</th>
+                </tr>
+                </thead>
+                <tbody>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</main>
+</body>
+</html>

model.js

@@ -0,0 +1,50 @@
+class Group {
+    constructor(id, title, createdAt, tasks) {
+        this.id = id || null;
+        this.title = title || '';
+        this.createdAt = createdAt ? new Date(createdAt) : new Date();
+        this.tasks = tasks || [];
+    }
+}
+
+class Task {
+    constructor(id, title, createdAt, records, group) {
+        this.id = id || null;
+        this.createdAt = createdAt ? new Date(createdAt) : new Date();
+        this.title = title || '';
+        this.records = records || [];
+        this.group = group || null;
+    }
+}
+
+class Record {
+    constructor(task, start, end, disabled) {
+        this.task = task;
+        this.start = new Date(start);
+        this.end = new Date(end);
+        this.disabled = !!disabled;
+    }
+
+    getStartStr() {
+        return moment(this.start).format('lll');
+    }
+
+    getEndStr() {
+        return moment(this.end).format('lll');
+    }
+
+    getDurationStr() {
+        const duration = Math.round((this.end.getTime() - this.start.getTime()) / 1000);
+        let hours   = Math.floor(duration / 3600);
+        let minutes = Math.floor((duration - (hours * 3600)) / 60);
+        let seconds = duration - (hours * 3600) - (minutes * 60);
+        if (hours   < 10) {hours   = "0"+hours;}
+        if (minutes < 10) {minutes = "0"+minutes;}
+        if (seconds < 10) {seconds = "0"+seconds;}
+        return hours + ':' + minutes + ':' + seconds;
+    }
+
+    getDurationHours() {
+        return (this.end.getTime() - this.start.getTime()) / 1000 / 60 / 60;
+    }
+}