2014-03-25 13:43:11 -07:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<script type="text/javascript" src="/cosmopolite/static/cosmopolite.js" charset="UTF-8"></script>
|
|
|
|
|
<style>
|
|
|
|
|
a {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div>Google user: <span id="google_user"></span></div>
|
|
|
|
|
|
|
|
|
|
<div>
|
2014-05-01 11:33:29 -07:00
|
|
|
<div>
|
|
|
|
|
Key:
|
|
|
|
|
<select id="keys"></select>
|
|
|
|
|
<input type="button" id="set" value="Set">
|
|
|
|
|
<input type="button" id="add" value="Add">
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
Last set:
|
|
|
|
|
<span id="last_set"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<input type="checkbox" id="public"> Public
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<textarea id="value" rows="10" cols="40"></textarea>
|
|
|
|
|
</div>
|
2014-03-25 13:43:11 -07:00
|
|
|
</div>
|
|
|
|
|
<script>
|
2014-04-30 17:54:48 -07:00
|
|
|
var keys = document.getElementById('keys');
|
|
|
|
|
var value = document.getElementById('value');
|
2014-05-01 11:33:29 -07:00
|
|
|
var last_set = document.getElementById('last_set');
|
|
|
|
|
var is_public = document.getElementById('public');
|
2014-04-30 17:54:48 -07:00
|
|
|
|
|
|
|
|
var selectKey = function(new_key) {
|
|
|
|
|
keys.value = new_key;
|
|
|
|
|
keys.dispatchEvent(new CustomEvent('change'));
|
|
|
|
|
};
|
|
|
|
|
|
2014-05-01 11:33:29 -07:00
|
|
|
var addKey = function(new_key, index) {
|
2014-04-30 17:54:48 -07:00
|
|
|
var option = document.createElement('option');
|
|
|
|
|
option.text = new_key;
|
|
|
|
|
keys.options.add(option, index);
|
|
|
|
|
if (keys.options.length == 1) {
|
|
|
|
|
selectKey(new_key);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
2014-03-25 13:43:11 -07:00
|
|
|
window.addEventListener('load', function() {
|
|
|
|
|
var googleUser = document.getElementById('google_user');
|
|
|
|
|
|
|
|
|
|
var callbacks = {
|
|
|
|
|
onLogin: function(username, logout_url) {
|
|
|
|
|
googleUser.innerHTML =
|
|
|
|
|
username +
|
|
|
|
|
' <a href="' + logout_url + '" target="_blank">(log out)</a>';
|
|
|
|
|
},
|
|
|
|
|
onLogout: function(login_url) {
|
|
|
|
|
googleUser.innerHTML =
|
|
|
|
|
'<a href="' + login_url + '" target="_blank">(log in)</a>';
|
|
|
|
|
},
|
2014-04-30 17:54:48 -07:00
|
|
|
onStateChange: function(new_key, new_value) {
|
2014-03-25 13:43:11 -07:00
|
|
|
for (var i = 0; i < keys.options.length; ++i) {
|
2014-04-30 17:54:48 -07:00
|
|
|
if (keys.options[i].value == new_key) {
|
|
|
|
|
return;
|
2014-03-25 13:43:11 -07:00
|
|
|
};
|
2014-04-30 17:54:48 -07:00
|
|
|
if (keys.options[i].value > new_key) {
|
2014-05-01 11:33:29 -07:00
|
|
|
addKey(new_key, i);
|
2014-04-30 17:54:48 -07:00
|
|
|
return;
|
2014-03-25 13:43:11 -07:00
|
|
|
};
|
|
|
|
|
};
|
2014-04-30 17:54:48 -07:00
|
|
|
// Sorts at the end
|
2014-05-01 11:33:29 -07:00
|
|
|
addKey(new_key, keys.options.length);
|
2014-03-25 13:43:11 -07:00
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var debug = new cosmopolite.Client(callbacks);
|
|
|
|
|
|
|
|
|
|
document.getElementById('set').addEventListener('click', function() {
|
2014-05-01 11:33:29 -07:00
|
|
|
debug.setValue(keys.value, value.value, is_public.checked);
|
2014-03-25 13:43:11 -07:00
|
|
|
});
|
|
|
|
|
|
2014-04-30 17:54:48 -07:00
|
|
|
document.getElementById('add').addEventListener('click', function() {
|
|
|
|
|
var new_key = prompt('New key name:');
|
|
|
|
|
if (new_key === null) {
|
2014-03-25 13:43:11 -07:00
|
|
|
return;
|
|
|
|
|
}
|
2014-04-30 17:54:48 -07:00
|
|
|
debug.setValue(new_key, '');
|
|
|
|
|
selectKey(new_key);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('keys').addEventListener('change', function() {
|
2014-05-01 11:33:29 -07:00
|
|
|
var value_obj = debug.getValue(keys.value);
|
|
|
|
|
value.value = value_obj.value;
|
|
|
|
|
last_set.innerHTML = (new Date(value_obj.last_set * 1000)).toString();
|
|
|
|
|
is_public.checked = value_obj['public'];
|
2014-03-25 13:43:11 -07:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
