akiross · June 17, 2018 17:11
diff --git a/checkboxes.html b/checkboxes.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="viewport" content="width=device-width, initial-scale=1">

 		<title>Collaborative checklist</title>
 	</head>
 	<body>
 		<h1>Contribute to the event!</h1>
 		<h2>Use the checklist below to tell everybody what you will bring</h2>
 		<form>
 			<div class="checkboxes">
 				<label><input name="item" type="checkbox"> First item</label>
 				<label><input name="item" type="checkbox"> Second item</label>
 				<label><input name="item" type="checkbox"> Third item</label>
 			</div>
 		</form>
 		<script src="http://localhost:9898/swell.js"></script>
 		<script>
 			function getCheckboxes(name) {
 				var els = document.getElementsByName(name);
 				var state = [];
 				els.forEach(el => {
 					state.push(el.checked);
 				});
 				return state;
 			}
 			function setCheckboxes(name, state) {
 				var els = document.getElementsByName(name);
 				els.forEach((el, i) => {
 					el.checked = state[i];
 				});
 			}

 			function connectionHandler(s, e) {
 				console.log(s);
 			}

 			swell.onReady(function(service) {

 				service.addConnectionHandler(connectionHandler);

 				service.login({
 					id: swell.Constants.ANONYMOUS_USER_ID,
 					password: "",
 				})
 				.then(profile => {
 					return service.open({id: 'someservice'});
 				})
 				.then(root => {
 					// Initialize checkboxes
 					if (!root.node('state')) {
 						console.log('Inizializzo lo stato');
 						root.set('state', [false, false, false]);
 						// To make object usable by anon, it must be public
 						root.setPublic(true);
 					} else {
 						var values = root.get('state');
 						setCheckboxes('item', values);
 					}

 					root.addListener(function(event) {
 						if (!event) return;
 						console.log('Received event on key', event.key);
 						if (event.key == 'state' && event.type == swell.Event.UPDATED_VALUE) {
 							var data = event.node.value;
 							console.log('Event data', event.node.value);
 							setCheckboxes('item', data);
 						}
 					});

 					// When a checkbox changes, the global state is updated
 					document.getElementsByName('item').forEach(function(el) {
 						el.addEventListener('change', function() {
 							var values = getCheckboxes('item');
 							console.log('Saving global state', values);
 							root.set('state', values);
 							return false;
 						});
 					});
 					*/
 				})
 				.catch(err => {
 					console.log(err);
 					window.alert("Error " + err);
 				});
 			});
 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Collaborative checklist</title>
	</head>
	<body>
	<h1>Contribute to the event!</h1>
	<h2>Use the checklist below to tell everybody what you will bring</h2>
	<form>
	<div class="checkboxes">
	<label><input name="item" type="checkbox"> First item</label>
	<label><input name="item" type="checkbox"> Second item</label>
	<label><input name="item" type="checkbox"> Third item</label>
	</div>
	</form>
	<script src="http://localhost:9898/swell.js"></script>
	<script>
	function getCheckboxes(name) {
	var els = document.getElementsByName(name);
	var state = [];
	els.forEach(el => {
	state.push(el.checked);
	});
	return state;
	}
	function setCheckboxes(name, state) {
	var els = document.getElementsByName(name);
	els.forEach((el, i) => {
	el.checked = state[i];
	});
	}

	function connectionHandler(s, e) {
	console.log(s);
	}

	swell.onReady(function(service) {

	service.addConnectionHandler(connectionHandler);

	service.login({
	id: swell.Constants.ANONYMOUS_USER_ID,
	password: "",
	})
	.then(profile => {
	return service.open({id: 'someservice'});
	})
	.then(root => {
	// Initialize checkboxes
	if (!root.node('state')) {
	console.log('Inizializzo lo stato');
	root.set('state', [false, false, false]);
	// To make object usable by anon, it must be public
	root.setPublic(true);
	} else {
	var values = root.get('state');
	setCheckboxes('item', values);
	}

	root.addListener(function(event) {
	if (!event) return;
	console.log('Received event on key', event.key);
	if (event.key == 'state' && event.type == swell.Event.UPDATED_VALUE) {
	var data = event.node.value;
	console.log('Event data', event.node.value);
	setCheckboxes('item', data);
	}
	});

	// When a checkbox changes, the global state is updated
	document.getElementsByName('item').forEach(function(el) {
	el.addEventListener('change', function() {
	var values = getCheckboxes('item');
	console.log('Saving global state', values);
	root.set('state', values);
	return false;
	});
	});
	*/
	})
	.catch(err => {
	console.log(err);
	window.alert("Error " + err);
	});
	});
	</script>
	</body>
	</html>