Add lights example to example project

example_project/assets/svelte/LightControllers.svelte

@@ -0,0 +1,60 @@
+<script>
+    export let pushEvent
+    export let isOn = false
+    const toggleLight = () => {
+        isOn = !isOn
+        pushEvent(isOn ? "on" : "off")
+    }
+</script>
+
+<div class="my-2 flex justify-between items-center">
+    <button
+        type="button"
+        class={`${
+            isOn ? "bg-brand" : "bg-gray-200"
+        } relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2`}
+        role="switch"
+        aria-checked="false"
+        on:click={toggleLight}
+    >
+        <span class="sr-only">Use setting</span>
+        <span
+            aria-hidden="true"
+            class={`${
+                isOn ? "translate-x-5" : "translate-x-0"
+            } pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out`}
+        />
+    </button>
+    <div class="flex gap-2">
+        <button
+            phx-click="down"
+            class="flex items-center justify-center text-xl font-bold w-10 h-10 p-2 rounded bg-slate-100 hover:bg-brand active:bg-brand shadow-md hover:shadow-xl"
+        >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-6 h-6"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+        <button
+            phx-click="up"
+            class="flex items-center justify-center text-xl font-bold w-10 h-10 p-2 rounded bg-slate-100 hover:bg-brand active:bg-brand shadow-md hover:shadow-xl"
+        >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-6 h-6"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
+            </svg>
+        </button>
+    </div>
+</div>

example_project/assets/svelte/LightStatusBar.svelte

@@ -0,0 +1,52 @@
+<script>
+    import {tweened} from "svelte/motion"
+    import {cubicOut} from "svelte/easing"
+    export let brightness = 0
+
+    const progress = tweened(0, {
+        duration: 400,
+        easing: cubicOut,
+    })
+
+    const updateProgress = b => progress.set(b / 100)
+
+    $: updateProgress(brightness)
+</script>
+
+<progress class="border-none w-full rounded-lg h-12" value={$progress} />
+<div class="h-12 rounded-md w-full font-mono font-semibold">
+    <div class="text-center w-full flex items-center justify-center h-full">
+        {brightness > 0 ? `${brightness}%` : "OFF"}
+    </div>
+</div>
+
+<style>
+    :root {
+        --progColor: linear-gradient(to right, hsl(6, 100%, 80%), hsl(356, 100%, 65%));
+        --progHeight: 20px;
+    }
+
+    progress,
+    progress::-webkit-progress-value {
+        width: 100%;
+        border: 0;
+        height: var(--progHeight);
+        border-radius: 20px;
+        background: var(--progColor);
+    }
+    progress::-webkit-progress-bar {
+        width: 100%;
+        border: 0;
+        height: var(--progHeight);
+        border-radius: 20px;
+        background: white;
+    }
+
+    progress::-moz-progress-bar {
+        width: 100%;
+        border: 0;
+        height: var(--progHeight);
+        border-radius: 20px;
+        background: var(--progColor);
+    }
+</style>

example_project/lib/example/application.ex

@@ -8,7 +8,8 @@ defmodule Example.Application do
   @impl true
   def start(_type, _args) do
     children = [
-      {NodeJS.Supervisor, [path: Application.app_dir(:example, "/priv/static/assets"), pool_size: 4]},
+      {NodeJS.Supervisor,
+       [path: Application.app_dir(:example, "/priv/static/assets"), pool_size: 4]},
       # Start the Telemetry supervisor
       ExampleWeb.Telemetry,
       # Start the Ecto repository

example_project/lib/example_web/components/layouts/app.html.heex

@@ -27,41 +27,47 @@
         2
       </a>
       <a
-        href={~p"/plus-minus-svelte"}
+        href={~p"/lights"}
         class="font-semibold leading-6 text-zinc-900 hover:text-zinc-700 hover:underline p-2"
       >
         3
       </a>
       <a
-        href={~p"/plus-minus-liveview"}
+        href={~p"/plus-minus-svelte"}
         class="font-semibold leading-6 text-zinc-900 hover:text-zinc-700 hover:underline p-2"
       >
         4
       </a>
       <a
-        href={~p"/plus-minus-hybrid"}
+        href={~p"/plus-minus-liveview"}
         class="font-semibold leading-6 text-zinc-900 hover:text-zinc-700 hover:underline p-2"
       >
         5
       </a>
       <a
-        href={~p"/log-list"}
+        href={~p"/plus-minus-hybrid"}
         class="font-semibold leading-6 text-zinc-900 hover:text-zinc-700 hover:underline p-2"
       >
         6
       </a>
       <a
-        href={~p"/breaking-news"}
+        href={~p"/log-list"}
         class="font-semibold leading-6 text-zinc-900 hover:text-zinc-700 hover:underline p-2"
       >
         7
       </a>
       <a
-        href={~p"/chat"}
+        href={~p"/breaking-news"}
         class="font-semibold leading-6 text-zinc-900 hover:text-zinc-700 hover:underline p-2"
       >
         8
       </a>
+      <a
+        href={~p"/chat"}
+        class="font-semibold leading-6 text-zinc-900 hover:text-zinc-700 hover:underline p-2"
+      >
+        9
+      </a>
     </div>
     <div class="flex items-center gap-4">
       <a

example_project/lib/example_web/live/live_light.ex

@@ -0,0 +1,62 @@
+defmodule ExampleWeb.LiveLights do
+  use ExampleWeb, :live_view
+  require Logger
+
+  def mount(_params, _session, socket) do
+    Logger.info(socket)
+    {:ok, assign(socket, %{brightness: 10, previous: nil})}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div class="max-w-screen-xl mx-auto p-4 flex flex-col gap-4">
+      <h1 class="text-center text-2xl font-light my-4">Light Bulb Controller</h1>
+      <LiveSvelte.render name="LightStatusBar" props={%{brightness: @brightness}} />
+      <LiveSvelte.render name="LightControllers" props={%{isOn: isOn?(@brightness)}} />
+    </div>
+    """
+  end
+
+  def handle_event("up", _, socket) do
+    brightness = socket.assigns.brightness
+    Logger.info(brightness)
+
+    case brightness do
+      100 ->
+        {:noreply, socket}
+
+      _ ->
+        new_brightness = brightness + 10
+        {:noreply, assign(socket, %{brightness: new_brightness, previous: brightness})}
+    end
+  end
+
+  def handle_event("down", _, socket) do
+    brightness = socket.assigns.brightness
+    Logger.info(brightness)
+
+    case brightness do
+      0 ->
+        {:noreply, socket}
+
+      _ ->
+        new_brightness = brightness - 10
+        {:noreply, assign(socket, %{brightness: new_brightness, previous: brightness})}
+    end
+  end
+
+  def handle_event("on", _, socket) do
+    previous = socket.assigns.previous
+    brightness = socket.assigns.brightness
+    {:noreply, assign(socket, %{brightness: previous, previous: brightness})}
+  end
+
+  def handle_event("off", _, socket) do
+    previous = socket.assigns.brightness
+    {:noreply, assign(socket, %{brightness: 0, previous: previous})}
+  end
+
+  defp isOn?(brightness) do
+    brightness > 0
+  end
+end

example_project/lib/example_web/router.ex

@@ -26,6 +26,7 @@ defmodule ExampleWeb.Router do
     live "/log-list", LiveExample4
     live "/breaking-news", LiveExample5
     live "/chat", LiveExample6
+    live "/lights", LiveLights
   end
 
   # Other scopes may use custom stacks.