mirror of
https://github.com/firestar5683/StarPilot.git
synced 2026-08-21 00:03:45 +08:00
My Eyes Are Up Here
This commit is contained in:
@@ -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");
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user