gun
Version:
A realtime, decentralized, offline-first, graph data synchronization engine.
148 lines (139 loc) • 3.67 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="../jquery.js"></script>
<script src="../../../gun/gun.js"></script>
<script src="../../../gun/sea.js"></script>
<!-- script src="../../../gun/axe.js"></script -->
<script> // main init!
var app = {
view: $, // replace with not jquery!
data: GUN('http://localhost:8765/gun'), // peer-to-peer database!
};
app.user = app.data.user().recall({sessionStorage: true});
</script>
</head>
<body>
<div id="login" class="center pad">
<style>
#login input {
max-width: 6em;
}
</style>
<form id="sign" onsubmit="app.login(event)">
<input id="alias" placeholder="username" class="jot rim">
<input id="pass" type="password" placeholder="passphrase" class="jot rim">
<input id="in" type="submit" value="sign in" class="green whitet act gap sap rim">
<input id="up" type="button" value="sign up" onclick="app.register()" class="act gap sap rim">
</form>
<script>
app.login = function(eve){
if(app.error(eve)){ return }
app.data.user().auth(
app.view('#alias').val(),
app.view('#pass').val(),
app.error
);
};
app.register = function(eve){
app.data.user().create(
app.view('#alias').val(),
app.view('#pass').val(),
app.login
);
};
app.data.on('auth', function(eve){
app.view('#sign').hide(); // hide login form upon logging in.
});
</script>
</div>
<div id="poll" class="pad">
<style>
#poll {
display: flex;
flex-wrap: wrap;
}
#poll div {
margin: 1%;
width: 100%;
}
</style>
<script>
(window.onhashchange = async function(){
app.poll = app.data.get(location.hash.slice(1));
app.poll.map().on(function(data, id){
app.render(id = 'p'+String.hash(id), '.q', '#poll', data).css({order: data.how}).data('as',{$:this});
console.log("poll?", id, data);
});
})();
app.render = function(id, model, onto, data){
var ui = $(
$('#'+id).get(0) ||
$('.model').find(model).clone(true).attr('id', id).appendTo(onto)
);
$.each(data, function(field, val){
if($.isPlainObject(val)){ return }
ui.find("[name='" + field + "']").val(val).text(val);
});
return ui;
}
</script>
<div class="model">
<div class="q">
<span name="what"></span>
</div>
</div>
</div>
<div id="make" class="pad">
<style>
#make #add {
border-radius: 100%;
width: 2em;
height: 2em;
line-height: 0em;
padding: 0;
margin: 0;
text-align: center;
}
</style>
<button id="add" onclick="app.add()" class="green whitet act">+</button>
<span class="hint">add new title, text, question...</span>
<script>
app.add = async function(){
if(app.error(app.user)){ return }
var tmp = await (app.poll = app.poll || app.data.get(location.hash.slice(1)));
if(!tmp){ app.poll = app.user.get('poll').set({}) }
app.poll.set({how: tmp = Object.keys(tmp||'').length || 1, what: "Question " + tmp });
if(!location.hash){ location.hash = (await app.poll)._['#'] }
}
</script>
</div>
<span id="error">
<span id="err"></span>
<script>
app.error = function(eve){
app.view('#err').text('').hide();
if(!eve){ return }
if(eve.preventDefault){
eve.preventDefault();
return;
}
if(eve._ && !eve.is){ eve = {err: "Not signed in!"} }
if(!eve.err){ return }
app.view('#err').text(eve.err).show();
return true;
}
</script>
</span>
<style>
#error { position: fixed; top: 0; width: 100%; text-align: center; background: white; }
</style>
<link rel="stylesheet" href="../style.css"/>
<style>
@import url('https://fonts.googleapis.com/css?family=Oxygen');
html, body { font-family: "Oxygen", sans-serif; }
</style>
</body>
</html>