From 08fafd4ecedc98e023862276c8f5fa3b2b97e431 Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 17:38:20 -0600 Subject: [PATCH 01/26] refactor: fix ids of each step section --- src/routes/setup/(guides)/comma-3x/+page.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/setup/(guides)/comma-3x/+page.svelte b/src/routes/setup/(guides)/comma-3x/+page.svelte index 7ee4b81..81c601e 100644 --- a/src/routes/setup/(guides)/comma-3x/+page.svelte +++ b/src/routes/setup/(guides)/comma-3x/+page.svelte @@ -66,7 +66,7 @@
-
+
Step 3 of 5

Place mount high and centered on the windshield

@@ -97,7 +97,7 @@
-
+
Step 4 of 5

Plug in OBD-C and mount the device

@@ -114,7 +114,7 @@
-
+
Step 5 of 5

Reinstall the rearview mirror cover trim

From c1c50483635810e57e1df8402765f3924e2420ba Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 19:27:56 -0600 Subject: [PATCH 02/26] refactor: Update HarnessSelector to support being in a card and clear query params when selection cleared --- .../HarnessSelector/HarnessSelector.svelte | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte index 0fbee9e..3dcd76d 100644 --- a/src/lib/components/HarnessSelector/HarnessSelector.svelte +++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte @@ -28,10 +28,12 @@ } function updateQueryParams(selectedHarness) { - const [make, ...model] = selectedHarness.car.split(' '); const searchParams = new URLSearchParams(); - searchParams.set("make", encodeURIComponent(make)); - if (model.length > 0) searchParams.set("model", encodeURIComponent(model.join(' '))); + if (selectedHarness) { + const [make, ...model] = selectedHarness.car.split(' ') || []; + if (make) searchParams.set("make", encodeURIComponent(make)); + if (model.length > 0) searchParams.set("model", encodeURIComponent(model.join(' '))); + } goto(`?${searchParams.toString()}`, { keepfocus: true, replaceState: true, noScroll: true }); } @@ -60,10 +62,10 @@ inputValue = ""; handleInput(); inputRef?.focus(); - - // clear harness selection - selection = null; - onChange(null); + // clear harness selection + selection = null; + onChange(null); + updateQueryParams(null); } /* Dropdown Options */ @@ -157,7 +159,7 @@ } .dropdown-content { - display: none; + display: none !important; /* hidden by default (!important is needed to hide when inside a card, since the card overrides display) */ position: absolute; border: 1px solid #ddd; z-index: 1; @@ -166,8 +168,8 @@ overflow-y: auto; } -.show { - display:block; +.dropdown-content.show { + display:block !important; } .search-input { From eaf972235442baf5443297cc6bd5afc650f6b561 Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 19:34:09 -0600 Subject: [PATCH 03/26] feat: increase the limit of harness variants fetched to 250 (max) --- src/lib/utils/shopify.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/utils/shopify.js b/src/lib/utils/shopify.js index 785ab2d..8a40792 100644 --- a/src/lib/utils/shopify.js +++ b/src/lib/utils/shopify.js @@ -125,7 +125,7 @@ export async function getProduct(id) { currencyCode } } - variants(first: 100) { + variants(first: 250) { nodes { id title From 9bbee273e544b32aaa8426c8dc38c434541a4881 Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 19:43:18 -0600 Subject: [PATCH 04/26] refactor: rename harness 'car' property to 'name' for consistency and clarification since some harnesses are developer only --- .../components/HarnessSelector/HarnessDropdownItem.svelte | 2 +- src/lib/components/HarnessSelector/HarnessSelector.svelte | 8 ++++---- src/lib/utils/harnesses.js | 5 +++-- src/routes/shop/products/comma-3x.svelte | 4 ++-- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/lib/components/HarnessSelector/HarnessDropdownItem.svelte b/src/lib/components/HarnessSelector/HarnessDropdownItem.svelte index f47b122..2561c26 100644 --- a/src/lib/components/HarnessSelector/HarnessDropdownItem.svelte +++ b/src/lib/components/HarnessSelector/HarnessDropdownItem.svelte @@ -7,7 +7,7 @@
- {value?.car} + {value?.name}
{#if value?.title}
diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte index 3dcd76d..bdb6786 100644 --- a/src/lib/components/HarnessSelector/HarnessSelector.svelte +++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte @@ -30,7 +30,7 @@ function updateQueryParams(selectedHarness) { const searchParams = new URLSearchParams(); if (selectedHarness) { - const [make, ...model] = selectedHarness.car.split(' ') || []; + const [make, ...model] = selectedHarness.name.split(' ') || []; if (make) searchParams.set("make", encodeURIComponent(make)); if (model.length > 0) searchParams.set("model", encodeURIComponent(model.join(' '))); } @@ -45,7 +45,7 @@ const model = $page.url.searchParams.get('model'); if (model) harnessName += ` ${decodeURIComponent(model)}`; - selection = $harnesses.find(harness => harness.car === harnessName) ?? null; + selection = $harnesses.find(harness => harness.name === harnessName) ?? null; } } @@ -54,7 +54,7 @@ let inputRef; const handleInput = () => { - return filteredItems = $harnesses.filter(item => item.car.toLowerCase().match(inputValue.toLowerCase())); + return filteredItems = $harnesses.filter(item => item.name.toLowerCase().match(inputValue.toLowerCase())); } const handleClear = () => { @@ -144,7 +144,7 @@ {@html selection.package === 'All' ? 'openpilot will work with all packages and trims of this car.' : - `openpilot requires ${selection.car} to come equipped with ${selection.package}.` + `openpilot requires ${selection.name} to come equipped with ${selection.package}.` } {/if} diff --git a/src/lib/utils/harnesses.js b/src/lib/utils/harnesses.js index d80d243..b4a7236 100644 --- a/src/lib/utils/harnesses.js +++ b/src/lib/utils/harnesses.js @@ -34,7 +34,8 @@ async function initializeHarnesses() { return { ...harnessInfo[harness.id], ...harness, - car: model.name, + make, + name: model.name, package: model.package, angledMount: model.angled_mount, backordered: harness?.backordered, // these overrides are only shown if the harness is out of stock in Shopify @@ -46,7 +47,7 @@ async function initializeHarnesses() { harnessList.push(...CarHarnesses.map(harness => { return { ...harnessInfo[harness.id], - car: harness.title, + name: harness.title, id: harness.id, backordered: harness.backordered, }; diff --git a/src/routes/shop/products/comma-3x.svelte b/src/routes/shop/products/comma-3x.svelte index 0cbee8d..5a9c999 100644 --- a/src/routes/shop/products/comma-3x.svelte +++ b/src/routes/shop/products/comma-3x.svelte @@ -42,9 +42,9 @@ } let getCartNote = () => { - if (selectedHarness?.car) { + if (selectedHarness?.name) { // TODO: support car harness and harness connector page (latter won't have a car attribute) - const vehicle_note = `Vehicle: ${selectedHarness.car}`; + const vehicle_note = `Vehicle: ${selectedHarness.name}`; const backordered_note = backordered ? `${backordered} backordered` : 'in stock'; const mount_note = selectedHarness.angledMount ? '8 degree mount' : 'standard mount'; From d16baf0cfb78ba801cea383b295efa7fb1f714e6 Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 19:50:47 -0600 Subject: [PATCH 05/26] fix: rename one more --- src/lib/components/HarnessSelector/HarnessSelector.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte index bdb6786..483e946 100644 --- a/src/lib/components/HarnessSelector/HarnessSelector.svelte +++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte @@ -130,7 +130,7 @@ handleOptionClick(item)} on:keydown={(e) => handleOptionKeyDown(e, item)} /> {/each} {:else} - + {/if} {:else} {#each $harnesses as item} From 8b330903d9e8455166c1712b1d1f7250a0c2fd11 Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 20:02:06 -0600 Subject: [PATCH 06/26] feat: add ability to hide the package support card in the HarnessSelector --- src/lib/components/HarnessSelector/HarnessSelector.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte index 483e946..ac3f808 100644 --- a/src/lib/components/HarnessSelector/HarnessSelector.svelte +++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte @@ -18,6 +18,7 @@ export let label = "Select vehicle"; export let accessoryLabel = null; + export let hidePackageSupportCard = false; let selection; @@ -140,7 +141,7 @@
-{#if selection && selection.package} +{#if !hidePackageSupportCard && selection && selection.package} {@html selection.package === 'All' ? 'openpilot will work with all packages and trims of this car.' : From d3f57e2087141d576b4cbddad8a87bf61279d499 Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 20:15:17 -0600 Subject: [PATCH 07/26] refactor: prevent overwriting other query params when updating make and model --- src/lib/components/HarnessSelector/HarnessSelector.svelte | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte index ac3f808..a5c21f5 100644 --- a/src/lib/components/HarnessSelector/HarnessSelector.svelte +++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte @@ -29,11 +29,14 @@ } function updateQueryParams(selectedHarness) { - const searchParams = new URLSearchParams(); + const searchParams = new URLSearchParams(window.location.search); if (selectedHarness) { const [make, ...model] = selectedHarness.name.split(' ') || []; if (make) searchParams.set("make", encodeURIComponent(make)); if (model.length > 0) searchParams.set("model", encodeURIComponent(model.join(' '))); + } else { + searchParams.delete("make"); + searchParams.delete("model"); } goto(`?${searchParams.toString()}`, { keepfocus: true, replaceState: true, noScroll: true }); } From dbf7ece68bc52b8f7fd0f7a6087d1c56fee1723f Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 20:21:41 -0600 Subject: [PATCH 08/26] fix: close dropdown menu when X is pressed with no selection --- src/lib/components/HarnessSelector/HarnessSelector.svelte | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte index a5c21f5..6d36542 100644 --- a/src/lib/components/HarnessSelector/HarnessSelector.svelte +++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte @@ -70,6 +70,8 @@ selection = null; onChange(null); updateQueryParams(null); + // also close the dropdown if it's open + menuOpen = false; } /* Dropdown Options */ From fc050ac4a8c44b97d6eae849c95b4bc4250572b0 Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 20:32:57 -0600 Subject: [PATCH 09/26] fix: fix adding make to harnesses --- src/lib/utils/harnesses.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/utils/harnesses.js b/src/lib/utils/harnesses.js index b4a7236..1c92c19 100644 --- a/src/lib/utils/harnesses.js +++ b/src/lib/utils/harnesses.js @@ -24,8 +24,8 @@ async function initializeHarnesses() { const harnessInfo = await fetchHarnessVariants(); - let harnessList = Object.values(Vehicles).flatMap(make => { - return make.map(model => { + let harnessList = Object.entries(Vehicles).flatMap(([make, models]) => { + return models.map(model => { if (model.name === 'comma body') return false; const harness = CarHarnesses.find(harness => harness.title === model.harness_connector); if (!harness) { From 5e27c4f312efd3e2392030a03da200e15baa094e Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 21:05:25 -0600 Subject: [PATCH 10/26] feat: add vehicle selection with setup notes on setup guide --- .../setup/(guides)/comma-3x/+page.svelte | 31 ++++++++++++++++++- src/routes/shop/products/comma-3x.svelte | 1 - 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/src/routes/setup/(guides)/comma-3x/+page.svelte b/src/routes/setup/(guides)/comma-3x/+page.svelte index 81c601e..29e7e38 100644 --- a/src/routes/setup/(guides)/comma-3x/+page.svelte +++ b/src/routes/setup/(guides)/comma-3x/+page.svelte @@ -1,8 +1,10 @@
+
+ + {#if selectedVehicleHarness} + +

{@html vehicleNote || "The selected vehicle or harness does not require additional setup instructions. Follow the setup guide below."}

+ + {/if} +
+
+
Setup Diagram:
diff --git a/src/routes/shop/products/comma-3x.svelte b/src/routes/shop/products/comma-3x.svelte index 5a9c999..5fdcf32 100644 --- a/src/routes/shop/products/comma-3x.svelte +++ b/src/routes/shop/products/comma-3x.svelte @@ -54,7 +54,6 @@ } let selectedHarness = null; - let backordered = null; const handleHarnessSelection = (value) => { selectedHarness = value; From 47bec3801459342199c4bfb1f057a346f8b2544c Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 21:15:39 -0600 Subject: [PATCH 11/26] feat: add placeholder for setup notes in vehicles template --- static/vehicles_template.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/vehicles_template.json b/static/vehicles_template.json index 3a2baf3..d20396a 100644 --- a/static/vehicles_template.json +++ b/static/vehicles_template.json @@ -17,7 +17,8 @@ {% for footnote in car.footnotes if not footnote.value.docs_only %} {{ footnote.value.text | tojson }}{{ "" if loop.last else "," }} {% endfor %} - ] + ], + "setup_notes": "" // TODO: add setup notes }{{ "" if loop.last else "," }} {% endfor %} ]{{ "" if loop.last else "," }} From 0f0ea6472b7b716be7449ad11afe1a4b7f6b6aa9 Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 22:18:54 -0600 Subject: [PATCH 12/26] revert: undo naming harness 'car' property to 'name' --- .../HarnessSelector/HarnessDropdownItem.svelte | 2 +- .../components/HarnessSelector/HarnessSelector.svelte | 10 +++++----- src/lib/utils/harnesses.js | 4 ++-- src/routes/setup/(guides)/comma-3x/+page.svelte | 4 ++-- src/routes/shop/products/comma-3x.svelte | 4 ++-- 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/lib/components/HarnessSelector/HarnessDropdownItem.svelte b/src/lib/components/HarnessSelector/HarnessDropdownItem.svelte index 2561c26..f47b122 100644 --- a/src/lib/components/HarnessSelector/HarnessDropdownItem.svelte +++ b/src/lib/components/HarnessSelector/HarnessDropdownItem.svelte @@ -7,7 +7,7 @@
- {value?.name} + {value?.car}
{#if value?.title}
diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte index 6d36542..47c917b 100644 --- a/src/lib/components/HarnessSelector/HarnessSelector.svelte +++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte @@ -31,7 +31,7 @@ function updateQueryParams(selectedHarness) { const searchParams = new URLSearchParams(window.location.search); if (selectedHarness) { - const [make, ...model] = selectedHarness.name.split(' ') || []; + const [make, ...model] = selectedHarness.car.split(' ') || []; if (make) searchParams.set("make", encodeURIComponent(make)); if (model.length > 0) searchParams.set("model", encodeURIComponent(model.join(' '))); } else { @@ -49,7 +49,7 @@ const model = $page.url.searchParams.get('model'); if (model) harnessName += ` ${decodeURIComponent(model)}`; - selection = $harnesses.find(harness => harness.name === harnessName) ?? null; + selection = $harnesses.find(harness => harness.car === harnessName) ?? null; } } @@ -58,7 +58,7 @@ let inputRef; const handleInput = () => { - return filteredItems = $harnesses.filter(item => item.name.toLowerCase().match(inputValue.toLowerCase())); + return filteredItems = $harnesses.filter(item => item.car.toLowerCase().match(inputValue.toLowerCase())); } const handleClear = () => { @@ -136,7 +136,7 @@ handleOptionClick(item)} on:keydown={(e) => handleOptionKeyDown(e, item)} /> {/each} {:else} - + {/if} {:else} {#each $harnesses as item} @@ -150,7 +150,7 @@ {@html selection.package === 'All' ? 'openpilot will work with all packages and trims of this car.' : - `openpilot requires ${selection.name} to come equipped with ${selection.package}.` + `openpilot requires ${selection.car} to come equipped with ${selection.package}.` } {/if} diff --git a/src/lib/utils/harnesses.js b/src/lib/utils/harnesses.js index 1c92c19..82fb5ec 100644 --- a/src/lib/utils/harnesses.js +++ b/src/lib/utils/harnesses.js @@ -35,7 +35,7 @@ async function initializeHarnesses() { ...harnessInfo[harness.id], ...harness, make, - name: model.name, + car: model.name, package: model.package, angledMount: model.angled_mount, backordered: harness?.backordered, // these overrides are only shown if the harness is out of stock in Shopify @@ -47,7 +47,7 @@ async function initializeHarnesses() { harnessList.push(...CarHarnesses.map(harness => { return { ...harnessInfo[harness.id], - name: harness.title, + car: harness.title, id: harness.id, backordered: harness.backordered, }; diff --git a/src/routes/setup/(guides)/comma-3x/+page.svelte b/src/routes/setup/(guides)/comma-3x/+page.svelte index 29e7e38..e5b12a6 100644 --- a/src/routes/setup/(guides)/comma-3x/+page.svelte +++ b/src/routes/setup/(guides)/comma-3x/+page.svelte @@ -32,7 +32,7 @@ function handleHarnessSelection(selection) { selectedVehicleHarness = selection; if (selection) { - vehicleNote = selection ? vehicles[selection.make]?.find(model => model.name === selection.name)?.setup_notes : null; + vehicleNote = selection ? vehicles[selection.make]?.find(model => model.name === selection.car)?.setup_notes : null; } else { vehicleNote = null; } @@ -48,7 +48,7 @@ hidePackageSupportCard={true} /> {#if selectedVehicleHarness} - +

{@html vehicleNote || "The selected vehicle or harness does not require additional setup instructions. Follow the setup guide below."}

 {/if} diff --git a/src/routes/shop/products/comma-3x.svelte b/src/routes/shop/products/comma-3x.svelte index 5fdcf32..54a4a4d 100644 --- a/src/routes/shop/products/comma-3x.svelte +++ b/src/routes/shop/products/comma-3x.svelte @@ -42,9 +42,9 @@ } let getCartNote = () => { - if (selectedHarness?.name) { + if (selectedHarness?.car) { // TODO: support car harness and harness connector page (latter won't have a car attribute) - const vehicle_note = `Vehicle: ${selectedHarness.name}`; + const vehicle_note = `Vehicle: ${selectedHarness.car}`; const backordered_note = backordered ? `${backordered} backordered` : 'in stock'; const mount_note = selectedHarness.angledMount ? '8 degree mount' : 'standard mount'; From 03cc143499d28d9a35f0bb300d67f241f43b1953 Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 22:19:36 -0600 Subject: [PATCH 13/26] refactor: get search params from $page instead of window --- src/lib/components/HarnessSelector/HarnessSelector.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte index 47c917b..8927805 100644 --- a/src/lib/components/HarnessSelector/HarnessSelector.svelte +++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte @@ -29,7 +29,7 @@ } function updateQueryParams(selectedHarness) { - const searchParams = new URLSearchParams(window.location.search); + const searchParams = $page.url.searchParams; if (selectedHarness) { const [make, ...model] = selectedHarness.car.split(' ') || []; if (make) searchParams.set("make", encodeURIComponent(make)); From f118c86dd3e376170a7f2cf1e12b49fc77451fe1 Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 22:32:01 -0600 Subject: [PATCH 14/26] refactor: change negative prop to positive --- src/lib/components/HarnessSelector/HarnessSelector.svelte | 4 ++-- src/routes/setup/(guides)/comma-3x/+page.svelte | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte index 8927805..5c14c5f 100644 --- a/src/lib/components/HarnessSelector/HarnessSelector.svelte +++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte @@ -18,7 +18,7 @@ export let label = "Select vehicle"; export let accessoryLabel = null; - export let hidePackageSupportCard = false; + export let showPackageSupportCard = true; // If true, shows the note card that shows below with information about how the selected car is supported let selection; @@ -146,7 +146,7 @@
-{#if !hidePackageSupportCard && selection && selection.package} +{#if showPackageSupportCard && selection && selection.package} {@html selection.package === 'All' ? 'openpilot will work with all packages and trims of this car.' : diff --git a/src/routes/setup/(guides)/comma-3x/+page.svelte b/src/routes/setup/(guides)/comma-3x/+page.svelte index e5b12a6..56407b6 100644 --- a/src/routes/setup/(guides)/comma-3x/+page.svelte +++ b/src/routes/setup/(guides)/comma-3x/+page.svelte @@ -45,7 +45,7 @@ {#if selectedVehicleHarness} From 68ad160caa8a8947a5cf1d4faaa8db6d4a6de3db Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 22:51:55 -0600 Subject: [PATCH 15/26] feat: add support for showing only vehicle or generic harnesses --- .../HarnessSelector/HarnessSelector.svelte | 6 ++++- src/lib/utils/harnesses.js | 22 +++++++++++++------ 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte index 5c14c5f..d60f34f 100644 --- a/src/lib/components/HarnessSelector/HarnessSelector.svelte +++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte @@ -5,7 +5,7 @@ import { tick } from 'svelte'; import { clickOutside } from '$lib/utils/clickOutside'; - import { harnesses } from '$lib/utils/harnesses'; + import { allHarnesses, vehicleHarnesses, genericHarnesses } from '$lib/utils/harnesses'; import NoteCard from '$lib/components/NoteCard.svelte'; import DropdownItem from './HarnessDropdownItem.svelte'; @@ -19,9 +19,13 @@ export let label = "Select vehicle"; export let accessoryLabel = null; export let showPackageSupportCard = true; // If true, shows the note card that shows below with information about how the selected car is supported + export let showVehicleHarnesses = true; // If true, includes the harnesses by each vehicle model + export let showGenericHarnesses = true; // If true, includes the generic/developer harnesses let selection; + // Load harnesses based on the options + $: harnesses = showVehicleHarnesses && showGenericHarnesses ? allHarnesses : showVehicleHarnesses ? vehicleHarnesses : genericHarnesses; $: browser && $harnesses.length > 0, setInitialSelection(); $: if (selection) { onChange(selection); diff --git a/src/lib/utils/harnesses.js b/src/lib/utils/harnesses.js index 82fb5ec..787f966 100644 --- a/src/lib/utils/harnesses.js +++ b/src/lib/utils/harnesses.js @@ -16,15 +16,18 @@ async function fetchHarnessVariants() { }, {}); } -const harnesses = writable([]); let initialized = false; +const vehicleHarnesses = writable([]); // List of vehicle model harnesses, excluding developer and generic make harnesses +const genericHarnesses = writable([]); // List of developer and generic make harnesses +const allHarnesses = writable([]); // List of all vehicle model harnesses, including developer and generic make harnesses async function initializeHarnesses() { if (initialized) return; const harnessInfo = await fetchHarnessVariants(); - let harnessList = Object.entries(Vehicles).flatMap(([make, models]) => { + // Add harnesses for vehicles + let vehiclesHarnessList = Object.entries(Vehicles).flatMap(([make, models]) => { return models.map(model => { if (model.name === 'comma body') return false; const harness = CarHarnesses.find(harness => harness.title === model.harness_connector); @@ -42,21 +45,26 @@ async function initializeHarnesses() { }; }).filter(Boolean); }); + vehicleHarnesses.set(vehiclesHarnessList); - // add developer harnesses - harnessList.push(...CarHarnesses.map(harness => { + // Add developer and generic make harnesses + let genericHarnessList = CarHarnesses.map(harness => { return { ...harnessInfo[harness.id], car: harness.title, id: harness.id, backordered: harness.backordered, }; - })); + }); + genericHarnesses.set(genericHarnessList); + + // Combine the two lists + let allHarnessList = vehiclesHarnessList.concat(genericHarnessList); + allHarnesses.set(allHarnessList); - harnesses.set(harnessList); initialized = true; } initializeHarnesses(); -export { harnesses }; +export { allHarnesses, vehicleHarnesses, genericHarnesses }; From 883c2d192b0fb63c18b7ca455220c75f9bfdd320 Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 22:56:05 -0600 Subject: [PATCH 16/26] feat: add support for custom search labels --- .../components/HarnessSelector/HarnessSelector.svelte | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte index d60f34f..30ef141 100644 --- a/src/lib/components/HarnessSelector/HarnessSelector.svelte +++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte @@ -16,12 +16,15 @@ export let onChange; - export let label = "Select vehicle"; - export let accessoryLabel = null; export let showPackageSupportCard = true; // If true, shows the note card that shows below with information about how the selected car is supported export let showVehicleHarnesses = true; // If true, includes the harnesses by each vehicle model export let showGenericHarnesses = true; // If true, includes the generic/developer harnesses + export let accessoryLabel = null; // Used to show the price of the selected harness when browsing accessories + export let label = "Select vehicle"; + export let searchLabel = "Search for a vehicle or harness"; + export let noResultsLabel = "No matching vehicles"; + let selection; // Load harnesses based on the options @@ -104,7 +107,7 @@ handleOptionClick(item)} on:keydown={(e) => handleOptionKeyDown(e, item)} /> {/each} {:else} - + {/if} {:else} {#each $harnesses as item} From f37fd962c4161169803069b82323503916bc2e1e Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 23:03:49 -0600 Subject: [PATCH 17/26] fix: allow clear button to clear search input instead of closing dropdown --- src/lib/components/HarnessSelector/HarnessSelector.svelte | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte index 30ef141..a263f01 100644 --- a/src/lib/components/HarnessSelector/HarnessSelector.svelte +++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte @@ -70,6 +70,7 @@ const handleClear = () => { // clear search input + const clearedInput = inputValue !== ""; inputValue = ""; handleInput(); inputRef?.focus(); @@ -77,8 +78,10 @@ selection = null; onChange(null); updateQueryParams(null); - // also close the dropdown if it's open - menuOpen = false; + // close the dropdown if it's open and we didn't clear the search input + if (menuOpen && !clearedInput) { + menuOpen = false; + } } /* Dropdown Options */ From 490ba289a075a0509db5e9998dcce9be4e551de8 Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 23:09:51 -0600 Subject: [PATCH 18/26] fix: remove query params when not used --- .../components/HarnessSelector/HarnessSelector.svelte | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte index a263f01..78ff249 100644 --- a/src/lib/components/HarnessSelector/HarnessSelector.svelte +++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte @@ -37,12 +37,15 @@ function updateQueryParams(selectedHarness) { const searchParams = $page.url.searchParams; - if (selectedHarness) { - const [make, ...model] = selectedHarness.car.split(' ') || []; - if (make) searchParams.set("make", encodeURIComponent(make)); - if (model.length > 0) searchParams.set("model", encodeURIComponent(model.join(' '))); + const [make, ...model] = selectedHarness?.car?.split(' ') || []; + if (make) { + searchParams.set("make", encodeURIComponent(make)); } else { searchParams.delete("make"); + } + if (model?.length > 0) { + searchParams.set("model", encodeURIComponent(model.join(' '))); + } else { searchParams.delete("model"); } goto(`?${searchParams.toString()}`, { keepfocus: true, replaceState: true, noScroll: true }); From f58213ea182ef2a9492db3a54fcc2711f9af0d2f Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 23:13:05 -0600 Subject: [PATCH 19/26] feat: only show vehicle specific harnesses in setup guide --- src/routes/setup/(guides)/comma-3x/+page.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/setup/(guides)/comma-3x/+page.svelte b/src/routes/setup/(guides)/comma-3x/+page.svelte index 56407b6..d59951b 100644 --- a/src/routes/setup/(guides)/comma-3x/+page.svelte +++ b/src/routes/setup/(guides)/comma-3x/+page.svelte @@ -46,10 +46,11 @@ label="Select a vehicle to view additional setup notes" onChange={handleHarnessSelection} showPackageSupportCard={false} + showGenericHarnesses={false} /> {#if selectedVehicleHarness} -

{@html vehicleNote || "The selected vehicle or harness does not require additional setup instructions. Follow the setup guide below."}

+

{@html vehicleNote || "The selected vehicle does not require additional setup instructions. Follow the setup guide below."}

 {/if}
From 191243684e45a878b2a93285976713ab44b5b556 Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 23:48:47 -0600 Subject: [PATCH 20/26] fix: clearing search focuses text like before --- .../HarnessSelector/HarnessSelector.svelte | 30 ++++++++++++------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte index 78ff249..77e7f73 100644 --- a/src/lib/components/HarnessSelector/HarnessSelector.svelte +++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte @@ -73,17 +73,25 @@ const handleClear = () => { // clear search input - const clearedInput = inputValue !== ""; - inputValue = ""; - handleInput(); - inputRef?.focus(); - // clear harness selection - selection = null; - onChange(null); - updateQueryParams(null); - // close the dropdown if it's open and we didn't clear the search input - if (menuOpen && !clearedInput) { - menuOpen = false; + let clearedInput = false; + if (inputValue) { + inputValue = ""; + clearedInput = true; + handleInput(); + inputRef?.focus(); + } + // clear harness selection and close if we weren't clearing the search input + if (!clearedInput) { + // clear harness selection + if (selection) { + selection = null; + onChange(null); + updateQueryParams(null); // NOTE: Doing this causes a soft reload which removes the focus from the input + } + // close the dropdown if it's open + if (menuOpen) { + menuOpen = false; + } } } From 88643858df403aa5fb97ccc4f6208267117dc0b6 Mon Sep 17 00:00:00 2001 From: David Date: Sat, 1 Mar 2025 23:56:05 -0600 Subject: [PATCH 21/26] feat: dynamically update harness selector resource labels based on params --- .../HarnessSelector/HarnessSelector.svelte | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte index 77e7f73..19de0b7 100644 --- a/src/lib/components/HarnessSelector/HarnessSelector.svelte +++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte @@ -19,16 +19,22 @@ export let showPackageSupportCard = true; // If true, shows the note card that shows below with information about how the selected car is supported export let showVehicleHarnesses = true; // If true, includes the harnesses by each vehicle model export let showGenericHarnesses = true; // If true, includes the generic/developer harnesses + let showAllHarnesses = showVehicleHarnesses && showGenericHarnesses; export let accessoryLabel = null; // Used to show the price of the selected harness when browsing accessories - export let label = "Select vehicle"; - export let searchLabel = "Search for a vehicle or harness"; - export let noResultsLabel = "No matching vehicles"; + + const resourceName = { + singular: showAllHarnesses ? "vehicle or harness" : showVehicleHarnesses ? "vehicle" : "harness", + plural: showAllHarnesses ? "vehicles or harnesses" : showVehicleHarnesses ? "vehicles" : "harnesses", + } + export let label = `Select ${resourceName.singular}`; + export let searchLabel = `Search for a ${resourceName.singular}`; + export let noResultsLabel = `No matching ${resourceName.plural}`; let selection; // Load harnesses based on the options - $: harnesses = showVehicleHarnesses && showGenericHarnesses ? allHarnesses : showVehicleHarnesses ? vehicleHarnesses : genericHarnesses; + $: harnesses = showAllHarnesses ? allHarnesses : showVehicleHarnesses ? vehicleHarnesses : genericHarnesses; $: browser && $harnesses.length > 0, setInitialSelection(); $: if (selection) { onChange(selection); From 7d497ef7d841bee1bb6713bf7a840b6a81998b53 Mon Sep 17 00:00:00 2001 From: David Date: Sun, 2 Mar 2025 00:04:03 -0600 Subject: [PATCH 22/26] refactor: revert updating css since we're not using the harness selector in a card anymore --- src/lib/components/HarnessSelector/HarnessSelector.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/HarnessSelector/HarnessSelector.svelte b/src/lib/components/HarnessSelector/HarnessSelector.svelte index 19de0b7..97eebf2 100644 --- a/src/lib/components/HarnessSelector/HarnessSelector.svelte +++ b/src/lib/components/HarnessSelector/HarnessSelector.svelte @@ -192,7 +192,7 @@ } .dropdown-content { - display: none !important; /* hidden by default (!important is needed to hide when inside a card, since the card overrides display) */ + display: none; /* hidden by default */ position: absolute; border: 1px solid #ddd; z-index: 1; @@ -202,7 +202,7 @@ } .dropdown-content.show { - display:block !important; + display:block } .search-input { From d656d2b84d7d8190167349b8af083df6ea129bac Mon Sep 17 00:00:00 2001 From: David Date: Sun, 2 Mar 2025 00:09:18 -0600 Subject: [PATCH 23/26] add todos for updating vehicle specific sections --- src/routes/setup/(guides)/comma-3x/+page.js | 2 +- src/routes/setup/(guides)/comma-3x/+page.svelte | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/setup/(guides)/comma-3x/+page.js b/src/routes/setup/(guides)/comma-3x/+page.js index 5abf1b0..81f6ce6 100644 --- a/src/routes/setup/(guides)/comma-3x/+page.js +++ b/src/routes/setup/(guides)/comma-3x/+page.js @@ -28,7 +28,7 @@ export async function load() { ], notes: [ { - title: 'Note: Nissan & GM setup', + title: 'Note: Nissan & GM setup', // TODO: This should probably be moved to vehicle specific notes in vehicles.json ("setup_notes" field) content: ` See more setup details: Nissan or diff --git a/src/routes/setup/(guides)/comma-3x/+page.svelte b/src/routes/setup/(guides)/comma-3x/+page.svelte index d59951b..c827ba8 100644 --- a/src/routes/setup/(guides)/comma-3x/+page.svelte +++ b/src/routes/setup/(guides)/comma-3x/+page.svelte @@ -68,6 +68,7 @@

Remove the rearview mirror cover trim

remove the rearview mirror cover trim +

Removal method varies by car. The durable plastic often requires a strong tug to pop it off on Hondas. From 5776841f1e6ce16b290fc954cba430cac899afda Mon Sep 17 00:00:00 2001 From: David Date: Mon, 3 Mar 2025 15:13:26 -0600 Subject: [PATCH 24/26] add demo setup notes for first 2 vehicles --- src/lib/vehicles.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/lib/vehicles.json b/src/lib/vehicles.json index 901c074..7120830 100644 --- a/src/lib/vehicles.json +++ b/src/lib/vehicles.json @@ -11,7 +11,8 @@ "harness_connector": "Honda Nidec", "detail_sentence": "openpilot upgrades your Acura ILX with automated lane centering and adaptive cruise control while driving above 26 mph. This car may not be able to take tight turns on its own. Traffic light and stop sign handling is also available in Experimental mode.", "footnotes": [ - ] + ], + "setup_notes": "

Here's an example of a note with some bold text and a link or a highlighted link.

We can even include images:

comma logo

" }, { "name": "Acura RDX 2016-18", @@ -24,7 +25,8 @@ "harness_connector": "Honda Nidec", "detail_sentence": "openpilot upgrades your Acura RDX with automated lane centering and adaptive cruise control while driving above 26 mph. This car may not be able to take tight turns on its own. Traffic light and stop sign handling is also available in Experimental mode.", "footnotes": [ - ] + ], + "setup_notes": "Here are some shorter demo notes." }, { "name": "Acura RDX 2019-21", From d79a0e1593f208f0d52f9c713702b7a9bf49939f Mon Sep 17 00:00:00 2001 From: David Date: Tue, 4 Mar 2025 14:13:19 -0600 Subject: [PATCH 25/26] feat: update vehicle setup notes and card styles to support markdown formatting --- bun.lockb | Bin 51699 -> 52061 bytes package.json | 3 +- src/lib/components/NoteCard.svelte | 44 +++++++++++++++++- src/lib/vehicles.json | 7 +-- .../setup/(guides)/comma-3x/+page.svelte | 23 +++++++-- 5 files changed, 68 insertions(+), 9 deletions(-) diff --git a/bun.lockb b/bun.lockb index abe5be26a7c25837993d471a068e83d1825a2082..865d66935038bd55aa98f95233a90d41eaf1ebc2 100755 GIT binary patch delta 8080 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 Mhr&;t+?y5izaBC{Bme*a delta 7713 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

{@html icon}
- {title} + {title}
@@ -29,7 +29,7 @@ margin-left: 1rem; display: block !important; - & span { + & .title { font-family: JetBrains Mono, monospace; font-size: 0.875rem; font-weight: 400; @@ -54,6 +54,46 @@ opacity: 0.8; } } + + & h1 { + font-size: 1.5rem; + margin-block: 1rem; + } + + & h2 { + font-size: 1.25rem; + margin-block: 1rem; + } + + & h3 { + font-size: 1.125rem; + margin-block: 1rem; + } + + & h4 { + font-size: 1rem; + margin-block: 1rem; + } + + & h5 { + font-size: 0.875rem; + margin-block: 1rem; + } + + & h6 { + font-size: 0.75rem; + margin-block: 1rem; + } + + & li { + font-size: 0.875rem; + margin-bottom: 0.5rem; + } + + & ul, & ol { + padding-left: 1.5rem; + margin: 0.5rem 0; + } } } diff --git a/src/lib/vehicles.json b/src/lib/vehicles.json index 7120830..16127dc 100644 --- a/src/lib/vehicles.json +++ b/src/lib/vehicles.json @@ -12,7 +12,7 @@ "detail_sentence": "openpilot upgrades your Acura ILX with automated lane centering and adaptive cruise control while driving above 26 mph. This car may not be able to take tight turns on its own. Traffic light and stop sign handling is also available in Experimental mode.", "footnotes": [ ], - "setup_notes": "

Here's an example of a note with some bold text and a link or a highlighted link.

We can even include images:

comma logo

" + "setup_notes": "

Here's an example of an HTML note with some bold text and a link or a highlighted link.

We can even include images:

comma logo
  • And we can use
  • bullet points
  • to show steps

" }, { "name": "Acura RDX 2016-18", @@ -26,7 +26,7 @@ "detail_sentence": "openpilot upgrades your Acura RDX with automated lane centering and adaptive cruise control while driving above 26 mph. This car may not be able to take tight turns on its own. Traffic light and stop sign handling is also available in Experimental mode.", "footnotes": [ ], - "setup_notes": "Here are some shorter demo notes." + "setup_notes": "## Markdown header\n\nRegular text\n\n- Use **bold text** for emphasis\n- Include [links](https://comma.ai.com)\n- Add bullet points as needed\n\nOr include images:\n\n![comma](https://blog.comma.ai/img/097_release/cover.jpg)" }, { "name": "Acura RDX 2019-21", @@ -39,7 +39,8 @@ "harness_connector": "Honda Bosch A", "detail_sentence": "openpilot upgrades your Acura RDX with automated lane centering above 3 mph, and adaptive cruise control that automatically resumes from a stop. This car may not be able to take tight turns on its own.", "footnotes": [ - ] + ], + "setup_notes": "Here are some shorter demo notes with [a link](https://comma.ai)." } ], "Audi": [ diff --git a/src/routes/setup/(guides)/comma-3x/+page.svelte b/src/routes/setup/(guides)/comma-3x/+page.svelte index c827ba8..2230a5f 100644 --- a/src/routes/setup/(guides)/comma-3x/+page.svelte +++ b/src/routes/setup/(guides)/comma-3x/+page.svelte @@ -1,4 +1,6 @@