inital commit

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "tasky",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "5.0.0",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "Tasky",
+  "name": "Manage the task you need to do in your live",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

src/App.js

@@ -0,0 +1,17 @@
+import logo from './res/tasky_logo_trans.svg';
+import './styles/App.css';
+
+import Header from './header'
+import Tasks from './tasks'
+
+function App() {
+  return [
+    <Header />,
+    <main>
+      <Tasks />
+    </main>
+  ];
+}
+
+
+export default App;

src/components/task.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+function Task(props) {
+  let s = "width:" + props.progress + "%"
+  return (
+    <div class="task-container">
+      <div class="task-progress" style={{ width: props.progress + "%" }} ></div>
+      <div class="task-lable">{props.lable}</div>
+    </div>
+  )
+}
+
+export default Task;

src/header.js

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import logo from './res/tasky_logo_trans.svg'
+
+var mounts = ['jan', 'feb', 'maart', 'apr', 'mei', 'jun', 'jul', 'aug', 'sept', 'oct', 'nov', 'dec'];
+
+function leadZero(n){
+  return n < 10 ? '0' + n : n
+}
+
+class Header extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {date: new Date()};
+  }
+
+  componentDidMount() {
+    this.timerID = setInterval(
+      () => this.tick(),
+      1000
+    );
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timerID);
+  }
+
+  tick() {
+    this.setState({ date: new Date() });
+  }
+
+  render() {
+    let d = this.state.date
+    let hour = d.getHours() <= 12 ? d.getHours() : d.getHours()-12
+    let minute = leadZero(d.getMinutes())
+    let second = leadZero(d.getSeconds())
+    let time = hour + ':' + minute  + ':' + second
+    return [
+      <header>
+        <img src={logo} alt="&#10003;" class="logo" />
+        <h1>Tasky ({d.getDate() + ' ' + mounts[d.getMonth()]} {time} {d.getHours() < 12 ? "AM" : "PM"})</h1>
+      </header>
+    ];
+  }
+}
+
+export default Header

src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './styles/index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/res/tasky_icon.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 10 10"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg">
+  <path
+     style="fill:#151515;fill-opacity:1;stroke:none;stroke-width:1.0601;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 0.87469637,0.75429161 C -0.01335032,1.6721026 -0.25891483,8.4378965 0.84368947,9.311491 1.9462944,10.185087 8.4852529,10.124668 9.2607032,9.300603 10.036153,8.4765325 10.183373,1.590314 9.3186392,0.74244459 8.4539051,-0.10542478 1.7627422,-0.16351516 0.87469567,0.75429579 Z"/>
+  <path
+     style="fill:none;stroke:#cdd471;stroke-width:0.908342;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+     d="M 1.6388479,5.6928209 C 3.2203909,6.1217852 3.5663263,6.9417711 3.9901327,7.4763494 4.7745254,6.1561365 6.3321791,3.3574592 8.2372668,2.0697505"/>
+</svg>

src/res/tasky_logo.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 10 10"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg">
+  <path
+     style="fill:none;stroke:#cdd471;stroke-width:0.965;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+     d="m 1.8702586,5.9729107 c 1.673951,0.45742 2.040099,1.3318004 2.488668,1.9018404 0.830224,-1.4077904 2.4788898,-4.3921204 4.4952898,-5.7652504"/>
+  <path
+     style="fill:#151515;fill-opacity:1;stroke:none;stroke-width:1.0601;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 0.87469637,0.75429161 C -0.01335032,1.6721026 -0.25891483,8.4378965 0.84368947,9.311491 1.9462944,10.185087 8.4852529,10.124668 9.2607032,9.300603 10.036153,8.4765325 10.183373,1.590314 9.3186392,0.74244459 8.4539051,-0.10542478 1.7627422,-0.16351516 0.87469567,0.75429579 Z" />
+  <path
+     style="fill:none;stroke:#cdd471;stroke-width:0.908342;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+     d="M 1.6388479,5.6928209 C 3.2203909,6.1217852 3.5663263,6.9417711 3.9901327,7.4763494 4.7745254,6.1561365 6.3321791,3.3574592 8.2372668,2.0697505" />
+</svg>

src/res/tasky_logo_trans.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 10 10"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg">
+  <path
+     style="fill:none;stroke:#cdd471;stroke-width:0.965;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+     d="m 1.5229081,5.6524576 c 1.673951,0.45742 2.040099,1.3318004 2.488668,1.9018404 0.830224,-1.4077904 2.4788898,-4.3921204 4.4952898,-5.7652504" />
+</svg>

src/styles/App.css

@@ -0,0 +1,61 @@
+:root{
+  --primary-color: #2e7d32;
+  --complementry-color: #8f3aa3;
+  --dark-1-color: #222;
+  --dark-2-color: #333;
+  --dark-3-color: #444;
+}
+
+body{
+  padding-top: 75px;
+  color: white;
+}
+
+header{
+  background-color: var(--primary-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 75px;
+}
+
+header .logo {
+  width: 50px;
+  display: inline;
+  vertical-align: middle;
+}
+header h1 {
+  display: inline;
+  vertical-align: middle;
+}
+
+main{
+  background-color: var(--dark-2-color);
+}
+
+.task-container {
+  background-color: var(--dark-1-color);
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  margin: 0 0 3px 0;
+}
+
+.task-progress{
+  position: relative;
+  background-color: var(--primary-color);
+  opacity: .5;
+  height: 100%;
+  width: attr(data-progress);
+}
+
+.task-lable{
+  text-align: center;
+  position: absolute;
+  width: 100%
+}

src/styles/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/tasks.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import Task from './components/task'
+
+var tasks = [
+  {
+    'lable': "some stuff",
+    'progress': 0.5
+  },{
+    'lable': "some other stuff",
+    'progress': 0.2
+  },{
+    'lable': "fun stuff",
+    'progress': 0.75
+  },
+]
+
+class Tasks extends React.Component {
+  constructor(props){
+    super(props);
+
+    this.state = tasks;
+  }
+
+
+  updateFromDB() {
+    this.setState(tasks);
+  }
+
+  renderOne(task){
+    return <Task lable={task.lable} progress={task.progress * 100} />
+  }
+
+  render() {
+    let tasks = []
+    for(let i=0; i<this.state.length; i++){
+      tasks.push(this.renderOne(this.state[i]))
+    }
+    return tasks
+  }
+}
+
+export default Tasks