From b4cab5252b70891b52396865f160f4d993cc3409 Mon Sep 17 00:00:00 2001
From: DatNoHand <gabriel@selinschek.com>
Date: Tue, 18 Sep 2018 23:40:59 +0200
Subject: [PATCH] added presets

---
 server/public/js/client.js       | 24 +++++++++++++++++-------
 server/public/layout/style.css   |  4 ++++
 server/public/pages/main.tbd     |  4 ++++
 server/public/pages/preset.tbd   | 14 ++++++++++++++
 server/public/presets/index.html | 32 --------------------------------
 server/server.js                 |  5 ++++-
 6 files changed, 43 insertions(+), 40 deletions(-)
 delete mode 100644 server/public/presets/index.html

diff --git a/server/public/js/client.js b/server/public/js/client.js
index dc0f00c..fb77abe 100644
--- a/server/public/js/client.js
+++ b/server/public/js/client.js
@@ -16,8 +16,9 @@ var lamp_off_color = '#707070'
 var tries = 0
 var live = false
 var drawn = false
+var presets;
 
-DrawPage('main')
+DrawPage('main');
 Start()
 
 function Start() {
@@ -38,6 +39,11 @@ function Start() {
     var msg = JSON.parse(e.data);
 
     switch(msg.type) {
+      case 'init':
+      break;
+      case 'presets':
+        presets = msg.presets;
+      break;
       case 'status':
         lights_on = msg.on
         led_color = '#' + msg.color
@@ -127,7 +133,7 @@ function DrawWall() {
 
 // Button handlers
 $('div.b').on('input', '#br', function () {
-  SendBrightness($(this).val())
+  SendBrightness($(this).val());
 })
 
 $('div.b').on('click', '.button.amount', function () {
@@ -137,9 +143,13 @@ $('div.b').on('click', '.button.amount', function () {
 })
 
 $('div.b').on('click', '.button.preset', function () {
-  LoadPreset($(this).attr('data-preset'))
-})
+  SendPreset($(this).attr('data-id'));
+  console.log($(this).attr('data-id'));
+});
 
+$('div.b').on('click', '.button.main', () => {
+  DrawPage('main');
+});
 
 // On Wall button click
 $('div.b').on('click', 'div.wall', function () {
@@ -165,7 +175,7 @@ $('div.b').on('click', 'div.wall', function () {
 })
 
 // Longpress to show colorpicker
-var timer
+var timer;
 $('div.b').on('mousedown', '.color', function (e) {
   timer = setTimeout(() => {
     $('.button.colpicker').click();
@@ -194,7 +204,7 @@ $('div.b').on('click', '#onOff', function () {
 
 $('div.b').on('click', '.button.colpicker', function (e) {
   color = $(this).val().slice(1,7)
-})
+});
 
 function UpdateWalls() {
   for (let i = 0; i < wall_data.length; i++) {
@@ -212,7 +222,7 @@ function UpdateWalls() {
   }
 }
 
-function preset(id, data) {
+function SendPreset(id, data) {
   send({type: 'preset', presetId: id, data: data});
 }
 
diff --git a/server/public/layout/style.css b/server/public/layout/style.css
index 0bc02f6..2d91cc8 100644
--- a/server/public/layout/style.css
+++ b/server/public/layout/style.css
@@ -167,6 +167,10 @@ p {
     transition: 1s;
 }
 
+.button {
+  cursor: pointer;
+}
+
 .slider::-moz-range-thumb {
     width: 20px;
     height: 20px;
diff --git a/server/public/pages/main.tbd b/server/public/pages/main.tbd
index 7d06b47..093549c 100644
--- a/server/public/pages/main.tbd
+++ b/server/public/pages/main.tbd
@@ -51,6 +51,10 @@
 		<div class="effect amount button set" data-amount='5'><p>Jede 5. LED</p></div>
 		<div class="effect amount button set" data-amount='10'><p>Jede 10. LED</p></div>
 	</div>
+	<div class="colorpicker">
+		<!-- HACK:  -->
+		<button type="button" name="button" onclick="DrawPage('preset')">Presets</button>
+	</div>
 </div>
 <!-- <div class="center">
 	<div class="colorpicker">
diff --git a/server/public/pages/preset.tbd b/server/public/pages/preset.tbd
index e69de29..b7223ed 100644
--- a/server/public/pages/preset.tbd
+++ b/server/public/pages/preset.tbd
@@ -0,0 +1,14 @@
+<div class="center">
+    <div class="presetHolder"></div>
+    <div class="main button">Go back</div>
+</div>
+
+<script type="text/javascript">
+  (function() {
+    'use strict';
+    let preset;
+    for (preset of presets) {
+      $('div.presetHolder').append('<div class="button preset" data-id="'+preset.id+'">' + preset.slug + '</div>');
+    }
+  }());
+</script>
diff --git a/server/public/presets/index.html b/server/public/presets/index.html
deleted file mode 100644
index 80cbb32..0000000
--- a/server/public/presets/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<html>
-
-  <title>LED Controller</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
-
-
-  <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
-  <meta name="msapplication-TileColor" content="#212121">
-  <meta name="theme-color" content="#212121">
-  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
-	<link rel="stylesheet" type="text/css" href="../layout/style.css">
-
-<body>
-	<div class="center">
-		<div class="colorpicker">
-			<div class="effect preset button set"><p>Preset 1</p></div>
-			<div class="effect preset button set"><p>Preset 1</p></div>
-			<div class="effect preset button set"><p>Preset 1</p></div>
-			<div class="effect preset button set"><p>Preset 1</p></div>
-			<div class="effect preset button set"><p>Preset 1</p></div>
-			<div class="effect preset button set"><p>Preset 1</p></div>
-			<div class="effect preset button set"><p>Preset 1</p></div>
-		</div>
-	</div>
-
-	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-  <script src="../js/client.js"></script>
-
-</body>
diff --git a/server/server.js b/server/server.js
index 42edf4a..fa96141 100644
--- a/server/server.js
+++ b/server/server.js
@@ -60,7 +60,8 @@ presetDBInstance.add(new Preset('rainbow_animated', l_rainbow_factory));
 // If the server gets a connection
 wss.on('connection', function(ws, req) {
 
-  SendToEveryone({type: 'status', on: LedLib.on, max: LedLib.max_brightness, favorites: favorites, color: LedLib.color, wall_data: LedLib.wall_data })
+  SendToEveryone({type: 'status', on: LedLib.on, max: LedLib.max_brightness, favorites: favorites, color: LedLib.color, wall_data: LedLib.wall_data });
+  SendToEveryone({type: 'presets', presets: presetDBInstance.presets});
 
   ws.on('message', (msg) => {
     try {
@@ -123,6 +124,8 @@ function PresetDb() {
   }
 
   this.run = (id, data) => {
+    id = parseInt(id);
+    
     let p = this.getPresetById(id);
     if (p === undefined) return false;
     let d = data === undefined ? p.data : data;