realtime kanban board
ansuz
8 years ago
parent
4561ddcdf3
commit
122a9fe068
@ -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 $('<input>', 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 = $('<div>', {
|
||||
|
||||
})
|
||||
.addClass('card-holder');
|
||||
|
||||
var $new = $('<a>', {
|
||||
|
||||
})
|
||||
.addClass('add-card')
|
||||
.text('add new card')
|
||||
.click(function () {
|
||||
// is this correct?
|
||||
$cards.append(Board.Card(id));
|
||||
});
|
||||
|
||||
var $list = $('<div>', {
|
||||
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 = $('<div>', {
|
||||
|
||||
})
|
||||
.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;
|
||||
});
|
||||
@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Zero Knowledge Date Picker</title>
|
||||
<link rel="icon" type="image/png"
|
||||
href="/customize/main-favicon.png"
|
||||
data-main-favicon="/customize/main-favicon.png"
|
||||
data-alt-favicon="/customize/alt-favicon.png"
|
||||
id="favicon" />
|
||||
<link rel="stylesheet" href="/customize/main.css" />
|
||||
<script data-main="main" src="/bower_components/requirejs/require.js"></script>
|
||||
<script>
|
||||
require.config({
|
||||
waitSeconds: 60,
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100;
|
||||
}
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
#adduser, #addoption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#lists {
|
||||
display: inline-block;
|
||||
border: 1px solid white;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
#create-list {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.list-column {
|
||||
vertical-align: top;
|
||||
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
border: 1px solid white;
|
||||
}
|
||||
/* input */
|
||||
input.list-title {
|
||||
margin: 15px;
|
||||
width: 80%;
|
||||
display: block;
|
||||
}
|
||||
.card-holder {
|
||||
border: 1px solid #ddd;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
.add-card {
|
||||
background-color: green;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 80%;
|
||||
cursor: pointer;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
border: 5px solid blue;
|
||||
|
||||
}
|
||||
|
||||
.card-container {
|
||||
display: block;
|
||||
height: 50px;
|
||||
width: 95%;
|
||||
margin: auto;
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
#board {
|
||||
margin-left: 10vw;
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--<div id="main"> -->
|
||||
|
||||
<div id="toolbar" class="buttons">
|
||||
<sub><a href="/"></a></sub>
|
||||
</div>
|
||||
|
||||
<div id="board">
|
||||
<div id="lists"></div>
|
||||
<span id="create-list">Add List</span>
|
||||
</div>
|
||||
|
||||
@ -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!");
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue