Some UI enhancements

Author: 3aa49ec6bfc910647fa1c5a013e48eef

src/website/src/app.css

@@ -24,4 +24,8 @@ select {
 
 button {
     @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-4 rounded;
+}
+
+body {
+    @apply p-2
 }

src/website/src/routes/+layout.svelte

@@ -1,5 +1,17 @@
 <script>
 	import '../app.css';
+    const iconPath = '/favicon-16x16.png';
+    const iconPathLg = '/favicon-32x32.png';
 </script>
 
+<svelte:head>
+  <link rel="icon" type="image/svg" href={iconPath} />
+</svelte:head>
+
+<div class="inline-flex p-1" >
+    <img src={iconPathLg} alt="icon" class="rounded"/>
+    <h1 class="pl-2">node-teslausb</h1>
+</div>
+
+
 <slot />

src/website/src/routes/+page.svelte

@@ -71,44 +71,44 @@
 </script>
 
 <div class="p-5">
-
-<h1>node-teslausb</h1>
-
-<h2>Log Files</h2>
-{#if finishedApiCalls == true}
-	{#if logFiles.length == 0}
-		<p>No log files found.</p>
+	<h2>Log Files</h2>
+	{#if finishedApiCalls == true}
+		{#if logFiles.length == 0}
+			<p>No log files found.</p>
+		{:else}
+			<ul class="list-disc">
+				{#each logFiles as logFile}
+					<li><a href={`/viewLog/${logFile}`}>{logFile}</a></li>
+				{/each}
+			</ul>
+		{/if}
 	{:else}
-		<ul class="list-disc">
-			{#each logFiles as logFile}
-				<li><a href={`/viewLog/${logFile}`}>{logFile}</a></li>
-			{/each}
-		</ul>
+		<p>Loading...</p>
 	{/if}
-{:else}
-	<p>Loading...</p>
-{/if}
-
-{#if finishedApiCalls}
-  <h2>Lock Chimes</h2>
-  {#if lockChimes.length == 0}
-    <p>No lock chimes found.</p>
-  {:else}
-    <select bind:value={selectedUrl}>
-      {#each lockChimes as lockChime}
-        <option value={lockChime.url}>{lockChime.title}</option>
-      {/each}
-    </select>
-    <button on:click={installLockChime}>Install</button>
-  {/if}
-  <div class="text-sm pt-1">
-	  Visit <a href="https://teslapro.hu/lockchimes/">https://teslapro.hu/lockchimes/</a> to listen to lock sounds before installing.
-	  <p class="pt-2">
-	<i>Note: currently, installation will happen within 2 minutes if no data is being synced.  Otherwise it will run once the sync finishes.</i>
-	</p>		
-  </div>
-{/if}
 
+	{#if finishedApiCalls}
+		<h2>Lock Chimes</h2>
+		{#if lockChimes.length == 0}
+			<p>No lock chimes found.</p>
+		{:else}
+			<select bind:value={selectedUrl}>
+				{#each lockChimes as lockChime}
+					<option value={lockChime.url}>{lockChime.title}</option>
+				{/each}
+			</select>
+			<button on:click={installLockChime}>Install</button>
+		{/if}
+		<div class="text-sm pt-1">
+			Visit <a href="https://teslapro.hu/lockchimes/">https://teslapro.hu/lockchimes/</a> to listen
+			to lock sounds before installing.
+			<p class="pt-2">
+				<i
+					>Note: currently, installation will happen within 2 minutes if no data is being synced.
+					Otherwise it will run once the sync finishes.</i
+				>
+			</p>
+		</div>
+	{/if}
 </div>
 <!-- <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
 

src/website/src/routes/api/lockChimes/+server.ts

@@ -67,6 +67,7 @@ async function readableStreamToBuffer(readable: ReadableStream<Uint8Array>): Pro
     const reader = readable.getReader();
     const chunks: Uint8Array[] = [];
 
+    //eslint-disable-next-line no-constant-condition
     while (true) {
         const { done, value } = await reader.read();
         if (done) break;
@@ -78,8 +79,9 @@ async function readableStreamToBuffer(readable: ReadableStream<Uint8Array>): Pro
 
 export async function GET({ request }) {
     const lockChimes = await getLockChimes();
+    const sortedLockChimes = lockChimes.sort((a, b) => a.title.localeCompare(b.title));
     // const logNames = Object.keys(logNameToPathMapping);
-    return json(lockChimes);
+    return json(sortedLockChimes);
 }
 
 export const POST: RequestHandler = async (event: RequestEvent) => {

src/website/static/android-chrome-192x192.png

@@ -20,22 +20,6 @@ const setPermissions = (accessLevel = 755, path = '/etc/rc.local') => {
     });
 };
 
-const executeBashCommand = (command) => {
-    exec(command, (error, stdout, stderr) => {
-        if (error) {
-            console.error(`Error: ${error.message}`);
-            return;
-        }
-
-        if (stderr) {
-            console.error(`stderr: ${stderr}`);
-            return;
-        }
-
-        console.log(`stdout: ${stdout}`);
-    });
-}
-
 const addDtOverlayToBootConfig = () => {
     const bootConfigPath = '/boot/config.txt';
 

src/website/static/android-chrome-512x512.png

@@ -6,7 +6,7 @@ import { exec } from 'child_process';
 export const executeBashCommand = async (command, outputToConsole = true) => {
     try {
         const { stdout, stderr } = await util.promisify(exec)(command);
-        if (outputToConsole) {
+        if (stdout && outputToConsole) {
             logWithTimestamp(`stdout: ${stdout}`);
         }