Крутой дизайн
This commit is contained in:
Илья Шалонин
parent
ae1229d550
commit
3d65d2b7e8
5 changed files with 326 additions and 329 deletions
|
|
@ -1,6 +1,6 @@
|
|||
import type { MutableRefObject, RefObject } from "react";
|
||||
import { FormEvent } from "react";
|
||||
import type { AppConfig, MapMode, SliceParams } from "../types";
|
||||
import type { AppConfig, SliceParams } from "../types";
|
||||
|
||||
type SettingsPanelProps = {
|
||||
open: boolean;
|
||||
|
|
@ -9,8 +9,6 @@ type SettingsPanelProps = {
|
|||
status: string;
|
||||
theme: "dark" | "light";
|
||||
onToggleTheme: () => void;
|
||||
mapMode: MapMode;
|
||||
onMapModeChange: (mode: MapMode) => void;
|
||||
tilesets: string[];
|
||||
activeTileset: string;
|
||||
onActivateTileset: (name: string) => void;
|
||||
|
|
@ -34,8 +32,6 @@ export const SettingsPanel = ({
|
|||
status,
|
||||
theme,
|
||||
onToggleTheme,
|
||||
mapMode,
|
||||
onMapModeChange,
|
||||
tilesets,
|
||||
activeTileset,
|
||||
onActivateTileset,
|
||||
|
|
@ -59,9 +55,6 @@ export const SettingsPanel = ({
|
|||
<div className="panel-title">Настройки</div>
|
||||
<div className="panel-subtitle">Управление источниками и нарезкой</div>
|
||||
</div>
|
||||
<button type="button" className="btn primary small" onClick={onClose}>
|
||||
Закрыть
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="settings-content">
|
||||
|
|
@ -80,213 +73,205 @@ export const SettingsPanel = ({
|
|||
<div className="card-value">{status}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="panel-header">
|
||||
<div>
|
||||
<div className="panel-title">Тема</div>
|
||||
<div className="panel-subtitle">Светлая или тёмная</div>
|
||||
</div>
|
||||
<button type="button" className="btn ghost small" onClick={onToggleTheme}>
|
||||
{theme === "dark" ? "Включить светлую" : "Включить тёмную"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="panel-header">
|
||||
<div>
|
||||
<div className="panel-title">Наборы тайлов</div>
|
||||
<div className="panel-subtitle">Активация и обновление</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tileset-row stacked">
|
||||
<select value={activeTileset} onChange={(e) => onActivateTileset(e.target.value)}>
|
||||
{tilesets.map((t) => (
|
||||
<option key={t} value={t}>
|
||||
{t}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button type="button" className="btn ghost" onClick={onRefreshTilesets}>
|
||||
Обновить
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="panel-header">
|
||||
<div>
|
||||
<div className="panel-title">Нарезка тайлов</div>
|
||||
<div className="panel-subtitle">Запускает gdal2tiles на бэкенде</div>
|
||||
</div>
|
||||
<div className={`badge ${sliceStatus === "ok" ? "ok" : sliceStatus === "idle" ? "" : "warn"}`}>
|
||||
{sliceStatus}
|
||||
</div>
|
||||
</div>
|
||||
<form
|
||||
className="slice-grid"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
onSliceSubmit(event);
|
||||
}}
|
||||
>
|
||||
<label className="field">
|
||||
<span>Источник (GeoTIFF/MBTiles)</span>
|
||||
<div className="file-row">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="/path/to/input.tif"
|
||||
value={sliceParams.source}
|
||||
onChange={(e) => onSliceParamsChange({ ...sliceParams, source: e.target.value })}
|
||||
required
|
||||
/>
|
||||
<button type="button" className="btn ghost" onClick={onTriggerFileSelect}>
|
||||
Выбрать
|
||||
</button>
|
||||
<input
|
||||
type="file"
|
||||
accept=".tif,.tiff,.mbtiles,.jpg,.jpeg,.png"
|
||||
ref={fileInputRef}
|
||||
style={{ display: "none" }}
|
||||
onChange={(e) => onFileSelected(e.target.files?.[0])}
|
||||
/>
|
||||
</div>
|
||||
{selectedFileName && <small className="muted">Файл: {selectedFileName}</small>}
|
||||
</label>
|
||||
|
||||
<label className="field">
|
||||
<span>Схема тайлов</span>
|
||||
<select
|
||||
value={sliceParams.scheme}
|
||||
onChange={(e) => onSliceParamsChange({ ...sliceParams, scheme: e.target.value as "xyz" | "tms" })}
|
||||
>
|
||||
<option value="xyz">XYZ (Y сверху, Leaflet)</option>
|
||||
<option value="tms">TMS (Y снизу)</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="field">
|
||||
<span>Формат исходника</span>
|
||||
<select
|
||||
value={sliceParams.source_format}
|
||||
onChange={(e) =>
|
||||
onSliceParamsChange({
|
||||
...sliceParams,
|
||||
source_format: e.target.value as "geotiff" | "mbtiles" | "tms" | "xyz",
|
||||
})
|
||||
}
|
||||
>
|
||||
<option value="geotiff">GeoTIFF/растровый TIFF</option>
|
||||
<option value="mbtiles">MBTiles (растровый)</option>
|
||||
<option value="tms">Папка TMS</option>
|
||||
<option value="xyz">Папка XYZ</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="field">
|
||||
<span>Tileset (имя папки)</span>
|
||||
<div className="file-row">
|
||||
<input
|
||||
type="text"
|
||||
list="tilesets-list"
|
||||
placeholder="например: moscow (пусто → активный)"
|
||||
value={sliceParams.tileset}
|
||||
onChange={(e) => onSliceParamsChange({ ...sliceParams, tileset: e.target.value })}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn ghost"
|
||||
onClick={() => {
|
||||
const name = sliceParams.tileset.trim();
|
||||
if (!name) return;
|
||||
onCreateTileset(name);
|
||||
}}
|
||||
>
|
||||
Создать
|
||||
</button>
|
||||
</div>
|
||||
<datalist id="tilesets-list">
|
||||
{tilesets.map((t) => (
|
||||
<option key={t} value={t} />
|
||||
))}
|
||||
</datalist>
|
||||
<small className="muted">Активный: {activeTileset || "—"}</small>
|
||||
</label>
|
||||
|
||||
<label className="field">
|
||||
<span>Папка тайлов (опц.)</span>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="лучше не трогать (по умолчанию tileset)"
|
||||
value={sliceParams.destination}
|
||||
onChange={(e) => onSliceParamsChange({ ...sliceParams, destination: e.target.value })}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="field">
|
||||
<span>Min zoom</span>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
value={sliceParams.min_zoom}
|
||||
onChange={(e) =>
|
||||
onSliceParamsChange({
|
||||
...sliceParams,
|
||||
min_zoom: Number(e.target.value),
|
||||
})
|
||||
}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="field">
|
||||
<span>Max zoom</span>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
value={sliceParams.max_zoom}
|
||||
onChange={(e) =>
|
||||
onSliceParamsChange({
|
||||
...sliceParams,
|
||||
max_zoom: Number(e.target.value),
|
||||
})
|
||||
}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="field">
|
||||
<span>Формат тайлов (сейчас поддерживается PNG)</span>
|
||||
<select
|
||||
value={sliceParams.tile_format}
|
||||
onChange={(e) => onSliceParamsChange({ ...sliceParams, tile_format: e.target.value })}
|
||||
>
|
||||
<option value="png">png</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<divz>
|
||||
<div className="actions-row">
|
||||
<button type="submit" className="btn primary">
|
||||
Запустить
|
||||
</button>
|
||||
<button type="button" className="btn ghost" onClick={onSliceReset}>
|
||||
Сброс
|
||||
</button>
|
||||
</div>
|
||||
</divz>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="panel info">
|
||||
<div className="panel-header">
|
||||
<div>
|
||||
<div className="panel-title">Тема</div>
|
||||
<div className="panel-subtitle">Светлая или тёмная</div>
|
||||
</div>
|
||||
<button type="button" className="btn ghost small" onClick={onToggleTheme}>
|
||||
{theme === "dark" ? "Включить светлую" : "Включить тёмную"}
|
||||
</button>
|
||||
<div className="bottom-settings">
|
||||
<button type="button" className="btn primary block" onClick={onClose}>
|
||||
Закрыть
|
||||
</button>
|
||||
</div>
|
||||
<label className="field compact">
|
||||
<span>Режим карты</span>
|
||||
<select value={mapMode} onChange={(e) => onMapModeChange(e.target.value as MapMode)}>
|
||||
<option value="raster">Растровые</option>
|
||||
<option value="vector">Векторные</option>
|
||||
</select>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<section className="panel">
|
||||
<div className="panel-header">
|
||||
<div>
|
||||
<div className="panel-title">Наборы тайлов</div>
|
||||
<div className="panel-subtitle">Активация и обновление</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tileset-row stacked">
|
||||
<select value={activeTileset} onChange={(e) => onActivateTileset(e.target.value)}>
|
||||
{tilesets.map((t) => (
|
||||
<option key={t} value={t}>
|
||||
{t}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button type="button" className="btn ghost" onClick={onRefreshTilesets}>
|
||||
Обновить
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="panel slice-panel">
|
||||
<div className="panel-header">
|
||||
<div>
|
||||
<div className="panel-title">Нарезка тайлов</div>
|
||||
<div className="panel-subtitle">Запускает gdal2tiles на бэкенде</div>
|
||||
</div>
|
||||
<div className={`badge ${sliceStatus === "ok" ? "ok" : sliceStatus === "idle" ? "" : "warn"}`}>
|
||||
{sliceStatus}
|
||||
</div>
|
||||
</div>
|
||||
<form
|
||||
className="slice-grid"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
onSliceSubmit(event);
|
||||
}}
|
||||
>
|
||||
<label className="field">
|
||||
<span>Источник (GeoTIFF/MBTiles)</span>
|
||||
<div className="file-row">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="/path/to/input.tif"
|
||||
value={sliceParams.source}
|
||||
onChange={(e) => onSliceParamsChange({ ...sliceParams, source: e.target.value })}
|
||||
required
|
||||
/>
|
||||
<button type="button" className="btn ghost" onClick={onTriggerFileSelect}>
|
||||
Выбрать
|
||||
</button>
|
||||
<input
|
||||
type="file"
|
||||
accept=".tif,.tiff,.mbtiles,.jpg,.jpeg,.png"
|
||||
ref={fileInputRef}
|
||||
style={{ display: "none" }}
|
||||
onChange={(e) => onFileSelected(e.target.files?.[0])}
|
||||
/>
|
||||
</div>
|
||||
{selectedFileName && <small className="muted">Файл: {selectedFileName}</small>}
|
||||
</label>
|
||||
|
||||
<label className="field">
|
||||
<span>Схема тайлов</span>
|
||||
<select
|
||||
value={sliceParams.scheme}
|
||||
onChange={(e) => onSliceParamsChange({ ...sliceParams, scheme: e.target.value as "xyz" | "tms" })}
|
||||
>
|
||||
<option value="xyz">XYZ (Y сверху, Leaflet)</option>
|
||||
<option value="tms">TMS (Y снизу)</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="field">
|
||||
<span>Формат исходника</span>
|
||||
<select
|
||||
value={sliceParams.source_format}
|
||||
onChange={(e) =>
|
||||
onSliceParamsChange({
|
||||
...sliceParams,
|
||||
source_format: e.target.value as "geotiff" | "mbtiles" | "tms" | "xyz",
|
||||
})
|
||||
}
|
||||
>
|
||||
<option value="geotiff">GeoTIFF/растровый TIFF</option>
|
||||
<option value="mbtiles">MBTiles (растровый)</option>
|
||||
<option value="tms">Папка TMS</option>
|
||||
<option value="xyz">Папка XYZ</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="field">
|
||||
<span>Tileset (имя папки)</span>
|
||||
<div className="file-row">
|
||||
<input
|
||||
type="text"
|
||||
list="tilesets-list"
|
||||
placeholder="например: moscow (пусто → активный)"
|
||||
value={sliceParams.tileset}
|
||||
onChange={(e) => onSliceParamsChange({ ...sliceParams, tileset: e.target.value })}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn ghost"
|
||||
onClick={() => {
|
||||
const name = sliceParams.tileset.trim();
|
||||
if (!name) return;
|
||||
onCreateTileset(name);
|
||||
}}
|
||||
>
|
||||
Создать
|
||||
</button>
|
||||
</div>
|
||||
<datalist id="tilesets-list">
|
||||
{tilesets.map((t) => (
|
||||
<option key={t} value={t} />
|
||||
))}
|
||||
</datalist>
|
||||
<small className="muted">Активный: {activeTileset || "—"}</small>
|
||||
</label>
|
||||
|
||||
<label className="field">
|
||||
<span>Папка тайлов (опц.)</span>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="лучше не трогать (по умолчанию tileset)"
|
||||
value={sliceParams.destination}
|
||||
onChange={(e) => onSliceParamsChange({ ...sliceParams, destination: e.target.value })}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="field">
|
||||
<span>Min zoom</span>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
value={sliceParams.min_zoom}
|
||||
onChange={(e) =>
|
||||
onSliceParamsChange({
|
||||
...sliceParams,
|
||||
min_zoom: Number(e.target.value),
|
||||
})
|
||||
}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="field">
|
||||
<span>Max zoom</span>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
value={sliceParams.max_zoom}
|
||||
onChange={(e) =>
|
||||
onSliceParamsChange({
|
||||
...sliceParams,
|
||||
max_zoom: Number(e.target.value),
|
||||
})
|
||||
}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="field">
|
||||
<span>Формат тайлов (сейчас поддерживается PNG)</span>
|
||||
<select
|
||||
value={sliceParams.tile_format}
|
||||
onChange={(e) => onSliceParamsChange({ ...sliceParams, tile_format: e.target.value })}
|
||||
>
|
||||
<option value="png">png</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<div className="field actions">
|
||||
<span>Действия</span>
|
||||
<div className="actions-row">
|
||||
<button type="submit" className="btn primary">
|
||||
Запустить
|
||||
</button>
|
||||
<button type="button" className="btn ghost" onClick={onSliceReset}>
|
||||
Сброс
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
type TopbarProps = {
|
||||
status: string;
|
||||
onOpenSettings: () => void;
|
||||
};
|
||||
|
||||
export const Topbar = ({ status, onOpenSettings }: TopbarProps) => (
|
||||
<header className="topbar">
|
||||
<div className="brand">
|
||||
<div className={`pulse ${status === "ok" ? "ok" : ""}`} />
|
||||
<div>
|
||||
<div className="title">GoAgro</div>
|
||||
<div className="subtitle">Тестовая версия</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="top-actions">
|
||||
<button type="button" className="btn primary small" onClick={onOpenSettings}>
|
||||
Настройки
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
|
@ -4,17 +4,22 @@ import type { TrackPoint } from "../types";
|
|||
type TrackSummaryProps = {
|
||||
lastPoint: TrackPoint | null;
|
||||
pointsCount: number;
|
||||
compact?: boolean;
|
||||
};
|
||||
|
||||
export const TrackSummary = ({ lastPoint, pointsCount }: TrackSummaryProps) => (
|
||||
<div className="mini-info">
|
||||
<div className="chip">
|
||||
export const TrackSummary = ({ lastPoint, pointsCount, compact }: TrackSummaryProps) => (
|
||||
<div className={`mini-info ${compact ? "compact" : ""}`}>
|
||||
<div className="chip small">
|
||||
<span>Последняя фиксация</span>
|
||||
<strong>{formatTime(lastPoint?.timestamp)}</strong>
|
||||
</div>
|
||||
<div className="chip">
|
||||
<div className="chip small">
|
||||
<span>Точек трека</span>
|
||||
<strong>{pointsCount}</strong>
|
||||
</div>
|
||||
<div className="chip small">
|
||||
<span>Статус</span>
|
||||
<strong>ок</strong>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue