Added first (very basic) version of status-app.

Added wtfpl license (was asked for this). Added some comments. Deleted some old files.
bloatless · Dec 23, 2011 · ccbda12 · ccbda12
1 parent 5c08967
commit ccbda12
Show file tree

Hide file tree

Showing 14 changed files with 398 additions and 326 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,13 @@
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+                    Version 2, December 2004
+
+ Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
+
+ Everyone is permitted to copy and distribute verbatim or modified
+ copies of this license document, and changing it is allowed as long
+ as the name is changed.
+
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. You just DO WHAT THE FUCK YOU WANT TO.
diff --git a/README.md b/README.md
@@ -26,4 +26,4 @@ This creates a server on localhost:8000 with one Application that listens on `ws
 ## Libraries used
 
 - [SplClassLoader](http://gist.github.com/221634) by the PHP Standards Working Group
-- [jQuery](http://jquery.com/)
+- [jQuery](http://jquery.com/)
diff --git a/client/client.html b/client/client.html
diff --git a/client/css/status.css b/client/css/status.css
@@ -0,0 +1,96 @@
+body {
+	background: #f1f1f1;
+	padding-top: 65px;
+	text-align: center;
+	font-family: Arial, Helvetica, sans-serif;
+	text-align: center;
+	font-size: 16px;
+	line-height: 25px;
+	color: #444;
+}
+
+a,
+a:hover { 
+	color: #169;
+}
+
+p {
+	margin: 0;
+	padding: 0 0 21px 0; 
+}
+
+#container {
+	text-align: left;
+	width: 900px;
+	background: #fff;
+	position: relative;
+	margin: 0 auto;
+	padding: 40px;
+	border: 1px solid #ddd;
+	border-radius: 10px;
+		-moz-border-radius: 10px;
+}
+
+h1 {
+	font-size: 30px;
+	color: #333;
+	font-weight: normal;
+	margin: 0 0 20px 0;
+	padding: 0;
+	display: inline-block;
+}
+
+#log {
+	margin: 6px 0 0 0;
+	padding: 5px;
+	border: 1px solid #ccc;
+	height: 200px;
+	overflow: auto;
+}
+
+#send {
+	margin: 0 0 10px 0;
+}
+
+#status {
+	float: right;
+	padding: 0 10px;
+	cursor: pointer;
+	border-radius: 5px;
+		-moz-border-radius: 5px;
+}
+.offline {
+	background: #ddd;
+	color: #000;
+}
+.online {
+	background: #093;
+	color: #fff;
+}
+.error {
+	background: #930;
+	color: #fff;
+}
+.connecting {
+	background: #fc0;
+	color: #000;
+}
+
+#action,
+#data {
+	display: block;
+	width: 400px;
+	margin: 0 0 5px 0;
+}
+
+.bold {
+	font-weight: bold;
+}
+
+#labelClients {
+	display: block;
+}
+#clientListSelect {
+	width: 200px;
+	height: 120px;
+}
diff --git a/client/echo.html b/client/echo.html
diff --git a/client/js/status.js b/client/js/status.js
@@ -0,0 +1,65 @@
+$(document).ready(function() {		
+	log = function(msg){
+		$('#log').prepend(msg + '<br />')
+	};
+
+	var socket;
+	if ( $.browser.mozilla )
+	{
+		socket = new MozWebSocket('ws://localhost:8000/status');
+	}
+	else
+	{
+		socket = new WebSocket('ws://localhost:8000/status');
+	}	
+
+	socket.onopen = function(msg){
+		$('#status').removeClass().addClass('online').html('connected');				
+	};
+	socket.onmessage = function(msg){
+		var response = JSON.parse(msg.data);
+		switch(response.action)
+		{
+			case 'statusMsg':
+				log(response.data);
+			break;
+
+			case 'clientConnected':
+				clientConnected(response.data);
+			break;
+
+			case 'clientDisconnected':
+				clientDisconnected(response.data);
+			break;
+		}
+	};
+	socket.onclose = function(msg){
+		$('#status').removeClass().addClass('offline').html('disconnected');
+	};
+
+	$('#send').click(function(){
+		var payload = new Object();				
+		payload['action'] = $('#action').val();
+		payload['data'] = $('#data').val();				
+		socket.send(JSON.stringify(payload));
+	});	
+
+	$('#status').click(function(){
+		socket.close();		
+	});
+
+	function statusMsg(msg)
+	{
+		log(msg);
+	}
+
+	function clientConnected(data)
+	{		
+		$('#clientListSelect').append(new Option(data.ip + ':' + data.port, data.port));
+	}
+
+	function clientDisconnected(port)
+	{
+		$("#clientListSelect option[value='" + port + "']").remove();
+	}
+});
diff --git a/client/status.html b/client/status.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<link rel="stylesheet" href="css/status.css">
+
+    <script src="js/jquery.min.js"></script>
+	<script src="js/json2.js"></script>
+	<script src="js/status.js"></script>
+
+	<meta charset=utf-8 />
+
+	<title>Waschsalon WSS Status</title>
+</head>
+<body>
+    <div id="container">
+        <h1>Waschsalon WSS Status</h1>
+		<span id="status" class="offline">disconnected</span>
+
+		<div id="clientList">
+			<label class="bold" id="labelClients">Clients:</label>
+			<select id="clientListSelect" multiple="multiple"></select>
+		</div>
+
+		<div class="bold">Server Messages:</div>
+        <div id="log"></div>
+    </div>
+</body>
+</html>