mirror of
https://github.com/amark/gun.git
synced 2025-03-30 15:08:33 +00:00
148 lines
3.6 KiB
HTML
148 lines
3.6 KiB
HTML
<!DOCTYPE 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> |