Patrón Observador (Publisher - suscribe)

Post by **xacarana** » Tue Oct 25, 2016 7:36 am

HTML

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/vendor/jquery.min.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<input type="button" id="btnNotificar" value="Notificar">
<input type="button" id="btnAgregar" value="Suscribir"><br>
<select id="suscribe">
	<option>Colombia</option>
	<option>USA</option>
	<option>España</option>
	<option>Japón</option>
</select>
<select id="publisher">
</select>
<div>
	<div class="sensor" id="pais_1">Colombia</div>
	<div class="sensor" id="pais_2">USA</div>
	<div class="sensor" id="pais_3">España</div>
	<div class="sensor" id="pais_4">Japón</div>
</div>

</body>
</html>

JS

Code: Select all

var suscribe, publisher, btnAgregar,btnNotificar;
var suscribers = [];
var ref = [];
window.onload = function()
{
	suscribe   = $("#suscribe");
	publisher  = $("#publisher");
	btnAgregar = $("#btnAgregar");
	btnNotificar = $("#btnNotificar");
	btnAgregar.click(suscribir);
	btnNotificar.click(notificar);
	ref["Colombia"] = $("#pais_1");
	ref["USA"] = $("#pais_2");
	ref["España"] = $("#pais_3");
	ref["Japón"] = $("#pais_4");
}

function suscribir(event)
{	
	var option = "<option>"+suscribe.val()+"</option>";
	suscribe.val("");
	publisher.append(option);
}

function notificar()
{
	console.log(publisher.childNodes())
	/*for(i in publisher)
	{
		console.log(i);
	}*/
}

CSS

Code: Select all

.sensor{
	width: 50px;
	height: 50px;
	border-radius: 50px;
	background: grey;
	display: inline-block;
	font-size: 8px;
	line-height: 50px;
	text-align: center;
}
.todo_bien{
	background: green;
}
.alerta{
	background: red;
}
.precaucion{
	background: orange;
}