My Eyes Are Up Here

This commit is contained in:
firestar5683
2026-06-15 00:40:07 -05:00
parent 8a7946b26c
commit 9af2969540
5 changed files with 132 additions and 21 deletions
@@ -1,7 +1,7 @@
import { html, reactive } from "/assets/vendor/arrow-core.js"
import { createBrowserHistory, createRouter } from "/assets/vendor/remix-router-1.3.1.js"
import { hideSidebar } from "/assets/js/utils.js"
import { DeviceSettings } from "/assets/components/tools/device_settings.js?v=favorite-slots-3"
import { DeviceSettings } from "/assets/components/tools/device_settings.js?v=favorite-slots-4"
import { ErrorLogs } from "/assets/components/tools/error_logs.js"
import { VehicleFeatures } from "/assets/components/tools/vehicle_features.js"
import { GalaxyPairing } from "/assets/components/tools/galaxy.js"
@@ -477,6 +477,91 @@
padding: var(--padding-base);
}
.ds-favorite-quick-grid {
display: grid;
gap: var(--gap-base);
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.ds-favorite-quick-card {
align-items: center;
background: var(--color-gray-950);
border: 2px solid var(--sidebar-border-color);
border-radius: var(--border-radius-base);
cursor: pointer;
display: flex;
gap: var(--gap-base);
justify-content: space-between;
min-height: 8.5rem;
padding: 1.1rem;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
user-select: none;
}
.ds-favorite-quick-card:hover {
border-color: var(--main-fg);
transform: translateY(-1px);
}
.ds-favorite-quick-card:has(.ds-favorite-quick-toggle:checked) {
border-color: var(--main-fg);
box-shadow: var(--glow-primary);
}
.ds-favorite-quick-copy {
display: flex;
flex: 1;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.ds-favorite-quick-slot {
color: var(--main-fg);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
}
.ds-favorite-quick-title {
color: var(--text-color);
font-size: 1.35rem;
font-weight: var(--font-weight-bold);
line-height: 1.15;
}
.ds-favorite-quick-section,
.ds-favorite-quick-desc {
color: var(--text-muted);
font-size: var(--font-size-sm);
line-height: 1.25;
}
.ds-favorite-quick-desc {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.ds-favorite-quick-toggle {
border-radius: 1.2rem;
cursor: pointer;
height: 2rem;
width: 3.75rem;
}
.ds-favorite-quick-toggle::after {
height: 1.5rem;
left: 0.25rem;
top: 0.25rem;
width: 1.5rem;
}
.ds-favorite-quick-toggle:checked::after {
transform: translateX(1.75rem);
}
.ds-favorite-card {
background: var(--input-bg);
border: var(--border-style-main);
@@ -286,7 +286,7 @@ async function fetchLayoutAndParams() {
state.loadingValues = true
try {
const layoutRes = await fetch("/assets/components/tools/device_settings_layout.json?v=favorite-slots-3", { cache: "no-store" })
const layoutRes = await fetch("/assets/components/tools/device_settings_layout.json?v=favorite-slots-4", { cache: "no-store" })
const rawLayoutData = await layoutRes.json()
const layoutData = rawLayoutData
@@ -987,13 +987,53 @@ function renderFavoriteSlotsPanel() {
const slots = normalizeFavoriteSlots(state.favoriteSlots)
const options = normalizeFavoriteOptions(state.favoriteOptions)
const optionByKey = new Map(options.map(opt => [opt.key, opt]))
const quickFavorites = slots
.map((slot, index) => {
const selectedKey = slot.key || ""
const selectedOption = optionByKey.get(selectedKey)
return {
index,
slot,
selectedKey,
selectedOption,
selectedValue: selectedKey ? !!state.values[selectedKey] : false,
}
})
.filter(favorite => favorite.slot.enabled && favorite.selectedKey && favorite.selectedOption)
return html`
<div class="ds-favorites-panel">
${quickFavorites.length ? html`
<div class="ds-favorite-quick-grid">
${quickFavorites.map(favorite => {
const selectedOption = favorite.selectedOption
const selectedKey = favorite.selectedKey
const selectedValue = favorite.selectedValue
return html`
<label class="ds-favorite-quick-card">
<div class="ds-favorite-quick-copy">
<span class="ds-favorite-quick-slot">Favorite #${favorite.index + 1}</span>
<span class="ds-favorite-quick-title">${selectedOption.label || favorite.slot.label || selectedKey}</span>
${selectedOption.section ? html`<span class="ds-favorite-quick-section">${selectedOption.section}</span>` : ""}
${selectedOption.description ? html`<span class="ds-favorite-quick-desc">${selectedOption.description}</span>` : ""}
</div>
<input
type="checkbox"
class="ds-toggle ds-favorite-quick-toggle"
data-favorite-value-key="${selectedKey}"
checked="${() => selectedValue}"
@change="${(e) => updateFavoriteValue(selectedKey, !!e.currentTarget.checked)}" />
</label>
`
})}
</div>
` : ""}
${slots.map((slot, index) => {
const selectedOption = options.find(opt => opt.key === slot.key)
const selectedOption = optionByKey.get(slot.key)
const selectedKey = slot.key || ""
const selectedValue = selectedKey ? !!state.values[selectedKey] : false
const favoriteFilter = state.favoriteFilters[index] || ""
const filteredOptions = options.filter(opt => favoriteOptionMatchesFilter(opt, favoriteFilter))
@@ -1057,21 +1097,6 @@ function renderFavoriteSlotsPanel() {
@change="${(e) => updateFavoriteSlot(index, { show_onroad: !!e.currentTarget.checked })}" />
</label>
</div>
${selectedKey ? html`
<div class="ds-favorite-live-row">
<div class="ds-favorite-live-copy">
<span class="ds-row-label">${selectedOption?.label || slot.label || selectedKey}</span>
${selectedOption?.description ? html`<div class="ds-row-desc">${selectedOption.description}</div>` : ""}
</div>
<input
type="checkbox"
class="ds-toggle"
data-favorite-value-key="${selectedKey}"
checked="${() => selectedValue}"
@change="${(e) => updateFavoriteValue(selectedKey, !!e.currentTarget.checked)}" />
</div>
` : ""}
</div>
`
})}
@@ -38,13 +38,13 @@
<link rel="stylesheet" href="/assets/components/tools/tmux.css">
<link rel="stylesheet" href="/assets/components/tools/toggles.css">
<link rel="stylesheet" href="/assets/components/tools/update_manager.css">
<link rel="stylesheet" href="/assets/components/tools/device_settings.css">
<link rel="stylesheet" href="/assets/components/tools/device_settings.css?v=favorite-slots-4">
<link rel="stylesheet" href="/assets/components/tools/galaxy.css">
<link rel="stylesheet" href="/assets/components/tools/longitudinal_maneuvers.css">
<link rel="stylesheet" href="/assets/components/tools/tsk_manager.css">
<script type="module">
import("/assets/components/router.js?v=favorite-slots-3").catch((err) => {
import("/assets/components/router.js?v=favorite-slots-4").catch((err) => {
console.error("[the_pond] bootstrap failed", err);
const target = document.getElementById("app") || document.body;
const pre = document.createElement("pre");
+1
View File
@@ -3485,6 +3485,7 @@ def setup(app):
if request.path in {
"/assets/components/router.js",
"/assets/components/tools/device_settings.js",
"/assets/components/tools/device_settings.css",
"/assets/components/tools/device_settings_layout.json",
}:
response.headers["Cache-Control"] = "no-store, no-cache, must-revalidate, max-age=0"