Working on some structure to use react-router
This commit is contained in:
Jesús Espino
parent
751114f61b
commit
8396303932
14 changed files with 282 additions and 151 deletions
|
|
@ -8,27 +8,10 @@
|
||||||
<link rel="stylesheet" href="/main.css">
|
<link rel="stylesheet" href="/main.css">
|
||||||
<link rel="stylesheet" href="/images.css">
|
<link rel="stylesheet" href="/images.css">
|
||||||
<link rel="stylesheet" href="/colors.css">
|
<link rel="stylesheet" href="/colors.css">
|
||||||
|
|
||||||
<script>
|
|
||||||
window.location.href = "/boards"
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="container">
|
<body class="container">
|
||||||
<header id="header">
|
<div id="octo-tasks-app">
|
||||||
<a href="/">OCTO</a>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<p>
|
|
||||||
<a href="boards">All Boards</a>
|
|
||||||
</p>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer id="footer">
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<div id="overlay">
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
109
package-lock.json
generated
109
package-lock.json
generated
|
|
@ -4,6 +4,14 @@
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@babel/runtime": {
|
||||||
|
"version": "7.11.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
|
||||||
|
"integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
|
||||||
|
"requires": {
|
||||||
|
"regenerator-runtime": "^0.13.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@nodelib/fs.scandir": {
|
"@nodelib/fs.scandir": {
|
||||||
"version": "2.1.3",
|
"version": "2.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
|
||||||
|
|
@ -2350,6 +2358,19 @@
|
||||||
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
|
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"history": {
|
||||||
|
"version": "4.10.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
|
||||||
|
"integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.1.2",
|
||||||
|
"loose-envify": "^1.2.0",
|
||||||
|
"resolve-pathname": "^3.0.0",
|
||||||
|
"tiny-invariant": "^1.0.2",
|
||||||
|
"tiny-warning": "^1.0.0",
|
||||||
|
"value-equal": "^1.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"hmac-drbg": {
|
"hmac-drbg": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
|
||||||
|
|
@ -2361,6 +2382,14 @@
|
||||||
"minimalistic-crypto-utils": "^1.0.1"
|
"minimalistic-crypto-utils": "^1.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"hoist-non-react-statics": {
|
||||||
|
"version": "3.3.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||||
|
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||||
|
"requires": {
|
||||||
|
"react-is": "^16.7.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"homedir-polyfill": {
|
"homedir-polyfill": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
|
||||||
|
|
@ -2975,6 +3004,15 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"mini-create-react-context": {
|
||||||
|
"version": "0.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz",
|
||||||
|
"integrity": "sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.5.5",
|
||||||
|
"tiny-warning": "^1.0.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"minimalistic-assert": {
|
"minimalistic-assert": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
|
||||||
|
|
@ -3469,6 +3507,21 @@
|
||||||
"integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
|
"integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"path-to-regexp": {
|
||||||
|
"version": "1.8.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
|
||||||
|
"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
|
||||||
|
"requires": {
|
||||||
|
"isarray": "0.0.1"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"isarray": {
|
||||||
|
"version": "0.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
|
||||||
|
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"pbkdf2": {
|
"pbkdf2": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz",
|
||||||
|
|
@ -3697,6 +3750,37 @@
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||||
},
|
},
|
||||||
|
"react-router": {
|
||||||
|
"version": "5.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
|
||||||
|
"integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.1.2",
|
||||||
|
"history": "^4.9.0",
|
||||||
|
"hoist-non-react-statics": "^3.1.0",
|
||||||
|
"loose-envify": "^1.3.1",
|
||||||
|
"mini-create-react-context": "^0.4.0",
|
||||||
|
"path-to-regexp": "^1.7.0",
|
||||||
|
"prop-types": "^15.6.2",
|
||||||
|
"react-is": "^16.6.0",
|
||||||
|
"tiny-invariant": "^1.0.2",
|
||||||
|
"tiny-warning": "^1.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-router-dom": {
|
||||||
|
"version": "5.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
|
||||||
|
"integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.1.2",
|
||||||
|
"history": "^4.9.0",
|
||||||
|
"loose-envify": "^1.3.1",
|
||||||
|
"prop-types": "^15.6.2",
|
||||||
|
"react-router": "5.2.0",
|
||||||
|
"tiny-invariant": "^1.0.2",
|
||||||
|
"tiny-warning": "^1.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"react-simplemde-editor": {
|
"react-simplemde-editor": {
|
||||||
"version": "4.1.3",
|
"version": "4.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/react-simplemde-editor/-/react-simplemde-editor-4.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-simplemde-editor/-/react-simplemde-editor-4.1.3.tgz",
|
||||||
|
|
@ -3739,6 +3823,11 @@
|
||||||
"picomatch": "^2.2.1"
|
"picomatch": "^2.2.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"regenerator-runtime": {
|
||||||
|
"version": "0.13.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
|
||||||
|
"integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
|
||||||
|
},
|
||||||
"regex-not": {
|
"regex-not": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
|
||||||
|
|
@ -3831,6 +3920,11 @@
|
||||||
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
|
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"resolve-pathname": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
|
||||||
|
},
|
||||||
"resolve-url": {
|
"resolve-url": {
|
||||||
"version": "0.2.1",
|
"version": "0.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
|
||||||
|
|
@ -4407,6 +4501,16 @@
|
||||||
"setimmediate": "^1.0.4"
|
"setimmediate": "^1.0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"tiny-invariant": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
|
||||||
|
"integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
|
||||||
|
},
|
||||||
|
"tiny-warning": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
|
||||||
|
},
|
||||||
"to-arraybuffer": {
|
"to-arraybuffer": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
|
||||||
|
|
@ -4701,6 +4805,11 @@
|
||||||
"integrity": "sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==",
|
"integrity": "sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"value-equal": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
|
||||||
|
},
|
||||||
"vm-browserify": {
|
"vm-browserify": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@
|
||||||
"marked": "^1.1.1",
|
"marked": "^1.1.1",
|
||||||
"react": "^16.13.1",
|
"react": "^16.13.1",
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^16.13.1",
|
||||||
|
"react-router-dom": "^5.2.0",
|
||||||
"react-simplemde-editor": "^4.1.3"
|
"react-simplemde-editor": "^4.1.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
||||||
|
|
@ -404,10 +404,12 @@ func main() {
|
||||||
|
|
||||||
// Static files
|
// Static files
|
||||||
handleStaticFile(r, "/", "index.html", "text/html; charset=utf-8")
|
handleStaticFile(r, "/", "index.html", "text/html; charset=utf-8")
|
||||||
handleStaticFile(r, "/boards", "boards.html", "text/html; charset=utf-8")
|
handleStaticFile(r, "/login", "index.html", "text/html; charset=utf-8")
|
||||||
handleStaticFile(r, "/board", "board.html", "text/html; charset=utf-8")
|
handleStaticFile(r, "/boards", "index.html", "text/html; charset=utf-8")
|
||||||
|
handleStaticFile(r, "/board", "index.html", "text/html; charset=utf-8")
|
||||||
|
|
||||||
handleStaticFile(r, "/boardsPage.js", "boardsPage.js", "text/javascript; charset=utf-8")
|
handleStaticFile(r, "/main.js", "main.js", "text/javascript; charset=utf-8")
|
||||||
|
handleStaticFile(r, "/boardPage.js", "boardPage.js", "text/javascript; charset=utf-8")
|
||||||
handleStaticFile(r, "/boardPage.js", "boardPage.js", "text/javascript; charset=utf-8")
|
handleStaticFile(r, "/boardPage.js", "boardPage.js", "text/javascript; charset=utf-8")
|
||||||
|
|
||||||
handleStaticFile(r, "/favicon.ico", "static/favicon.svg", "image/svg+xml; charset=utf-8")
|
handleStaticFile(r, "/favicon.ico", "static/favicon.svg", "image/svg+xml; charset=utf-8")
|
||||||
|
|
|
||||||
40
src/client/app.tsx
Normal file
40
src/client/app.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import {
|
||||||
|
BrowserRouter as Router,
|
||||||
|
Switch,
|
||||||
|
Route,
|
||||||
|
Link
|
||||||
|
} from "react-router-dom";
|
||||||
|
|
||||||
|
import LoginPage from './pages/loginPage';
|
||||||
|
import HomePage from './pages/homePage';
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<Router>
|
||||||
|
<div>
|
||||||
|
<header id="header">
|
||||||
|
<a href="/">OCTO</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="main">
|
||||||
|
<Switch>
|
||||||
|
<Route path="/login">
|
||||||
|
<LoginPage />
|
||||||
|
</Route>
|
||||||
|
<Route path="/">
|
||||||
|
<HomePage />
|
||||||
|
</Route>
|
||||||
|
</Switch>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer id="footer">
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<div id="overlay">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Router>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,106 +0,0 @@
|
||||||
import { Archiver } from "./archiver"
|
|
||||||
import { Board } from "./board"
|
|
||||||
import { Mutator } from "./mutator"
|
|
||||||
import { OctoClient } from "./octoClient"
|
|
||||||
import { UndoManager } from "./undomanager"
|
|
||||||
import { Utils } from "./utils"
|
|
||||||
|
|
||||||
class BoardsPage {
|
|
||||||
boardsPanel: HTMLElement
|
|
||||||
|
|
||||||
boardId: string
|
|
||||||
boards: Board[]
|
|
||||||
|
|
||||||
octo = new OctoClient()
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
// This is a placeholder page
|
|
||||||
|
|
||||||
const mainPanel = Utils.getElementById("main")
|
|
||||||
|
|
||||||
this.boardsPanel = mainPanel.appendChild(document.createElement("div"))
|
|
||||||
|
|
||||||
{
|
|
||||||
const addButton = document.body.appendChild(document.createElement("div"))
|
|
||||||
addButton.className = "octo-button"
|
|
||||||
addButton.innerText = "+ Add Board"
|
|
||||||
addButton.onclick = () => { this.addClicked() }
|
|
||||||
}
|
|
||||||
|
|
||||||
document.body.appendChild(document.createElement("br"))
|
|
||||||
|
|
||||||
{
|
|
||||||
const importButton = document.body.appendChild(document.createElement("div"))
|
|
||||||
importButton.className = "octo-button"
|
|
||||||
importButton.innerText = "Import archive"
|
|
||||||
importButton.onclick = async () => {
|
|
||||||
const octo = new OctoClient()
|
|
||||||
const mutator = new Mutator(octo, UndoManager.shared)
|
|
||||||
Archiver.importFullArchive(mutator, () => {
|
|
||||||
this.updateView()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
const exportButton = document.body.appendChild(document.createElement("div"))
|
|
||||||
exportButton.className = "octo-button"
|
|
||||||
exportButton.innerText = "Export archive"
|
|
||||||
exportButton.onclick = () => {
|
|
||||||
const octo = new OctoClient()
|
|
||||||
const mutator = new Mutator(octo, UndoManager.shared)
|
|
||||||
Archiver.exportFullArchive(mutator)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.updateView()
|
|
||||||
}
|
|
||||||
|
|
||||||
async getBoardData() {
|
|
||||||
const boards = this.octo.getBlocks(null, "board")
|
|
||||||
}
|
|
||||||
|
|
||||||
async updateView() {
|
|
||||||
const { boardsPanel } = this
|
|
||||||
|
|
||||||
boardsPanel.innerText = ""
|
|
||||||
|
|
||||||
const boards = await this.octo.getBlocks(null, "board")
|
|
||||||
for (const board of boards) {
|
|
||||||
const p = boardsPanel.appendChild(document.createElement("p"))
|
|
||||||
const a = p.appendChild(document.createElement("a"))
|
|
||||||
a.style.padding = "5px 10px"
|
|
||||||
a.style.fontSize = "20px"
|
|
||||||
a.href = `./board?id=${encodeURIComponent(board.id)}`
|
|
||||||
|
|
||||||
if (board.icon) {
|
|
||||||
const icon = a.appendChild(document.createElement("span"))
|
|
||||||
icon.className = "octo-icon"
|
|
||||||
icon.style.marginRight = "10px"
|
|
||||||
icon.innerText = board.icon
|
|
||||||
}
|
|
||||||
|
|
||||||
const title = a.appendChild(document.createElement("b"))
|
|
||||||
const updatedDate = new Date(board.updateAt)
|
|
||||||
title.innerText = board.title
|
|
||||||
const details = a.appendChild(document.createElement("span"))
|
|
||||||
details.style.fontSize = "15px"
|
|
||||||
details.style.color = "#909090"
|
|
||||||
details.style.marginLeft = "10px"
|
|
||||||
details.innerText = ` ${Utils.displayDate(updatedDate)}`
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`updateView: ${boards.length} board(s).`)
|
|
||||||
}
|
|
||||||
|
|
||||||
async addClicked() {
|
|
||||||
const board = new Board()
|
|
||||||
await this.octo.insertBlock(board)
|
|
||||||
await this.updateView()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export = BoardsPage
|
|
||||||
|
|
||||||
const _ = new BoardsPage()
|
|
||||||
console.log("boardsView")
|
|
||||||
|
|
@ -14,7 +14,7 @@ import { OctoUtils } from "../octoUtils"
|
||||||
import { Utils } from "../utils"
|
import { Utils } from "../utils"
|
||||||
import { BoardCard } from "./boardCard"
|
import { BoardCard } from "./boardCard"
|
||||||
import { BoardColumn } from "./boardColumn"
|
import { BoardColumn } from "./boardColumn"
|
||||||
import { Button } from "./button"
|
import Button from "./button"
|
||||||
import { Editable } from "./editable"
|
import { Editable } from "./editable"
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ type Props = {
|
||||||
title?: string
|
title?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
class Button extends React.Component<Props> {
|
export default class Button extends React.Component<Props> {
|
||||||
render() {
|
render() {
|
||||||
const style = {...this.props.style, backgroundColor: this.props.backgroundColor}
|
const style = {...this.props.style, backgroundColor: this.props.backgroundColor}
|
||||||
return (
|
return (
|
||||||
|
|
@ -22,5 +22,3 @@ class Button extends React.Component<Props> {
|
||||||
</div>)
|
</div>)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Button }
|
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ import { IBlock } from "../octoTypes"
|
||||||
import { OctoUtils } from "../octoUtils"
|
import { OctoUtils } from "../octoUtils"
|
||||||
import { PropertyMenu } from "../propertyMenu"
|
import { PropertyMenu } from "../propertyMenu"
|
||||||
import { Utils } from "../utils"
|
import { Utils } from "../utils"
|
||||||
import { Button } from "./button"
|
import Button from "./button"
|
||||||
import { Editable } from "./editable"
|
import { Editable } from "./editable"
|
||||||
import { MarkdownEditor } from "./markdownEditor"
|
import { MarkdownEditor } from "./markdownEditor"
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ import { Mutator } from "../mutator"
|
||||||
import { IBlock, IPageController } from "../octoTypes"
|
import { IBlock, IPageController } from "../octoTypes"
|
||||||
import { OctoUtils } from "../octoUtils"
|
import { OctoUtils } from "../octoUtils"
|
||||||
import { Utils } from "../utils"
|
import { Utils } from "../utils"
|
||||||
import { Button } from "./button"
|
import Button from "./button"
|
||||||
import { Editable } from "./editable"
|
import { Editable } from "./editable"
|
||||||
import { TableRow } from "./tableRow"
|
import { TableRow } from "./tableRow"
|
||||||
|
|
||||||
|
|
|
||||||
6
src/client/main.tsx
Normal file
6
src/client/main.tsx
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
|
||||||
|
import App from './app';
|
||||||
|
|
||||||
|
ReactDOM.render(<App />, document.getElementById('octo-tasks-app'));
|
||||||
76
src/client/pages/homePage.tsx
Normal file
76
src/client/pages/homePage.tsx
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { IBlock } from "../octoTypes"
|
||||||
|
import { Archiver } from "../archiver"
|
||||||
|
import { Board } from "../board"
|
||||||
|
import { Mutator } from "../mutator"
|
||||||
|
import { OctoClient } from "../octoClient"
|
||||||
|
import { UndoManager } from "../undomanager"
|
||||||
|
import { Utils } from "../utils"
|
||||||
|
import Button from '../components/button';
|
||||||
|
|
||||||
|
type Props = {};
|
||||||
|
|
||||||
|
type State = {
|
||||||
|
boards: IBlock[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export default class HomePage extends React.Component<Props, State> {
|
||||||
|
constructor(props: Props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
boards: [],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.loadBoards();
|
||||||
|
}
|
||||||
|
|
||||||
|
loadBoards = async () => {
|
||||||
|
const octo = new OctoClient()
|
||||||
|
const boards = await octo.getBlocks(null, "board")
|
||||||
|
this.setState({boards});
|
||||||
|
}
|
||||||
|
|
||||||
|
importClicked = async () => {
|
||||||
|
const octo = new OctoClient()
|
||||||
|
const mutator = new Mutator(octo, UndoManager.shared)
|
||||||
|
Archiver.importFullArchive(mutator, () => {
|
||||||
|
this.loadBoards()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
exportClicked = async () => {
|
||||||
|
const octo = new OctoClient()
|
||||||
|
const mutator = new Mutator(octo, UndoManager.shared)
|
||||||
|
Archiver.exportFullArchive(mutator)
|
||||||
|
}
|
||||||
|
|
||||||
|
addClicked = async () => {
|
||||||
|
const octo = new OctoClient()
|
||||||
|
const board = new Board()
|
||||||
|
await octo.insertBlock(board)
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): React.ReactNode {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Button onClick={this.addClicked}>+ Add Board</Button>
|
||||||
|
<br />
|
||||||
|
<Button onClick={this.addClicked}>Import Archive</Button>
|
||||||
|
<br />
|
||||||
|
<Button onClick={this.addClicked}>Export Archive</Button>
|
||||||
|
{this.state.boards.map((board) => (
|
||||||
|
<p>
|
||||||
|
<a href={`/board/${board.id}`}>
|
||||||
|
{board.icon && <span>{board.icon}</span>}
|
||||||
|
<span>{board.title}</span>
|
||||||
|
<span>{Utils.displayDate(new Date(board.updateAt))}</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
37
src/client/pages/loginPage.tsx
Normal file
37
src/client/pages/loginPage.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
import React from "react"
|
||||||
|
|
||||||
|
type Props = {}
|
||||||
|
|
||||||
|
type State = {
|
||||||
|
username: string;
|
||||||
|
password: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class LoginPage extends React.Component<Props, State> {
|
||||||
|
state = {
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
|
}
|
||||||
|
|
||||||
|
handleLogin = () => {
|
||||||
|
console.log("Logging in");
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): React.ReactNode {
|
||||||
|
return (
|
||||||
|
<div className='LoginPage'>
|
||||||
|
<label htmlFor='login-username'>Username</label>
|
||||||
|
<input
|
||||||
|
id='login-username'
|
||||||
|
value={this.state.username}
|
||||||
|
onChange={(e) => this.setState({username: e.target.value})}
|
||||||
|
/>
|
||||||
|
<label htmlFor='login-username'>Password</label>
|
||||||
|
<input
|
||||||
|
id='login-password'
|
||||||
|
/>
|
||||||
|
<button onClick={this.handleLogin}>Login</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -50,28 +50,13 @@ function makeCommonConfig() {
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
inject: true,
|
inject: true,
|
||||||
title: "OCTO",
|
title: "OCTO",
|
||||||
chunks: [],
|
chunks: ["main"],
|
||||||
template: "html-templates/index.ejs",
|
template: "html-templates/index.ejs",
|
||||||
filename: 'index.html'
|
filename: 'index.html'
|
||||||
}),
|
}),
|
||||||
new HtmlWebpackPlugin({
|
|
||||||
inject: true,
|
|
||||||
title: "OCTO - Boards",
|
|
||||||
chunks: ["boardsPage"],
|
|
||||||
template: "html-templates/page.ejs",
|
|
||||||
filename: 'boards.html'
|
|
||||||
}),
|
|
||||||
new HtmlWebpackPlugin({
|
|
||||||
inject: true,
|
|
||||||
title: "OCTO",
|
|
||||||
chunks: ["boardPage"],
|
|
||||||
template: "html-templates/page.ejs",
|
|
||||||
filename: 'board.html'
|
|
||||||
}),
|
|
||||||
],
|
],
|
||||||
entry: {
|
entry: {
|
||||||
boardsPage: "./src/client/boardsPage.ts",
|
main: "./src/client/main.tsx",
|
||||||
boardPage: "./src/client/boardPage.tsx"
|
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
filename: "[name].js",
|
filename: "[name].js",
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue