Cleanup and styling

Signed-off-by: Daniel Kastl <[email protected]>
Georepublic · Oct 3, 2024 · 3614273 · 3614273
1 parent 2ba9e44
commit 3614273
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 82 deletions.
diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
 
     label {
       font-weight: bold;
-      width: 300px;
+      width: 240px;
     }
 
     input, select, button {
@@ -29,33 +29,40 @@
       font-size: 14px;
     }
 
-    fieldset {
-      margin-bottom: 20px;
-      padding: 10px;
-      border: 1px solid #ccc;
-    }
-
-    legend {
-      font-weight: bold;
-    }
-
     button {
       width: auto;
     }
+
+    button#generateConfig {
+      background-color: #4CAF50;
+      color: white;
+      border: #4CAF50 1px solid;
+      font-size: large;
+    }
   </style>
 </head>
 <body>
   <h1>Meshtastic QR Code Generator</h1>
 
   <form id="meshtasticForm">
-    <button type="button" id="generateConfig">Generate Configuration (QR Code)</button>
+    <!-- Generate Config and QR code -->
+    <fieldset>
+      <legend>Generate Configuration</legend>
+
+      <div class="form-group">
+        <button type="button" id="generateConfig">Generate Configuration (QR Code)</button>
+      </div>
 
-    <div>
-      <input type="text" id="generatedUrl" readonly>
-      <button type="button" id="copyUrlButton">Copy URL</button>
-    </div>
+      <div class="form-group">
+        <label for="generatedUrl">Generated URL:</label>
+        <input type="text" id="generatedUrl" name="generatedUrl" readonly>
+        <button type="button" id="copyUrlButton">Copy URL</button>
+      </div>
 
-    <canvas id="qrcode"></canvas>
+      <div class="form-group">
+        <canvas id="qrcode"></canvas>
+      </div>
+    </fieldset>
 
     <fieldset>
       <legend>Channel Settings</legend>
@@ -152,17 +159,6 @@ <h1>Meshtastic QR Code Generator</h1>
         <input type="number" id="hopLimit" name="hopLimit" min="1" max="7" value="3">
       </div>
 
-      <div class="form-group">
-        <label for="index">Index (-1 for set by name):</label>
-        <input type="number" id="index" name="index" min="-1" value="0" required>
-      </div>
-
-      <div class="form-group">
-        <label for="channelId">Channel ID:</label>
-        <input type="text" id="channelId" name="channelId" readonly>
-        <button type="button" id="generateChannelId">Generate Channel ID</button>
-      </div>
-
       <div class="form-group">
         <label for="ignoreMqtt">Ignore MQTT:</label>
         <input type="checkbox" id="ignoreMqtt" name="ignoreMqtt">
@@ -173,19 +169,6 @@ <h1>Meshtastic QR Code Generator</h1>
         <input type="checkbox" id="configOkToMqtt" name="configOkToMqtt">
       </div>
     </fieldset>
-
-    <fieldset>
-      <legend>Other Settings</legend>
-
-      <div class="form-group">
-        <label for="role">Role:</label>
-        <select id="role" name="role" required>
-          <option value="1">Primary</option>
-          <option value="2">Secondary</option>
-          <option value="0">Disabled</option>
-        </select>
-      </div>
-    </fieldset>
   </form>
 
   <script type="module" src="/src/main.ts"></script>

diff --git a/src/formHandler.ts b/src/formHandler.ts
@@ -19,8 +19,6 @@ export function getFormValues() {
 
   // FormData returns strings, so we need to parse the necessary fields
   const region = Number(formData.get('region'));
-  const role = Number(formData.get('role'));
-  const index = Number(formData.get('index'));
   const modemPreset = Number(formData.get('modemPreset'));
   const hopLimit = Number(formData.get('hopLimit'));
 
@@ -32,19 +30,13 @@ export function getFormValues() {
   const configOkToMqtt = formData.get('configOkToMqtt') === 'on';
   const ignoreMqtt = formData.get('ignoreMqtt') === 'on';
 
-  // Handle default value for channelId
-  const channelId = formData.get('channelId') as string || generateChannelId();
-
   return {
     channelName,
     pskType,
     psk,
     region,
-    role,
-    index,
     modemPreset,
     hopLimit,
-    channelId,
     uplinkEnabled,
     downlinkEnabled,
     positionPrecision,

diff --git a/src/main.ts b/src/main.ts
@@ -2,7 +2,7 @@ import { getFormValues } from './formHandler';
 import { generatePSK } from './pskGenerator';
 import { buildProtobuf } from './protobufBuilder';
 import { generateQRCode } from './qrCodeGenerator';
-import { getByteLength, generateChannelId, toUrlSafeBase64 } from './utils';
+import { getByteLength, toUrlSafeBase64 } from './utils';
 
 /**
  * Handle the DOMContentLoaded event.
@@ -11,7 +11,6 @@ import { getByteLength, generateChannelId, toUrlSafeBase64 } from './utils';
 document.addEventListener('DOMContentLoaded', () => {
   document.getElementById('generateConfig')?.addEventListener('click', generateConfig);
   document.getElementById('generatePSK')?.addEventListener('click', handleGeneratePSK);
-  document.getElementById('generateChannelId')?.addEventListener('click', handleGenerateChannelId);
   document.getElementById('pskType')?.addEventListener('change', handlePSKTypeChange);
   document.getElementById('copyUrlButton')?.addEventListener('click', copyUrlToClipboard);
 });
@@ -43,15 +42,6 @@ function handleGeneratePSK(): void {
   (document.getElementById('psk') as HTMLInputElement).value = psk;
 }
 
-/**
- * Handle the click event on the "Generate Channel ID" button.
- * Generate a random Channel ID and set the value in the input field.
- */
-function handleGenerateChannelId(): void {
-  const channelId = generateChannelId();
-  (document.getElementById('channelId') as HTMLInputElement).value = channelId;
-}
-
 /**
  * Generate a QR code based on the form values.
  */

diff --git a/src/protobufBuilder.ts b/src/protobufBuilder.ts
@@ -8,9 +8,6 @@ import { Protobuf } from "@meshtastic/js";
  * @param region - The region for the channel.
  * @param modemPreset - The modem preset for the channel.
  * @param hopLimit - The hop limit for the channel.
- * @param role - The role for the channel.
- * @param index - The index for the channel.
- * @param channelId - The channel ID for the channel.
  * @param uplinkEnabled - Whether uplink is enabled.
  * @param downlinkEnabled - Whether downlink is enabled.
  * @param positionPrecision - The position precision for the channel.
@@ -26,9 +23,6 @@ export function buildProtobuf({
   region,
   modemPreset,
   hopLimit,
-  role,
-  index,
-  channelId,
   uplinkEnabled,
   downlinkEnabled,
   positionPrecision,
@@ -42,9 +36,6 @@ export function buildProtobuf({
   region: number;
   modemPreset: number;
   hopLimit: number;
-  role: number;
-  index: number;
-  channelId: string;
   uplinkEnabled: boolean;
   downlinkEnabled: boolean;
   positionPrecision: number;
@@ -76,11 +67,6 @@ export function buildProtobuf({
     moduleSettings: moduleSettings
   });
 
-  const channel = new Protobuf.Channel.Channel({
-    index,
-    role,
-  });
-
   const channelSet = new Protobuf.AppOnly.ChannelSet({
     settings: [channelSettings],
     loraConfig,

diff --git a/src/utils.ts b/src/utils.ts
@@ -10,14 +10,6 @@ export function getByteLength(str: string): number {
   return new TextEncoder().encode(str).length;
 }
 
-/**
- * Generate a random Channel ID.
- * @returns
- */
-export function generateChannelId(): string {
-  return Math.floor(Math.random() * 0xFFFFFFFF).toString(16).toUpperCase();
-}
-
 /**
  * Convert binary data to a URL-safe Base64 string.
  * @param binaryData - The binary data to encode.