diff --git a/.dockerignore b/.dockerignore index 5029788..c8b4810 100644 --- a/.dockerignore +++ b/.dockerignore @@ -6,3 +6,6 @@ .git docker-run.sh docker-build.sh +images +images* +*.db* diff --git a/.gitignore b/.gitignore index f802313..24ff8b0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,8 @@ images +images* node_modules tinypin.db +tinypin.db* .DS_Store chrome-extension.crx chrome-extension.pem \ No newline at end of file diff --git a/TODO.md b/TODO.md index 8c68533..369f160 100644 --- a/TODO.md +++ b/TODO.md @@ -1,9 +1,9 @@ # todo list -- update brick layout algo to be height aware, rather than simply add to columns in order -- check breakpoints for iOS -- add hidden flag to boards / control +- --update brick layout algo to be height aware, rather than simply add to columns in order-- +- --check breakpoints for iOS-- +- --add hidden flag to boards / control-- - add change password function -- add logged in user name to menu -- addpin.html remember last board +- --add logged in user name to menu-- +- --addpin.html remember last board-- diff --git a/server.js b/server.js index c6a03e0..5c1be72 100644 --- a/server.js +++ b/server.js @@ -200,6 +200,7 @@ app.use ( async (req, res, next) => { if ( !req.user ){ res.redirect("/login"); + return; } if ( req.method == "GET" && req.originalUrl == "/logout" ){ @@ -247,6 +248,10 @@ const ALREADY_EXISTS = {status: "error", error: "already exists"}; const SERVER_ERROR = {status: "error", error: "server error"}; +app.get("/api/whoami", (req, res) => { + res.send({name: req.user.name}); +}); + // list boards app.get("/api/boards", async (req, res) => { try{ @@ -290,7 +295,7 @@ app.get("/api/boards/:boardId", async (req, res) => { // create board app.post('/api/boards', (req, res) => { try{ - let result = db.prepare("INSERT INTO boards (name, userId, createDate) VALUES (@name, @userId, @createDate)").run({name: req.body.name, userId: req.user.id, createDate: new Date().toISOString()}); + let result = db.prepare("INSERT INTO boards (name, userId, hidden, createDate) VALUES (@name, @userId, @hidden, @createDate)").run({name: req.body.name, userId: req.user.id, hidden: req.body.hidden, createDate: new Date().toISOString()}); let id = result.lastInsertRowid; let board = db.prepare("SELECT * FROM boards WHERE userId = @userId and id = @boardId").get({userId: req.user.id, boardId: id}); board.titlePinId = 0; @@ -310,7 +315,7 @@ app.post('/api/boards', (req, res) => { // update board app.post("/api/boards/:boardId", (req, res) =>{ try{ - let result = db.prepare("UPDATE boards SET name = @name WHERE userId = @userId and id = @boardId").run({name: req.body.name, userId: req.user.id, boardId: req.params.boardId}); + let result = db.prepare("UPDATE boards SET name = @name, hidden = @hidden WHERE userId = @userId and id = @boardId").run({name: req.body.name, hidden: req.body.hidden, userId: req.user.id, boardId: req.params.boardId}); if ( result.changes == 1 ){ res.send(OK); } else { @@ -498,65 +503,102 @@ function initDb(){ `).run(); let schemaVersion = db.prepare('select max(id) as id from migrations').get().id; + let isNewDb = false; + let createdBackup = false; if ( !schemaVersion || schemaVersion < 1 ){ console.log(" running migration v1"); + isNewDb = true; - db.prepare(` - CREATE TABLE users ( - id INTEGER NOT NULL PRIMARY KEY, - username TEXT NOT NULL UNIQUE, - key TEXT NOT NULL, - salt TEXT NOT NULL, - createDate TEXT - ) - `).run(); + db.transaction( () => { - db.prepare(` - CREATE TABLE properties ( - key TEXT NOT NULL UNIQUE PRIMARY KEY, - value TEXT NOT NULL + db.prepare(` + CREATE TABLE users ( + id INTEGER NOT NULL PRIMARY KEY, + username TEXT NOT NULL UNIQUE, + key TEXT NOT NULL, + salt TEXT NOT NULL, + createDate TEXT ) - `).run(); + `).run(); - db.prepare(` - CREATE TABLE boards ( - id INTEGER NOT NULL PRIMARY KEY, - name TEXT NOT NULL UNIQUE, - userId INTEGER NOT NULL, - createDate TEXT, - - FOREIGN KEY (userId) REFERENCES users(id) + db.prepare(` + CREATE TABLE properties ( + key TEXT NOT NULL UNIQUE PRIMARY KEY, + value TEXT NOT NULL + ) + `).run(); + + db.prepare(` + CREATE TABLE boards ( + id INTEGER NOT NULL PRIMARY KEY, + name TEXT NOT NULL UNIQUE, + userId INTEGER NOT NULL, + createDate TEXT, + + FOREIGN KEY (userId) REFERENCES users(id) + ) + `).run(); + + // autoincrement on pins so that pin ids are stable and are not reused. + // this allows for better caching of images + db.prepare(` + CREATE TABLE pins ( + id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, + boardId INTEGER NOT NULL, + imageUrl TEXT, + siteUrl TEXT, + description TEXT, + sortOrder INTEGER, + originalHeight INTEGER, + originalWidth INTEGER, + thumbnailHeight INTEGER, + thumbnailWidth INTEGER, + userId INTEGER NOT NULL, + createDate TEXT, + + FOREIGN KEY (boardId) REFERENCES boards(id), + FOREIGN KEY (userId) REFERENCES users(id) ) - `).run(); + `).run(); - // autoincrement on pins so that pin ids are stable and are not reused. - // this allows for better caching of images - db.prepare(` - CREATE TABLE pins ( - id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, - boardId INTEGER NOT NULL, - imageUrl TEXT, - siteUrl TEXT, - description TEXT, - sortOrder INTEGER, - originalHeight INTEGER, - originalWidth INTEGER, - thumbnailHeight INTEGER, - thumbnailWidth INTEGER, - userId INTEGER NOT NULL, - createDate TEXT, + db.prepare("INSERT INTO properties (key, value) VALUES (@key, @value)").run({key: "cookieKey", value: crypto.randomBytes(32).toString('hex')}); + db.prepare("INSERT INTO migrations (id, createDate) VALUES ( @id, @createDate )").run({id:1, createDate: new Date().toISOString()}); - FOREIGN KEY (boardId) REFERENCES boards(id), - FOREIGN KEY (userId) REFERENCES users(id) - ) - `).run(); + schemaVersion = 1; - db.prepare("INSERT INTO properties (key, value) VALUES (@key, @value)").run({key: "cookieKey", value: crypto.randomBytes(32).toString('hex')}); - db.prepare("INSERT INTO migrations (id, createDate) VALUES ( @id, @createDate )").run({id:1, createDate: new Date().toISOString()}); + })(); + } - schemaVersion = 1; + if ( schemaVersion < 2 ){ + console.log(" running migration v2"); + + if ( !isNewDb ){ + let backupPath = DB_PATH + ".backup-" + new Date().toISOString(); + console.log(" backing up to: " + backupPath); + db.prepare(` + VACUUM INTO ? + `).run(backupPath); + createdBackup = true; + } + + db.transaction( () => { + + db.prepare(` + ALTER TABLE boards ADD COLUMN hidden INTEGER + `).run(); + + db.prepare(` + UPDATE boards SET hidden = 0 + `).run(); + + db.prepare(` + INSERT INTO migrations (id, createDate) VALUES ( @id, @createDate ) + `).run({id:2, createDate: new Date().toISOString()}); + + schemaVersion = 2; + })(); } console.log(`database ready - schema version v${schemaVersion}`); diff --git a/static/addpin.html b/static/addpin.html index 9d0fe6a..5d7a84e 100644 --- a/static/addpin.html +++ b/static/addpin.html @@ -77,7 +77,9 @@ app.addSetter("load.boards", async (data) => { data.initialized = true; - if ( data.boards && data.boards.length > 0 ){ + if ( window.localStorage.addPinLastBoardId ){ + data.addPinModal.boardId = window.localStorage.addPinLastBoardId; + } else if ( data.boards && data.boards.length > 0 ){ data.addPinModal.boardId = data.boards[0].id; } else { data.addPinModal.boardId = "new"; @@ -87,7 +89,6 @@ app.addSetter("load.boards", async (data) => { }); app.addSetter('addPinModal.updatePreview', (data) => { - console.log("update preview"); if ( data.addPinModal.imageUrl.startsWith("http") ){ ( async() => { let res = await fetch(data.addPinModal.imageUrl, { @@ -161,6 +162,7 @@ app.addSetter('addPinModal.save', async (data) => { }); if ( res.status == 200 ){ + window.localStorage.addPinLastBoardId = boardId; window.close(); } @@ -228,7 +230,7 @@ const appComponent = new Reef("#app", {
-

Add Pin

+

Add Pin ${data.addPinModal.boardId}

diff --git a/static/app.js b/static/app.js index 95fd86a..4d35938 100644 --- a/static/app.js +++ b/static/app.js @@ -36,6 +36,15 @@ app.addSetter('load.board', async (data) => { store.do("loader.hide"); }); +app.addSetter('load.user', async (data) => { + store.do("loader.show"); + + let res = await fetch("/api/whoami"); + data.user = await res.json(); + + store.do("loader.hide"); +}); + app.addSetter("hash.update", (data) => { console.log("hash update"); data.hash = parseQueryString(window.location.hash.substr(1)); @@ -59,6 +68,8 @@ let store = new Reef.Store({ initialized: false, menuOpen: false, loading: 0, + user: null, + showHiddenBoards: window.localStorage.showHiddenBoards == "true" || false, boards: [], board: null, addPinModal: { @@ -82,7 +93,8 @@ let store = new Reef.Store({ }, editBoardModal: { active: false, - name: "" + name: "", + hidden: 0 }, editPinModal: { active: false, @@ -203,6 +215,7 @@ window.addEventListener('resize', (evt) => { Reef.databind(appComponent); +store.do('load.user'); store.do('load.boards'); store.do('hash.update'); diff --git a/static/client.css b/static/client.css index 3e9ba0e..beefa98 100644 --- a/static/client.css +++ b/static/client.css @@ -11,7 +11,7 @@ margin: 0 5px 10px 5px; } -.brick img { +.brick img.thumb { width: 100%; height: auto; display: block; @@ -40,7 +40,7 @@ width: 100%; } -.board-brick a img{ +.board-brick a img.thumb{ height: 200px; object-fit: cover; } diff --git a/static/components/about.js b/static/components/about.js index 925c4b8..5c6f644 100644 --- a/static/components/about.js +++ b/static/components/about.js @@ -42,6 +42,8 @@ app.addComponent('aboutModal', (store) => { return new Reef("#aboutModal", {
 missing icon » dots-square by Jeff Hilnbrand
+  hidden icon » hidden by vittorio longo from the Noun Project +

server
diff --git a/static/components/addpin.js b/static/components/addpin.js index 7122ad2..b4743e1 100644 --- a/static/components/addpin.js +++ b/static/components/addpin.js @@ -2,6 +2,8 @@ app.addSetter('addPinModal.open', (data) => { if ( data.board ){ data.addPinModal.boardId = data.board.id; + } else if ( window.localStorage.addPinLastBoardId ){ + data.addPinModal.boardId = window.localStorage.addPinLastBoardId; } else if ( data.boards && data.boards.length > 0 ){ data.addPinModal.boardId = data.boards[0].id; } else { @@ -91,6 +93,7 @@ app.addSetter('addPinModal.save', async (data) => { newBoard.titlePinId = body.id; } + window.localStorage.addPinLastBoardId = boardId; store.do("addPinModal.close"); } diff --git a/static/components/brickwall.js b/static/components/brickwall.js index eee7d8a..b9cf2d8 100644 --- a/static/components/brickwall.js +++ b/static/components/brickwall.js @@ -1,3 +1,8 @@ +app.addSetter('brickwall.toggleHiddenBoards', (data) => { + data.showHiddenBoards = !data.showHiddenBoards; + window.localStorage.showHiddenBoards = data.showHiddenBoards; +}); + app.addComponent('brickwall', (store) => { return new Reef('#brickwall', { store: store, @@ -27,7 +32,8 @@ app.addComponent('brickwall', (store) => { return new Reef('#brickwall', { // TODO: check these breakpoints for iPhone let numberOfColumns = 1; - let width = el.offsetWidth; + + let width = window.innerWidth; //el.offsetWidth; // matching bulma breakpoints - https://bulma.io/documentation/overview/responsiveness/ if( width >= 1216 ){ numberOfColumns = 5; @@ -37,6 +43,11 @@ app.addComponent('brickwall', (store) => { return new Reef('#brickwall', { numberOfColumns = 3; } else if ( width > 320 ){ numberOfColumns = 2; + } + + + if ( !data.hash.board && width < 400 ){ + numberOfColumns = 1; } function createBrickForBoard(board){ @@ -46,29 +57,36 @@ app.addComponent('brickwall', (store) => { return new Reef('#brickwall', { let boardImage = null; if ( board.titlePinId > 0 ){ - boardImage = ``; + boardImage = ``; } else { - boardImage = `
`; + boardImage = `
`; } - return /*html*/` + let hiddenBoardImage = ''; + if ( board.hidden ){ + hiddenBoardImage = '(hidden)'; + } + + return { height: 1, template: /*html*/`
${boardImage} -
${board.name}
+
${board.name} + ${hiddenBoardImage} +
- `; + `}; } function createBrickForPin(board, pin){ - return /*html*/` + return { height: pin.thumbnailHeight, template: /*html*/`
- +
- `; + `}; } // create the brick elements @@ -79,8 +97,10 @@ app.addComponent('brickwall', (store) => { return new Reef('#brickwall', { bricks.push(createBrickForPin(data.board, data.board.pins[i])); } } else { - for ( let i = 0; i < data.boards.length; ++i ){ - bricks.push(createBrickForBoard(data.boards[i])); + for ( let i = 0; i < data.boards.length; ++i ){ + if ( data.showHiddenBoards || !data.boards[i].hidden ) { + bricks.push(createBrickForBoard(data.boards[i])); + } } } @@ -96,7 +116,19 @@ app.addComponent('brickwall', (store) => { return new Reef('#brickwall', { // TODO: make this height aware // sort bricks into columns for ( let i = 0; i < bricks.length; ++i ){ - columns[i % columns.length].bricks.push(bricks[i]); + + // find shortest column + let shortestIndex = 0; + let shortestHeight = columns[0].height; + for ( let c = 1; c < columns.length; ++c ){ + if ( columns[c].height < shortestHeight ){ + shortestIndex = c; + shortestHeight = c.height; + } + } + + columns[shortestIndex].bricks.push(bricks[i]); + columns[shortestIndex].height += bricks[i].height; } @@ -107,7 +139,7 @@ app.addComponent('brickwall', (store) => { return new Reef('#brickwall', { result += '
'; for ( let i = 0; i < columns[col].bricks.length; ++i ){ - result += columns[col].bricks[i]; + result += columns[col].bricks[i].template; } result += '
'; diff --git a/static/components/editboard.js b/static/components/editboard.js index 24a6495..a74cf0a 100644 --- a/static/components/editboard.js +++ b/static/components/editboard.js @@ -1,10 +1,12 @@ app.addSetter('editBoardModal.open', (data) => { data.editBoardModal.name = data.board.name; + data.editBoardModal.hidden = data.board.hidden; data.editBoardModal.active = true; }); app.addSetter('editBoardModal.close', (data) => { data.editBoardModal.name = ""; + data.editBoardModal.hidden = 0; data.editBoardModal.active = false; }); @@ -14,11 +16,17 @@ app.addSetter('editBoardModal.save', async (data) => { let boardId = data.board.id; let name = data.editBoardModal.name; + let hidden = data.editBoardModal.hidden; let idx = getBoardIndexById(boardId); if ( idx >= 0 ){ data.boards[idx].name = name; + data.boards[idx].hidden = hidden; + + } + if ( data.board ){ data.board.name = name; + data.board.hidden = hidden; } let res = await fetch(`/api/boards/${boardId}`, { @@ -27,7 +35,8 @@ app.addSetter('editBoardModal.save', async (data) => { 'Content-Type': 'application/json', }, body: JSON.stringify({ - name: name + name: name, + hidden: hidden }) }); @@ -105,6 +114,11 @@ app.addComponent('editBoardModal', (store) => { return new Reef("#editBoardModal
+ +