mirror of
https://github.com/amark/gun.git
synced 2025-03-30 15:08:33 +00:00
121 lines
4.2 KiB
HTML
121 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
|
|
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
|
|
</head>
|
|
<body>
|
|
|
|
<h1><button id="left">←</button> <span id="date"></span> Schedule <button id="right">→</button></h1>
|
|
|
|
<form id="add">
|
|
<style>input[type="number"]{ width: 4em; }</style>
|
|
<input id="what" placeholder="What?">
|
|
<input id="where" placeholder="Where?">
|
|
<input type="number" id="hour"><script>hour.value = new Date().getHours() % 12 || 12</script> :
|
|
<input type="number" id="min" value="0">
|
|
<select id="ampm">
|
|
<option value="">am</option>
|
|
<option value="1">pm</option>
|
|
<script>ampm.children[new Date().getHours() < 12? 0 : 1].selected='selected'</script>
|
|
</select>
|
|
<input id="id" type="hidden">
|
|
<input id="go" type="submit" value="add">
|
|
<div id="err"></div>
|
|
</form>
|
|
|
|
<style>
|
|
.none { display: none; }
|
|
p, ul, li { list-style-type: none; margin: 0; padding: 0; }
|
|
</style>
|
|
|
|
<ul></ul>
|
|
|
|
<div class="model none">
|
|
<li>
|
|
<b class="when"></b>
|
|
<span class="what"></span>
|
|
<u class="where"></u>
|
|
<span class="sort none">0</span>
|
|
<button class="edit"><</button>
|
|
</li>
|
|
</div>
|
|
|
|
<script src="../jquery.js"></script>
|
|
<script src="../../../gun/gun.js"></script>
|
|
<script src="../../../gun/nts.js"></script>
|
|
<script src="../../../gun/lib/webrtc.js"></script>
|
|
|
|
<script>
|
|
var name = 'schedule/' + location.hash.slice(1);
|
|
var gun = Gun(location.origin + '/gun');
|
|
//var gun = Gun('http://localhost:8765/gun');
|
|
//var gun = Gun();
|
|
|
|
$('#add').on('submit', function(event){
|
|
event.preventDefault();
|
|
event = {};
|
|
if(!schedule.on){ return err.innerText = "No date!" }
|
|
event.when = new Date(schedule.on.getFullYear(), schedule.on.getMonth(), schedule.on.getDate(), hour.value % 12 + (ampm.value? 12 : 0), min.value).getTime();
|
|
if(!(event.what = what.value)){ return err.innerText = "No description!" }
|
|
if(!(event.where = where.value)){ return err.innerText = "No location!" }
|
|
var day = gun.get(name+now(event.when));
|
|
day.get(id.value || String.random(9)).put(event);
|
|
what.value = where.value = id.value = err.innerText = '';
|
|
go.value = 'add';
|
|
schedule(event.when);
|
|
});
|
|
|
|
function schedule(ms){
|
|
var day = new Date(ms);
|
|
if(schedule.on && schedule.on.toLocaleDateString() === day.toLocaleDateString()){ return } schedule.on = day;
|
|
$('#date').text(day.getFullYear()+' '+ day.toString().split(' ')[1] +' '+day.getDate());
|
|
day = gun.get(name+now(ms));
|
|
$('ul').empty();
|
|
day.map().on(UI);
|
|
}
|
|
schedule(+new Date());
|
|
|
|
$('#left').on('click', function(){ schedule(+new Date(schedule.on.getFullYear(), schedule.on.getMonth(), schedule.on.getDate() - 1)) });
|
|
$('#right').on('click', function(){ schedule(+new Date(schedule.on.getFullYear(), schedule.on.getMonth(), schedule.on.getDate() + 1)) });
|
|
|
|
function UI(event, id){
|
|
if(!event){ return }
|
|
var when = new Date(event.when);
|
|
if(schedule.on && when.toLocaleDateString() !== schedule.on.toLocaleDateString()){ return }
|
|
var ul = $('ul')
|
|
var li = $("#cal-" + id)[0]; // grab if exists
|
|
if(!li){
|
|
li = $('.model li').clone(true) // else create it
|
|
.attr('id', 'cal-' + id);
|
|
}
|
|
li = (UI.last = sort(event.when, ul.children('li').last())[0])? $(li).insertAfter(UI.last) : $(li).prependTo(ul);
|
|
li.find('.what').text(event.what);
|
|
li.find('.where').text(event.where);
|
|
li.find('.sort').text(event.when);
|
|
li.find('.edit').val(id);
|
|
|
|
var time = when.toLocaleTimeString();
|
|
li.find('.when').text(time.split(':').slice(0,2).join(':') + time.slice(-2));
|
|
};
|
|
|
|
$(document).on('click', '.edit', function(){
|
|
go.value = 'update';
|
|
id.value = this.value;
|
|
what.value = $(this).parent().find('.what').text();
|
|
where.value = $(this).parent().find('.where').text();
|
|
var when = new Date(parseFloat($(this).parent().find('.sort').text()));
|
|
hour.value = when.getHours() % 12 || 12;
|
|
min.value = when.getMinutes();
|
|
ampm.value = when.getHours() < 12? '' : 1;
|
|
what.focus();
|
|
});
|
|
|
|
function now(t){
|
|
return new Date(t || Gun.state()).toLocaleDateString().split('/').reverse().join('/')
|
|
}
|
|
|
|
function sort(num, li){ return parseFloat(num) >= parseFloat($(li).find('.sort').text() || -Infinity)? li : sort(num, li.prev()) }
|
|
</script>
|
|
</body>
|
|
</html> |