<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>volkszaehler.org - web frontend</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	
	<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
	<link rel="apple-touch-icon" href="../favicon.ico">

	<!-- jQuery -->
	<script type="text/javascript" src="javascripts/jquery/jquery-1.5.1.js"></script>
	<script type="text/javascript" src="javascripts/jquery/jquery-ui-1.8.10.min.js"></script>
	<script type="text/javascript" src="javascripts/jquery/jquery-treeTable.js"></script>
	<script type="text/javascript" src="javascripts/jquery/jquery-extensions.js"></script>
	
	<!-- misc helpers -->
	<script type="text/javascript" src="javascripts/json.js"></script>
	<script type="text/javascript" src="javascripts/helper.js"></script>
	
	<!--[if IE]><script language="javascript" type="text/javascript" src="javascripts/flot/excanvas.min.js"></script><![endif]-->
	<script type="text/javascript" src="javascripts/flot/jquery.flot.js"></script>
	<script type="text/javascript" src="javascripts/flot/jquery.flot.crosshair.js"></script>
	<script type="text/javascript" src="javascripts/flot/jquery.flot.selection.js"></script>

	<!-- volkszaehler.org code -->
	<script type="text/javascript" src="javascripts/init.js"></script>
	<script type="text/javascript" src="javascripts/options.js"></script>
	<script type="text/javascript" src="javascripts/functions.js"></script>
	<script type="text/javascript" src="javascripts/uuid.js"></script>
	<script type="text/javascript" src="javascripts/wui.js"></script>
	<script type="text/javascript" src="javascripts/entity.js"></script>
	
	<link rel="stylesheet" type="text/css" href="stylesheets/ui-lightness/jquery-ui-1.8.10.css" />
	<link rel="stylesheet" type="text/css" href="stylesheets/jquery.treeTable.css">
	<link rel="stylesheet" type="text/css" href="stylesheets/jquery.ui.custom.css">	
	<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>
<body>
<div id="header"></div>
<div id="content">
	<div id="headline">
		<h2 id="title"></h2>
		<button id="permalink"><img src="images/link.png" alt="permalink" /> Permalink</button>
		<br style="clear: both" />
	</div>
	<div id="plot">
		<div id="flot"></div>
		<div id="overlay"></div>
	</div>	

<div id="accordion">
	<div id="controls">
		<button value="move-back"><img src="images/control_rewind_blue.png" title="move back" /></button>
		<button value="zoom-in"><img src="images/zoom_in.png" title="zoom in" /></button>
		<button value="zoom-out"><img src="images/zoom_out.png" title="zoom out" /></button>
		<button value="zoom-hour">Stunde</button>
		<button value="zoom-day">Tag</button>
		<button value="zoom-week">Woche</button>
		<button value="zoom-month">Monat</button>
		<button value="zoom-year">Jahr</button>
		<button value="move-last">Jetzt&nbsp;<img src="images/control_end_blue.png" title="move to present" /></button>
		<button value="move-forward"><img src="images/control_fastforward_blue.png" title="move forward" /></button>
	</div>
	
		<h3><img src="images/table.png" alt="" /> Kanäle</h3>
		<div id="entity-list">
		<table>
			<thead>
				<tr>
					<th><img src="images/eye.png" alt="Anzeige" title="Anzeige" /></th>
					<th></th>
					<th>Titel</th>
					<th>Typ</th>
					<th>Min.</th>
					<th>Max.</th>
					<th>&empty;</th>
					<th>aktuell</th>
					<th>Verbrauch</th>
					<th>Kosten</th>
					<th>Aktion</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
		<div><button name="entity-add"><img src="images/add.png" alt="add" /> Kanal hinzuf&uuml;gen</button></div>
		</div>
		<h3><img src="images/wrench.png" alt="" /> Optionen</h3>
		<div id="options">
			<table>
				<thead>
					<tr>
						<th>Option</th>
						<th>Wert</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><label for="refresh"><img src="images/arrow_refresh.png" alt="" /> Automatisch aktualisieren</label></td>
						<td><input type="checkbox" id="refresh" /> <span id="refresh-time"><span></td>
					</tr>
					<tr>
						<td><img src="images/eye.png" alt="" /> Darstellung</td>
						<td>
							<label for="render-points"><input type="radio" id="render-points" name="render" value="points" /> Punkte</label>&nbsp;
							<label for="render-lines"><input type="radio" id="render-lines" name="render" value="lines" /> Linien</label>
						</td>
					</tr>
					<tr>
						<td><label for="middleware-url"><img src="images/server.png" alt="" /> Backend-Adresse</label></td>
						<td><input type="text" id="middleware-url" /></td>
					</tr>
					<!-- <tr>
						<td><label for="tuples"><img src="images/shading.png" alt="" /> Tuples (Auflösung)</label></td>
						<td><input type="text" id="tuples" size="5" /></td>
					</tr> -->
				</tbody>
			</table>
			<div><button name="options-save"><img src="images/save.png" alt="save" /> Einstellungen speichern</button></div>
		</div>
	</div>
</div>
<div id="footer">
	&copy; 2010 - <a href="http://volkszaehler.org/">volkszaehler.org</a> - the open smartmeter platform
</div>

<!-- dialogs -->
<div id="entity-move" class="dialog">
	<p>
		<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
		Sie sind im Begriff einen Kanal oder eine Gruppe zu Verschieben!
	</p>
</div>

<div id="entity-add" class="dialog">
	<div class="tabs">
		<ul>
			<li><a href="#entity-subscribe">Kanal abonnieren</a></li>
			<li><a href="#entity-subscribe-public">&ouml;ffentliche Kan&auml;le</a></li>
			<li><a href="#entity-create">Kanal erstellen</a></li>
		</ul>
		<div id="entity-subscribe">
			<p>Hier k&ouml;nnen Sie einen existierenden Kanal über seine UUID hinzuf&uuml;gen</p>
			<p><label for="uuid">UUID:</label> <input id="uuid" type="text" size="36" maxlength="36" /></p>
			<!-- <p><label for="middleware">Backend: </label> <input id="middleware" type="text" /></p> -->
			<p><label for="cookie">Cookie:</label> <input class="cookie" type="checkbox" /></p>
			<input type="button" value="abonnieren" />
		</div>
		<div id="entity-subscribe-public">
			<p>Hier k&ouml;nnen Sie &ouml;ffentliche Kan&auml;le abonnieren.</p>
			<p><label for="uuid">Kanal:</label> <select id="public" size="1"></select></p>
			<p><label for="cookie">Cookie:</label> </td><td><input class="cookie" type="checkbox" /></p>
			<input type="button" value="abonnieren" />
		</div>
		<div id="entity-create">
			<form method="post" target="_blank">
				<table>
					<tr><td>Middleware URL:</td><td><input type="text" id="entity-create-middlware" /><p style="font-size: small">Bsp: http://volkszaehler.org/demo/middleware.php</p></td></tr>
					<tr><td>Typ:</td><td><select name="type" size="1"></select></td></tr>
					<tr><td>&Ouml;ffentlich:</td><td><input type="radio" name="public" value="1"> ja<br /><input type="radio" name="public" value="0"> nein</td></tr>
					<tr><td>Titel:</td><td><input type="text" name="title" value="K&uuml;hlschrank" /></td></tr>
					<tr><td>Aufl&ouml;sung:</td><td><input type="text" name="resolution" value="1000" /></td></tr>
					<tr><td>Kosten:<br /><p style="font-size: small">pro Wh</p></td><td><input type="text" name="cost" value="0.00025" /> €</td></tr>
					<tr><td>Beschreibung:</td><td><input type="text" name="description" value="Swissnox 1-phasig" /></td></tr>
				</table>
				<p><input type="submit" value="erstellen" /></p>
				<p>Es wird ein neuer Kanal erstellt. Die Antwort des Backends enthällt dann die UUID.<br />
				Diese muss dann im Controller angegeben werden (z.B. AVR Net-IO).</p>
			</form>
		</div>
	</div>
</div>
</body>
</html>