WIP of dynamic checkbox builder for BlueTooth class

src/routes/index.pug

@@ -1,3 +1,22 @@
 extends ../templates/layout
 
 block content
+
+  h1
+    label(for="bluetoothClass", i18n="bluetoothClass")
+  input(type="text", disabled, id="bluetoothClass")
+  button(type="button", i18n="copy")
+  p Human readable class
+
+  hr
+
+  h2(i18n="majorService")
+  include ../templates/major-service
+
+  h3(i18n="majorDevice")
+  include ../templates/major-device
+
+  h4(i18n="minorDevice")
+  include ../templates/minor-device/minor-device
+
+  hr

src/scripts/bluetooth.js

@@ -0,0 +1,55 @@
+let bluetoothClass = 0;
+
+/**
+ * TODO: Document
+ */
+function updateBluetoothClassField() {
+  let hex = bluetoothClass.toString(16);
+  hex = hex.toLocaleUpperCase();
+  hex = hex.padStart(6, "0");
+  hex = "0x" + hex;
+  document.getElementById("bluetoothClass").value = hex;
+}
+
+/**
+ * TODO: Document
+ */
+function updateBluetoothMinorDeviceFields() {
+
+  // Determine the ID of the selected major device
+  const majorDevice = bluetoothClass &= 0x1F00;
+  const majorDeviceRadio = document.querySelector(`input[type='radio'][name='majorDevice'][value='${majorDevice}']`);
+  const majorDeviceId = majorDeviceRadio.id.replace("majorDevice", "");
+
+  // Hide all minor device fields that don't match our major device id
+  document.querySelectorAll("[class^='minor-devices'] > *").forEach((element) => {
+    element.classList.add("hidden");
+    if (element.classList.contains(majorDeviceId)) {
+      element.classList.remove("hidden");
+    }
+  });
+}
+
+// Watch the page checkboxes and radio buttons for updating the Bluetooth class
+document.querySelectorAll("input[type='checkbox'], input[type='radio']").forEach((element) => {
+  element.addEventListener("change", () => {
+
+    if (element.id.startsWith("majorService")) {
+      // Major services can be combined, so XOR is all we need
+      bluetoothClass ^= element.value;
+    } else if (element.id.startsWith("majorDevice")) {
+      // Major devices cannot conflict, so zero out any current major and minor devices
+      bluetoothClass = (bluetoothClass & ~0x1FFC) | element.value;
+      updateBluetoothMinorDeviceFields();
+    } else if (element.id.startsWith("minorDevice")) {
+      // Minor devices cannot conflict, so zero out any current minor devices
+      bluetoothClass = (bluetoothClass & ~0xFC) | element.value;
+    }
+
+    updateBluetoothClassField();
+  });
+});
+
+// Default the bluetooth class field and minor device fields on page load
+updateBluetoothClassField();
+updateBluetoothMinorDeviceFields();

src/scripts/i18n.js

@@ -2,7 +2,40 @@ const languageWhitelist = ["en", "es"];
 
 const languageTranslations = {
   en: {
+    bluetoothClass: "BlueTooth class",
     builtBy: "Built by",
+    copy: "Copy",
+
+    majorService: "Major service",
+    majorServiceInformation: "Information",
+    majorServiceTelephony: "Telephony",
+    majorServiceAudio: "Audio",
+    majorServiceObjectTransfer: "Object transfer",
+    majorServiceCapturing: "Capturing",
+    majorServiceRendering: "Rendering",
+    majorServiceNetworking: "Networking",
+    majorServicePositioning: "Positioning",
+    majorServiceLimitedDiscovery: "Limited discovery",
+
+    majorDevice: "Major device",
+    majorDeviceUncategorized: "Uncategorized",
+    majorDeviceMiscellaneous: "Miscellaneous",
+    majorDeviceToy: "Toy",
+    majorDeviceWearable: "Wearable",
+    majorDeviceImaging: "Imaging",
+    majorDevicePeripheral: "Peripheral",
+    majorDeviceAudioVideo: "Audio / Video",
+    majorDeviceNetworkAccessPoint: "Network access point",
+    majorDevicePhone: "Phone",
+    majorDeviceComputer: "Computer",
+
+    minorDevice: "Minor device",
+    minorDeviceToyGame: "Game",
+    minorDeviceToyController: "Controller",
+    minorDeviceToyDoll: "Doll",
+    minorDeviceToyVehicle: "Vehicle",
+    minorDeviceToyRobot: "Robot",
+
   },
   es: {
     builtBy: "Construido por",

src/scripts/index.js

@@ -1,2 +1,3 @@
 // Project scripts
+//=require bluetooth.js
 //=require i18n.js

src/styles/index.scss

@@ -1 +1,3 @@
-// Empty
+.hidden {
+  display: none;
+}

src/templates/layout.pug

@@ -8,7 +8,7 @@ html(lang="en")
     meta(name="viewport", content="width=device-width, initial-scale=1, shrink-to-fit=no")
     meta(name="description", content="Builder for hcitool class codes")
 
-    title Bluetooth Class
+    title BlueTooth Class
 
     link(rel="stylesheet", href="/index.css")
 
@@ -28,7 +28,7 @@ html(lang="en")
         button#esI18nButton(
           onclick="languageChange('es')"
         ) Español
-      h2
+      h5
         span(i18n="builtBy")
         a(href="https://mobiusk.com")  MobiusK
 

src/templates/major-device.pug

@@ -0,0 +1,39 @@
+label(for="majorDeviceUncategorized")
+  span(i18n="majorDeviceUncategorized")
+  input(type="radio", name="majorDevice", id="majorDeviceUncategorized", value=0x1F00)
+
+label(for="majorDeviceToy")
+  span(i18n="majorDeviceToy")
+  input(type="radio", name="majorDevice", id="majorDeviceToy", value=0x0800)
+
+label(for="majorDeviceWearable")
+  span(i18n="majorDeviceWearable")
+  input(type="radio", name="majorDevice", id="majorDeviceWearable", value=0x0700)
+
+label(for="majorDeviceImaging")
+  span(i18n="majorDeviceImaging")
+  input(type="radio", name="majorDevice", id="majorDeviceImaging", value=0x0600)
+
+label(for="majorDevicePeripheral")
+  span(i18n="majorDevicePeripheral")
+  input(type="radio", name="majorDevice", id="majorDevicePeripheral", value=0x0500)
+
+label(for="majorDeviceAudioVideo")
+  span(i18n="majorDeviceAudioVideo")
+  input(type="radio", name="majorDevice", id="majorDeviceAudioVideo", value=0x0400)
+
+label(for="majorDeviceNetworkAccessPoint")
+  span(i18n="majorDeviceNetworkAccessPoint")
+  input(type="radio", name="majorDevice", id="majorDeviceNetworkAccessPoint", value=0x0300)
+
+label(for="majorDevicePhone")
+  span(i18n="majorDevicePhone")
+  input(type="radio", name="majorDevice", id="majorDevicePhone", value=0x0200)
+
+label(for="majorDeviceComputer")
+  span(i18n="majorDeviceComputer")
+  input(type="radio", name="majorDevice", id="majorDeviceComputer", value=0x0100)
+
+label(for="majorDeviceMiscellaneous")
+  span(i18n="majorDeviceMiscellaneous")
+  input(type="radio", name="majorDevice", id="majorDeviceMiscellaneous", value=0x0000)

src/templates/major-service.pug

@@ -0,0 +1,35 @@
+label(for="majorServiceInformation")
+  span(i18n="majorServiceInformation")
+  input(type="checkbox", id="majorServiceInformation", value=0x800000)
+
+label(for="majorServiceTelephony")
+  span(i18n="majorServiceTelephony")
+  input(type="checkbox", id="majorServiceTelephony", value=0x400000)
+
+label(for="majorServiceAudio")
+  span(i18n="majorServiceAudio")
+  input(type="checkbox", id="majorServiceAudio", value=0x200000)
+
+label(for="majorServiceObjectTransfer")
+  span(i18n="majorServiceObjectTransfer")
+  input(type="checkbox", id="majorServiceObjectTransfer", value=0x100000)
+
+label(for="majorServiceCapturing")
+  span(i18n="majorServiceCapturing")
+  input(type="checkbox", id="majorServiceCapturing", value=0x080000)
+
+label(for="majorServiceRendering")
+  span(i18n="majorServiceRendering")
+  input(type="checkbox", id="majorServiceRendering", value=0x040000)
+
+label(for="majorServiceNetworking")
+  span(i18n="majorServiceNetworking")
+  input(type="checkbox", id="majorServiceNetworking", value=0x020000)
+
+label(for="majorServicePositioning")
+  span(i18n="majorServicePositioning")
+  input(type="checkbox", id="majorServicePositioning", value=0x010000)
+
+label(for="majorServiceLimitedDiscovery")
+  span(i18n="majorServiceLimitedDiscovery")
+  input(type="checkbox", id="majorServiceLimitedDiscovery", value=0x002000)

src/templates/minor-device/minor-device-toy.pug

@@ -0,0 +1,20 @@
+.Toy
+  label(for="minorDeviceToyGame")
+    span(i18n="minorDeviceToyGame")
+    input(type="radio", name="minorDeviceToy", id="minorDeviceToyGame", value=0x14)
+
+  label(for="minorDeviceToyController")
+    span(i18n="minorDeviceToyController")
+    input(type="radio", name="minorDeviceToy", id="minorDeviceToyController", value=0x10)
+
+  label(for="minorDeviceToyDoll")
+    span(i18n="minorDeviceToyDoll")
+    input(type="radio", name="minorDeviceToy", id="minorDeviceToyDoll", value=0x0C)
+
+  label(for="minorDeviceToyVehicle")
+    span(i18n="minorDeviceToyVehicle")
+    input(type="radio", name="minorDeviceToy", id="minorDeviceToyVehicle", value=0x08)
+
+  label(for="minorDeviceToyRobot")
+    span(i18n="minorDeviceToyRobot")
+    input(type="radio", name="minorDeviceToy", id="minorDeviceToyRobot", value=0x04)

src/templates/minor-device/minor-device.pug

@@ -0,0 +1,29 @@
+.minor-devices
+  include minor-device-toy
+
+  .Wearable
+    p wearable
+
+  .Imaging
+    p imaging
+
+  .Peripheral
+    p peripheral
+
+  .AudioVideo
+    p audioVideo
+
+  .NetworkAccessPoint
+    p networkAccessPoint
+
+  .Phone
+    p phone
+
+  .Computer
+    p computer
+
+  .Miscellaneous
+    p none
+
+  .Uncategorized
+    p none