Use led_colors

climbdex/db.py

@@ -75,6 +75,14 @@
         INNER JOIN leds ON placements.hole_id = leds.hole_id
         WHERE placements.layout_id = $layout_id
         AND leds.product_size_id = $size_id""",
+    "led_colors": """
+        SELECT
+            placement_roles.id,
+            placement_roles.led_color
+        FROM placement_roles
+        JOIN layouts
+        ON layouts.product_id = placement_roles.product_id
+        WHERE layouts.id = $layout_id""",
     "image_filename": """
         SELECT
             image_filename

climbdex/static/js/bluetooth.js

@@ -40,8 +40,7 @@ function encodePosition(position) {
   return [position1, position2];
 }
 
-function encodeColor(hexColorString) {
-  const color = hexColorString.substring(1);
+function encodeColor(color) {
   const substring = color.substring(0, 2);
   const substring2 = color.substring(2, 4);
 

climbdex/static/js/climbCreation.js

@@ -30,15 +30,11 @@ function getFrames() {
 document
   .getElementById("button-illuminate")
   .addEventListener("click", function () {
-    const colorMap = colors.reduce((acc, colorRow) => {
-      acc[colorRow[0]] = colorRow[1];
-      return acc;
-    }, {});
     const frames = getFrames();
     let bluetoothPacket = getBluetoothPacket(
       frames,
       placementPositions,
-      colorMap
+      ledColors
     );
 
     const urlParams = new URLSearchParams(window.location.search);

climbdex/static/js/results.js

@@ -3,7 +3,6 @@ const colorMap = colors.reduce((acc, colorRow) => {
   return acc;
 }, {});
 
-
 function drawClimb(
   uuid,
   name,
@@ -68,11 +67,10 @@ function drawClimb(
   betaAnchor.href = `/${board}/beta/${uuid}/`;
 
   document.getElementById("button-illuminate").onclick = function () {
-    console.log(frames, placementPositions, colorMap);
     const bluetoothPacket = getBluetoothPacket(
       frames,
       placementPositions,
-      colorMap
+      ledColors
     );
     illuminateClimb(board, bluetoothPacket);
   };
@@ -115,10 +113,7 @@ function clickClimbButton(index, pageSize, resultsCount) {
 
 function getTickPath() {
   const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  path.setAttribute(
-    "d",
-    "M 30,180 90,240 240,30"
-  );
+  path.setAttribute("d", "M 30,180 90,240 240,30");
   path.setAttribute("style", "stroke:#000; stroke-width:25; fill:none");
   return path;
 }
@@ -131,7 +126,10 @@ function getTickSvg(tickType) {
   const upwardShift = 30;
 
   const centerX = viewBoxSize / 2;
-  tickSvg.setAttribute("viewBox", `0 +${upwardShift} ${viewBoxSize} ${viewBoxSize - upwardShift}`);
+  tickSvg.setAttribute(
+    "viewBox",
+    `0 +${upwardShift} ${viewBoxSize} ${viewBoxSize - upwardShift}`
+  );
   tickSvg.setAttribute("height", `${tickSize}px`);
   tickSvg.setAttribute("width", `${tickSize}px`);
 
@@ -245,4 +243,3 @@ fetchResultsCount().then((resultsCount) => {
     drawResultsPage(results, 0, 10, resultsCount);
   });
 });
-

climbdex/templates/climbCreation.html.j2

@@ -39,6 +39,7 @@
         <script>
             const appUrl = "{{ app_url }}";
             const colors = {{ colors | tojson}};
+            const ledColors = {{ led_colors | tojson}};
             const placementPositions = {{ placement_positions | tojson}};
             const onClick = function (event) {
                 onFilterCircleClick(event.target, {{ colors | tojson}})

climbdex/templates/results.html.j2

@@ -78,6 +78,7 @@
     <script>
       const appUrl = "{{ app_url }}";
       const colors = {{ colors | tojson}};
+      const ledColors = {{ led_colors | tojson}};
       const tickedClimbs = {{ ticked_climbs | tojson}};
       const placementPositions = {{ placement_positions | tojson}};
       drawBoard('svg-climb', {{ images_to_holds | tojson}}, {{ edge_left }}, {{ edge_right }}, {{ edge_bottom }}, {{ edge_top }});

climbdex/views.py

@@ -51,6 +51,7 @@ def results():
         colors=climbdex.db.get_data(board_name, "colors", {"layout_id": layout_id}),
         ticked_climbs=ticked_climbs,
         placement_positions=placement_positions,
+        led_colors=get_led_colors(board_name, layout_id),
         **get_draw_board_kwargs(
             board_name,
             layout_id,
@@ -91,6 +92,7 @@ def create():
             board_name, "size_name", {"layout_id": layout_id, "size_id": size_id}
         )[0][0],
         colors=colors,
+        led_colors=get_led_colors(board_name, layout_id),
         placement_positions=placement_positions,
         **get_draw_board_kwargs(board_name, layout_id, size_id, set_ids),
     )
@@ -148,3 +150,11 @@ def get_placement_positions(board_name, layout_id, size_id):
         placement_id: position
         for placement_id, position in climbdex.db.get_data(board_name, "leds", binds)
     }
+
+
+def get_led_colors(board_name, layout_id):
+    binds = {"layout_id": layout_id}
+    return {
+        role_id: color
+        for role_id, color in climbdex.db.get_data(board_name, "led_colors", binds)
+    }