From 122a9fe068de0577064369a2b73934094d52302c Mon Sep 17 00:00:00 2001 From: ansuz Date: Thu, 1 Sep 2016 16:23:40 +0200 Subject: [PATCH] realtime kanban board --- www/board/board.js | 243 +++++++++++++++++++++++++++++++++++++++++++ www/board/index.html | 103 ++++++++++++++++++ www/board/main.js | 95 +++++++++++++++++ 3 files changed, 441 insertions(+) create mode 100644 www/board/board.js create mode 100644 www/board/index.html create mode 100644 www/board/main.js diff --git a/www/board/board.js b/www/board/board.js new file mode 100644 index 000000000..08f0b0dcd --- /dev/null +++ b/www/board/board.js @@ -0,0 +1,243 @@ +define([ + '/bower_components/jquery/dist/jquery.min.js', +],function () { + var $ = window.jQuery; + var Board = {}; + var proxy; + + var Uid = function (prefix) { + return function () { + return prefix + Number(Math.floor(Math.random() * Number.MAX_SAFE_INTEGER)) + .toString(32).replace(/\./g, ''); + }; + }; + + var removeUid = function (A, e) { + var i = A.indexOf(e); + if (i === -1) { return -1; } + A.splice(i, 1); + return i; + }; + + var luid = Board.luid = Uid('l-'); // list-uid + var cuid = Board.cuid = Uid('c-'); // card uid + + var Input = Board.Input = function (opt) { + return $('', opt); + }; + + /* + populate the proxy with all the relevant fields + return boolean whether you are the first user + */ + Board.initialize = function (_proxy) { + proxy = _proxy; + var first = false; + + ['listOrder'].forEach(function (k) { + if (typeof(proxy[k]) === 'undefined') { + first = true; + proxy[k] = []; + } + }); + + ['lists', 'cards'].forEach(function (k) { + if (typeof(proxy[k]) === 'undefined') { + proxy[k] = {}; + } + }); + + return first; + }; + + /* + * a list is appended to the extant order + */ + var List = Board.List = function (id) { + if (!id) { + id = List.create(); + } + + var $input = Input({ + type: 'text', + placeholder: 'list title', + }) + .addClass('list-title') + .on('keyup change', function () { + var val = $input.val(); + proxy.lists[id].title = val; + }); + + var $cards = $('
', { + + }) + .addClass('card-holder'); + + var $new = $('', { + + }) + .addClass('add-card') + .text('add new card') + .click(function () { + // is this correct? + $cards.append(Board.Card(id)); + }); + + var $list = $('
', { + id: id, + }) + .addClass('list-column') + .append($input) + .append($cards) + .append($new); + + return $list; + }; + + /* + */ + List.create = function () { + var id = luid(); + proxy.listOrder.push(id); + proxy.lists[id] = { + title: "", + cards: [], + }; + + return id; + }; + + /* + */ + List.remove = function (id) { + var i = removeUid(proxy.listOrder, id); + if (i === -1) { + + } + }; + + /* + */ + List.move = function () { + + }; + + /* + */ + List.insert = function () { + + }; + + List.draw = function ($lists, lid) { + if (!lid) { + console.log("List Id not supplied"); + } + + + var $parent = $lists.find('#' + lid); + if (!$parent.length) { + console.log("Creating new list"); + // doesn't exist. draw it fresh + + var $list = Board.List(lid); + $lists.append($list); + + //console.log("Updating list"); + + //var $list = Board.List(lid); + var title = proxy.lists[lid].title; + + console.log(title); + + $list.find('input.list-title').val(title); + + + + return; + } + + + // else update + }; + + /* + * UI element + */ + var Card = Board.Card = function (pid) { + // pid => parent id + + var id = Card.create(pid); + + var $input = Input({ + placeholder: 'card description', + }) + .addClass('card-title'); + + var $card = $('
', { + + }) + .addClass('card-container') + .append($input); + + return $card; + }; + + /* + * a card is instantiated within a parent list + * .create(parent) adds the relevant attributes to the data structure + * and returns the created id + */ + Card.create = function (pid) { + var id = cuid(); + + if (typeof(proxy.lists[pid]) === 'undefined') { + console.error("Trying to create card for list which does not exist"); + return id; + } + + proxy.lists[pid].cards.push(id); + proxy.cards[id] = { + // TODO what goes in a card + parent: pid, + title: "", + }; + + return id; + }; + + /* + */ + Card.move = function (uid, A, B) { + + }; + + /* + */ + Card.insert = function () { + + }; + + Card.draw = function ($lists, cid) { + if (!cid) { + console.error("card id not supplied"); + return; + } + + if (!proxy.cards[cid]) { + console.error("no such card: ", cid); + return; + } + + var card = proxy.cards[cid]; + + + }; + + var Draw = Board.Draw = function ($lists) { + proxy.listOrder.forEach(function (luid) { + List.draw($lists, luid); + }); + }; + + return Board; +}); diff --git a/www/board/index.html b/www/board/index.html new file mode 100644 index 000000000..dc83f7bad --- /dev/null +++ b/www/board/index.html @@ -0,0 +1,103 @@ + + + + + + Zero Knowledge Date Picker + + + + + + + + + + + + +
+
+ Add List +
+ diff --git a/www/board/main.js b/www/board/main.js new file mode 100644 index 000000000..fee4570a0 --- /dev/null +++ b/www/board/main.js @@ -0,0 +1,95 @@ +define([ + '/api/config?cb=' + Math.random().toString(16).substring(2), + '/customize/messages.js', + '/board/board.js', + '/bower_components/textpatcher/TextPatcher.js', + '/bower_components/chainpad-listmap/chainpad-listmap.js', + '/bower_components/chainpad-crypto/crypto.js', + '/common/cryptpad-common.js', + '/common/visible.js', + '/common/notify.js', + '/bower_components/file-saver/FileSaver.min.js', + '/bower_components/jquery/dist/jquery.min.js', + '/customize/pad.js' +], function (Config, Messages, Board, TextPatcher, Listmap, Crypto, Cryptpad, Visible, Notify) { + var $ = window.jQuery; + var saveAs = window.saveAs; + + Cryptpad.styleAlerts(); + console.log("Initializing your realtime session..."); + + var secret = Cryptpad.getSecrets(); + + var module = window.APP = { + Board: Board, + }; + + var unnotify = function () { + if (!(module.tabNotification && + typeof(module.tabNotification.cancel) === 'function')) { return; } + module.tabNotification.cancel(); + }; + + var notify = function () { + if (!(Visible.isSupported() && !Visible.currently())) { return; } + unnotify(); + module.tabNotification = Notify.tab(document.title, 1000, 10); + }; + + var setEditable = function (bool) { + + }; + + setEditable(false); + + + var $lists = $('#lists'); + + var $addList = $('#create-list').click(function () { + Board.List.draw($lists); + }); + + var firstUser = function () { + Cryptpad.log("You are the first user to visit this board"); + }; + + var whenReady = function (opt) { + var rt = module.rt; + var proxy = rt.proxy; + + var first = Board.initialize(proxy); + + //var board = module.board = Board.create(proxy); + + Board.Draw($lists); + + if (first) { firstUser(); } + + }; + + var config = { + websocketURL: Config.websocketURL, + channel: secret.channel, + data: {}, + crypto: Crypto.createEncryptor(secret.key), + }; + + Cryptpad.ready(function () { + var rt = module.rt = Listmap.create(config); + var proxy = rt.proxy; + proxy + .on('create', function (info) { + var realtime = module.realtime = info.realtime; + window.location.hash = info.channel + secret.key; + }) + .on('ready', function (info) { + Cryptpad.log("Ready!"); + whenReady({ + + }); + }) + .on('disconnect', function () { + Cryptpad.warn("Disconnected!"); + }); + }); +});