mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-10-19 15:47:04 +02:00
Merge pull request #581 from aneopsy/refactor-utils
Refactor frontend utility functions to reduce duplication
This commit is contained in:
MartinNYHC
@@ -1,6 +1,7 @@
|
||||
import { useState, useRef, useEffect, type ReactNode } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Droplets, Link2, Copy, Check, Settings2, ExternalLink, Package, Unlink } from 'lucide-react';
|
||||
import { isLightColor } from '../utils/colors';
|
||||
|
||||
interface FilamentData {
|
||||
vendor: 'Bambu Lab' | 'Generic';
|
||||
@@ -136,17 +137,6 @@ export function FilamentHoverCard({ data, children, disabled, className = '', sp
|
||||
return '#22c55e'; // green
|
||||
};
|
||||
|
||||
// Determine if color is light (for text contrast on swatch)
|
||||
const isLightColor = (hex: string | null): boolean => {
|
||||
if (!hex) return false;
|
||||
const cleanHex = hex.replace('#', '');
|
||||
const r = parseInt(cleanHex.slice(0, 2), 16);
|
||||
const g = parseInt(cleanHex.slice(2, 4), 16);
|
||||
const b = parseInt(cleanHex.slice(4, 6), 16);
|
||||
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
||||
return luminance > 0.6;
|
||||
};
|
||||
|
||||
const colorHex = data.colorHex ? `#${data.colorHex.replace('#', '')}` : null;
|
||||
const assignedRemainingWeight = inventory?.assignedSpool?.remainingWeightGrams ?? null;
|
||||
|
||||
|
||||
@@ -247,7 +247,6 @@ function formatStorageSize(bytes: number): string {
|
||||
return `${mb.toFixed(0)} MB`;
|
||||
}
|
||||
|
||||
|
||||
function getFileIcon(filename: string, isDirectory: boolean) {
|
||||
if (isDirectory) return Folder;
|
||||
|
||||
|
||||
@@ -37,6 +37,12 @@ import { ConfirmModal } from './ConfirmModal';
|
||||
import { useToast } from '../contexts/ToastContext';
|
||||
import { formatRelativeTime } from '../utils/date';
|
||||
|
||||
function formatDateTime(dateStr: string | null): string {
|
||||
if (!dateStr) return '-';
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleString();
|
||||
}
|
||||
|
||||
interface StatusBadgeProps {
|
||||
status: string | null;
|
||||
}
|
||||
@@ -66,12 +72,6 @@ function StatusBadge({ status }: StatusBadgeProps) {
|
||||
);
|
||||
}
|
||||
|
||||
function formatDateTime(dateStr: string | null): string {
|
||||
if (!dateStr) return '-';
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleString();
|
||||
}
|
||||
|
||||
export function GitHubBackupSettings() {
|
||||
const queryClient = useQueryClient();
|
||||
const { showToast } = useToast();
|
||||
|
||||
@@ -5,17 +5,16 @@ import { api } from '../api/client';
|
||||
import type { SpoolUsageRecord } from '../api/client';
|
||||
import { Button } from './Button';
|
||||
import { useToast } from '../contexts/ToastContext';
|
||||
|
||||
interface SpoolUsageHistoryProps {
|
||||
spoolId: number;
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: '2-digit' }) +
|
||||
' ' + date.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
|
||||
interface SpoolUsageHistoryProps {
|
||||
spoolId: number;
|
||||
}
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
completed: 'text-bambu-green',
|
||||
failed: 'text-red-400',
|
||||
|
||||
@@ -18,6 +18,7 @@ import {
|
||||
import { Button } from './Button';
|
||||
import { api } from '../api/client';
|
||||
import { useToast } from '../contexts/ToastContext';
|
||||
import { formatMediaTime } from '../utils/date';
|
||||
|
||||
interface TimelapseEditorModalProps {
|
||||
archiveId: number;
|
||||
@@ -28,12 +29,6 @@ interface TimelapseEditorModalProps {
|
||||
|
||||
const SPEED_OPTIONS = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4];
|
||||
|
||||
function formatTime(seconds: number): string {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
export function TimelapseEditorModal({
|
||||
archiveId,
|
||||
timelapseSrc,
|
||||
@@ -321,7 +316,7 @@ export function TimelapseEditorModal({
|
||||
<Scissors className="w-4 h-4" />
|
||||
<span>Trim</span>
|
||||
<span className="ml-auto">
|
||||
{formatTime(trimStart)} - {formatTime(trimEnd)} ({formatTime(trimmedDuration)})
|
||||
{formatMediaTime(trimStart)} - {formatMediaTime(trimEnd)} ({formatMediaTime(trimmedDuration)})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -435,7 +430,7 @@ export function TimelapseEditorModal({
|
||||
<div className="flex items-center gap-2 text-sm text-bambu-gray">
|
||||
<Gauge className="w-4 h-4" />
|
||||
<span>Speed</span>
|
||||
<span className="ml-auto">{speed}x (output: {formatTime(outputDuration)})</span>
|
||||
<span className="ml-auto">{speed}x (output: {formatMediaTime(outputDuration)})</span>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
{SPEED_OPTIONS.map((s) => (
|
||||
@@ -523,10 +518,10 @@ export function TimelapseEditorModal({
|
||||
{/* Summary */}
|
||||
<div className="p-3 bg-bambu-dark rounded-lg text-sm space-y-1">
|
||||
<p className="text-bambu-gray">
|
||||
<span className="text-white">Original:</span> {formatTime(duration)} @ {videoInfo?.width}x{videoInfo?.height}
|
||||
<span className="text-white">Original:</span> {formatMediaTime(duration)} @ {videoInfo?.width}x{videoInfo?.height}
|
||||
</p>
|
||||
<p className="text-bambu-gray">
|
||||
<span className="text-white">Output:</span> {formatTime(outputDuration)} @ {speed}x speed
|
||||
<span className="text-white">Output:</span> {formatMediaTime(outputDuration)} @ {speed}x speed
|
||||
{audioFile && ` + music overlay`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from 'react';
|
||||
import { X, Download, Film, Play, Pause, SkipBack, SkipForward, Pencil } from 'lucide-react';
|
||||
import { Button } from './Button';
|
||||
import { TimelapseEditorModal } from './TimelapseEditorModal';
|
||||
import { formatMediaTime } from '../utils/date';
|
||||
|
||||
interface TimelapseViewerProps {
|
||||
src: string;
|
||||
@@ -97,12 +98,6 @@ export function TimelapseViewer({
|
||||
video.currentTime = Math.min(duration, video.currentTime + 5);
|
||||
};
|
||||
|
||||
const formatTime = (time: number) => {
|
||||
const minutes = Math.floor(time / 60);
|
||||
const seconds = Math.floor(time % 60);
|
||||
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const handleDownload = () => {
|
||||
const link = document.createElement('a');
|
||||
link.href = src;
|
||||
@@ -154,7 +149,7 @@ export function TimelapseViewer({
|
||||
{/* Progress bar */}
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-bambu-gray w-12 text-right">
|
||||
{formatTime(currentTime)}
|
||||
{formatMediaTime(currentTime)}
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
@@ -168,7 +163,7 @@ export function TimelapseViewer({
|
||||
[&::-webkit-slider-thumb]:cursor-pointer"
|
||||
/>
|
||||
<span className="text-xs text-bambu-gray w-12">
|
||||
{formatTime(duration)}
|
||||
{formatMediaTime(duration)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@ import { AlertCircle, CheckCircle, ChevronDown, ChevronUp, Info, Loader2, X, XCi
|
||||
import { createContext, useCallback, useContext, useEffect, useRef, useState, type ReactNode } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { api } from '../api/client';
|
||||
import { formatFileSize } from '../utils/file';
|
||||
|
||||
type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading';
|
||||
|
||||
@@ -76,14 +77,6 @@ export function ToastProvider({ children }: { children: ReactNode }) {
|
||||
const dispatchToastId = 'background-dispatch';
|
||||
const lastDispatchSummaryRef = useRef<string | null>(null);
|
||||
|
||||
const formatBytes = useCallback((bytes: number) => {
|
||||
if (!Number.isFinite(bytes) || bytes < 0) return '0 B';
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
|
||||
}, []);
|
||||
|
||||
// Clean up all timeouts on unmount
|
||||
useEffect(() => {
|
||||
const timeouts = timeoutRefs.current;
|
||||
@@ -502,7 +495,7 @@ export function ToastProvider({ children }: { children: ReactNode }) {
|
||||
)}
|
||||
{job.status === 'processing' && typeof job.uploadBytes === 'number' && typeof job.uploadTotalBytes === 'number' && job.uploadTotalBytes > 0 && (
|
||||
<div className="text-[11px] text-bambu-gray truncate">
|
||||
{formatBytes(job.uploadBytes)} / {formatBytes(job.uploadTotalBytes)}
|
||||
{formatFileSize(job.uploadBytes)} / {formatFileSize(job.uploadTotalBytes)}
|
||||
{typeof job.uploadProgressPct === 'number' ? ` (${job.uploadProgressPct.toFixed(1)}%)` : ''}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -72,6 +72,7 @@ import { PrintModal } from '../components/PrintModal';
|
||||
import { PrinterInfoModal } from '../components/PrinterInfoModal';
|
||||
import { getGlobalTrayId } from '../utils/amsHelpers';
|
||||
import { getPrinterImage, getWifiStrength } from '../utils/printer';
|
||||
import { hexToColorName, parseFilamentColor, isLightColor } from '../utils/colors';
|
||||
|
||||
// Complete Bambu Lab filament color mapping by tray_id_name
|
||||
// Source: https://github.com/queengooborg/Bambu-Lab-RFID-Library
|
||||
@@ -335,69 +336,6 @@ function getBambuColorName(trayIdName: string | null | undefined): string | null
|
||||
return BAMBU_COLOR_CODE_FALLBACK[colorCode] || null;
|
||||
}
|
||||
|
||||
// Convert hex color to basic color name
|
||||
function hexToBasicColorName(hex: string | null | undefined): string {
|
||||
if (!hex || hex.length < 6) return 'Unknown';
|
||||
|
||||
// Parse RGB from hex (format: RRGGBBAA or RRGGBB)
|
||||
const r = parseInt(hex.substring(0, 2), 16);
|
||||
const g = parseInt(hex.substring(2, 4), 16);
|
||||
const b = parseInt(hex.substring(4, 6), 16);
|
||||
|
||||
// Calculate HSL for better color classification
|
||||
const max = Math.max(r, g, b) / 255;
|
||||
const min = Math.min(r, g, b) / 255;
|
||||
const l = (max + min) / 2;
|
||||
|
||||
let h = 0;
|
||||
let s = 0;
|
||||
|
||||
if (max !== min) {
|
||||
const d = max - min;
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||
|
||||
const rNorm = r / 255;
|
||||
const gNorm = g / 255;
|
||||
const bNorm = b / 255;
|
||||
|
||||
if (max === rNorm) {
|
||||
h = ((gNorm - bNorm) / d + (gNorm < bNorm ? 6 : 0)) / 6;
|
||||
} else if (max === gNorm) {
|
||||
h = ((bNorm - rNorm) / d + 2) / 6;
|
||||
} else {
|
||||
h = ((rNorm - gNorm) / d + 4) / 6;
|
||||
}
|
||||
}
|
||||
|
||||
// Convert to degrees
|
||||
h = h * 360;
|
||||
|
||||
// Classify by lightness first
|
||||
if (l < 0.15) return 'Black';
|
||||
if (l > 0.85) return 'White';
|
||||
|
||||
// Low saturation = gray
|
||||
if (s < 0.15) {
|
||||
if (l < 0.4) return 'Dark Gray';
|
||||
if (l > 0.6) return 'Light Gray';
|
||||
return 'Gray';
|
||||
}
|
||||
|
||||
// Classify by hue
|
||||
// Brown is orange/yellow hue with lower lightness
|
||||
if (h >= 15 && h < 45 && l < 0.45) return 'Brown';
|
||||
if (h >= 45 && h < 70 && l < 0.40) return 'Brown';
|
||||
|
||||
if (h < 15 || h >= 345) return 'Red';
|
||||
if (h < 45) return 'Orange';
|
||||
if (h < 70) return 'Yellow';
|
||||
if (h < 150) return 'Green';
|
||||
if (h < 200) return 'Cyan';
|
||||
if (h < 260) return 'Blue';
|
||||
if (h < 290) return 'Purple';
|
||||
return 'Pink';
|
||||
}
|
||||
|
||||
// Format K value with 3 decimal places, default to 0.020 if null
|
||||
function formatKValue(k: number | null | undefined): string {
|
||||
const value = k ?? 0.020;
|
||||
@@ -419,25 +357,6 @@ function NozzleBadge({ side }: { side: 'L' | 'R' }) {
|
||||
);
|
||||
}
|
||||
|
||||
// Parse RGBA hex to CSS color (skip if empty or all zeros)
|
||||
function parseFilamentColor(rgba: string): string | null {
|
||||
if (!rgba || rgba === '00000000' || rgba.length < 6) return null;
|
||||
const r = rgba.slice(0, 2);
|
||||
const g = rgba.slice(2, 4);
|
||||
const b = rgba.slice(4, 6);
|
||||
const a = rgba.length >= 8 ? parseInt(rgba.slice(6, 8), 16) / 255 : 1;
|
||||
if (a === 0) return null;
|
||||
return `rgba(${parseInt(r, 16)}, ${parseInt(g, 16)}, ${parseInt(b, 16)}, ${a})`;
|
||||
}
|
||||
|
||||
function isLightFilamentColor(rgba: string): boolean {
|
||||
if (!rgba || rgba.length < 6) return false;
|
||||
const r = parseInt(rgba.slice(0, 2), 16);
|
||||
const g = parseInt(rgba.slice(2, 4), 16);
|
||||
const b = parseInt(rgba.slice(4, 6), 16);
|
||||
return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.6;
|
||||
}
|
||||
|
||||
// Expand nozzle type codes to material names
|
||||
// Handles full text ("hardened_steel"), 2-char codes ("HS"/"HH"), and 4-char codes ("HS01")
|
||||
// Material mapping: 00=stainless steel, 01=hardened steel, 05=tungsten carbide
|
||||
@@ -831,7 +750,7 @@ function NozzleRackCard({ slots, filamentInfo }: { slots: import('../api/client'
|
||||
{rackSlots.map((slot, i) => {
|
||||
const isEmpty = !slot.nozzle_diameter && !slot.nozzle_type;
|
||||
const filamentBg = !isEmpty ? parseFilamentColor(slot.filament_color) : null;
|
||||
const lightBg = filamentBg ? isLightFilamentColor(slot.filament_color) : false;
|
||||
const lightBg = filamentBg ? isLightColor(slot.filament_color) : false;
|
||||
|
||||
return (
|
||||
<NozzleSlotHoverCard key={slot.id >= 0 ? slot.id : `empty-${i}`} slot={slot} index={i} filamentName={slot.filament_id ? filamentInfo?.[slot.filament_id]?.name : undefined}>
|
||||
@@ -2947,7 +2866,7 @@ function PrinterCard({
|
||||
const filamentData = tray?.tray_type ? {
|
||||
vendor: (isBambuLabSpool(tray) ? 'Bambu Lab' : 'Generic') as 'Bambu Lab' | 'Generic',
|
||||
profile: cloudInfo?.name || slotPreset?.preset_name || tray.tray_sub_brands || tray.tray_type,
|
||||
colorName: getBambuColorName(tray.tray_id_name) || hexToBasicColorName(tray.tray_color),
|
||||
colorName: getBambuColorName(tray.tray_id_name) || hexToColorName(tray.tray_color),
|
||||
colorHex: tray.tray_color || null,
|
||||
kFactor: formatKValue(tray.k),
|
||||
fillLevel: effectiveFill,
|
||||
@@ -3169,7 +3088,7 @@ function PrinterCard({
|
||||
const filamentData = tray?.tray_type ? {
|
||||
vendor: (isBambuLabSpool(tray) ? 'Bambu Lab' : 'Generic') as 'Bambu Lab' | 'Generic',
|
||||
profile: cloudInfo?.name || slotPreset?.preset_name || tray.tray_sub_brands || tray.tray_type,
|
||||
colorName: getBambuColorName(tray.tray_id_name) || hexToBasicColorName(tray.tray_color),
|
||||
colorName: getBambuColorName(tray.tray_id_name) || hexToColorName(tray.tray_color),
|
||||
colorHex: tray.tray_color || null,
|
||||
kFactor: formatKValue(tray.k),
|
||||
fillLevel: htEffectiveFill,
|
||||
@@ -3430,7 +3349,7 @@ function PrinterCard({
|
||||
const extFilamentData = {
|
||||
vendor: (isBambuLabSpool(extTray) ? 'Bambu Lab' : 'Generic') as 'Bambu Lab' | 'Generic',
|
||||
profile: extCloudInfo?.name || extSlotPreset?.preset_name || extTray.tray_sub_brands || extTray.tray_type || 'Unknown',
|
||||
colorName: getBambuColorName(extTray.tray_id_name) || hexToBasicColorName(extTray.tray_color),
|
||||
colorName: getBambuColorName(extTray.tray_id_name) || hexToColorName(extTray.tray_color),
|
||||
colorHex: extTray.tray_color || null,
|
||||
kFactor: formatKValue(extTray.k),
|
||||
fillLevel: extEffectiveFill,
|
||||
|
||||
@@ -32,7 +32,7 @@ import {
|
||||
Pencil,
|
||||
} from 'lucide-react';
|
||||
import { api } from '../api/client';
|
||||
import { parseUTCDate, formatDateOnly, formatDateTime, type TimeFormat } from '../utils/date';
|
||||
import { parseUTCDate, formatDateOnly, formatDateTime, formatDurationFromHours, type TimeFormat } from '../utils/date';
|
||||
import type { Archive, ProjectUpdate, BOMItem, BOMItemCreate, BOMItemUpdate } from '../api/client';
|
||||
import { Card, CardContent } from '../components/Card';
|
||||
import { Button } from '../components/Button';
|
||||
@@ -45,15 +45,6 @@ import { ConfirmModal } from '../components/ConfirmModal';
|
||||
import { ProjectModal } from './ProjectsPage';
|
||||
import { getCurrencySymbol } from '../utils/currency';
|
||||
|
||||
function formatDuration(hours: number): string {
|
||||
if (hours < 1) {
|
||||
return `${Math.round(hours * 60)}m`;
|
||||
}
|
||||
const h = Math.floor(hours);
|
||||
const m = Math.round((hours - h) * 60);
|
||||
return m > 0 ? `${h}h ${m}m` : `${h}h`;
|
||||
}
|
||||
|
||||
function formatFilament(grams: number): string {
|
||||
if (grams >= 1000) {
|
||||
return `${(grams / 1000).toFixed(2)}kg`;
|
||||
@@ -186,11 +177,6 @@ function PriorityBadge({ priority, t }: { priority: string; t: TFunction }) {
|
||||
);
|
||||
}
|
||||
|
||||
function formatDate(dateString: string | null): string {
|
||||
if (!dateString) return '';
|
||||
return formatDateOnly(dateString, { year: 'numeric', month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
function getDueDateStatus(dateString: string | null, t: TFunction): { color: string; label: string } | null {
|
||||
if (!dateString) return null;
|
||||
const dueDate = parseUTCDate(dateString);
|
||||
@@ -610,7 +596,7 @@ export function ProjectDetailPage() {
|
||||
<StatCard
|
||||
icon={Clock}
|
||||
label={t('projectDetail.stats.printTime')}
|
||||
value={formatDuration(stats.total_print_time_hours)}
|
||||
value={formatDurationFromHours(stats.total_print_time_hours)}
|
||||
color="text-yellow-400"
|
||||
/>
|
||||
<StatCard
|
||||
@@ -738,7 +724,7 @@ export function ProjectDetailPage() {
|
||||
{project.due_date && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4 text-bambu-gray" />
|
||||
<span className="text-sm text-white">{formatDate(project.due_date)}</span>
|
||||
<span className="text-sm text-white">{formatDateOnly(project.due_date, { year: 'numeric', month: 'short', day: 'numeric' })}</span>
|
||||
{getDueDateStatus(project.due_date, t) && (
|
||||
<span className={`text-xs ${getDueDateStatus(project.due_date, t)!.color}`}>
|
||||
({getDueDateStatus(project.due_date, t)!.label})
|
||||
|
||||
@@ -4,7 +4,6 @@ import { useOutletContext } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { SpoolBuddyOutletContext } from '../../components/spoolbuddy/SpoolBuddyLayout';
|
||||
import { spoolbuddyApi, type SpoolBuddyDevice, type DaemonUpdateCheck } from '../../api/client';
|
||||
|
||||
function formatUptime(seconds: number): string {
|
||||
if (seconds < 60) return `${seconds}s`;
|
||||
if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
|
||||
|
||||
@@ -83,6 +83,9 @@ export function hexToColorName(hex: string | null | undefined): string {
|
||||
if (l > 0.6) return 'Light Gray';
|
||||
return 'Gray';
|
||||
}
|
||||
// Brown is orange/yellow hue with lower lightness
|
||||
if (h >= 15 && h < 45 && l < 0.45) return 'Brown';
|
||||
if (h >= 45 && h < 70 && l < 0.40) return 'Brown';
|
||||
if (h < 15 || h >= 345) return 'Red';
|
||||
if (h < 45) return 'Orange';
|
||||
if (h < 70) return 'Yellow';
|
||||
@@ -125,3 +128,30 @@ export function resolveSpoolColorName(colorName: string | null, rgba: string | n
|
||||
// Return null (displayed as "-") — better than showing a code
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse an RGBA hex string (e.g., "FF0000FF") to a CSS rgba() color.
|
||||
* Returns null for empty, all-zero, or fully transparent colors.
|
||||
*/
|
||||
export function parseFilamentColor(rgba: string): string | null {
|
||||
if (!rgba || rgba === '00000000' || rgba.length < 6) return null;
|
||||
const r = rgba.slice(0, 2);
|
||||
const g = rgba.slice(2, 4);
|
||||
const b = rgba.slice(4, 6);
|
||||
const a = rgba.length >= 8 ? parseInt(rgba.slice(6, 8), 16) / 255 : 1;
|
||||
if (a === 0) return null;
|
||||
return `rgba(${parseInt(r, 16)}, ${parseInt(g, 16)}, ${parseInt(b, 16)}, ${a})`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a hex color is light (for choosing text contrast).
|
||||
* Uses luminance formula: 0.299*R + 0.587*G + 0.114*B.
|
||||
*/
|
||||
export function isLightColor(hex: string | null): boolean {
|
||||
if (!hex || hex.length < 6) return false;
|
||||
const cleanHex = hex.replace('#', '');
|
||||
const r = parseInt(cleanHex.slice(0, 2), 16);
|
||||
const g = parseInt(cleanHex.slice(2, 4), 16);
|
||||
const b = parseInt(cleanHex.slice(4, 6), 16);
|
||||
return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.6;
|
||||
}
|
||||
|
||||
@@ -31,31 +31,7 @@ export function getCurrencySymbol(currencyCode: string): string {
|
||||
return CURRENCY_SYMBOLS[currencyCode.toUpperCase()] || currencyCode;
|
||||
}
|
||||
|
||||
export const SUPPORTED_CURRENCIES = [
|
||||
{ code: 'USD', label: 'USD ($)' },
|
||||
{ code: 'EUR', label: 'EUR (€)' },
|
||||
{ code: 'GBP', label: 'GBP (£)' },
|
||||
{ code: 'CHF', label: 'CHF (Fr.)' },
|
||||
{ code: 'JPY', label: 'JPY (¥)' },
|
||||
{ code: 'CNY', label: 'CNY (¥)' },
|
||||
{ code: 'CAD', label: 'CAD ($)' },
|
||||
{ code: 'AUD', label: 'AUD ($)' },
|
||||
{ code: 'INR', label: 'INR (₹)' },
|
||||
{ code: 'HKD', label: 'HKD (HK$)' },
|
||||
{ code: 'KRW', label: 'KRW (₩)' },
|
||||
{ code: 'SEK', label: 'SEK (kr)' },
|
||||
{ code: 'NOK', label: 'NOK (kr)' },
|
||||
{ code: 'DKK', label: 'DKK (kr)' },
|
||||
{ code: 'PLN', label: 'PLN (zł)' },
|
||||
{ code: 'BRL', label: 'BRL (R$)' },
|
||||
{ code: 'TWD', label: 'TWD (NT$)' },
|
||||
{ code: 'SGD', label: 'SGD (S$)' },
|
||||
{ code: 'NZD', label: 'NZD (NZ$)' },
|
||||
{ code: 'MXN', label: 'MXN (MX$)' },
|
||||
{ code: 'CZK', label: 'CZK (Kč)' },
|
||||
{ code: 'THB', label: 'THB (฿)' },
|
||||
{ code: 'ZAR', label: 'ZAR (R)' },
|
||||
{ code: 'TRY', label: 'TRY (₺)' },
|
||||
{ code: 'RUB', label: 'RUB (₽)' },
|
||||
{ code: 'HUF', label: 'HUF (Ft)' },
|
||||
] as const;
|
||||
export const SUPPORTED_CURRENCIES = Object.entries(CURRENCY_SYMBOLS).map(([code, symbol]) => ({
|
||||
code,
|
||||
label: `${code} (${symbol})`,
|
||||
}));
|
||||
|
||||
+79
-121
@@ -13,22 +13,12 @@ export type DateFormat = 'system' | 'us' | 'eu' | 'iso';
|
||||
* Get the date input placeholder based on format setting.
|
||||
*/
|
||||
export function getDatePlaceholder(dateFormat: DateFormat = 'system'): string {
|
||||
switch (dateFormat) {
|
||||
case 'us':
|
||||
return 'MM/DD/YYYY';
|
||||
case 'eu':
|
||||
return 'DD/MM/YYYY';
|
||||
case 'iso':
|
||||
return 'YYYY-MM-DD';
|
||||
case 'system':
|
||||
default: {
|
||||
// Try to detect system format
|
||||
const testDate = new Date(2000, 11, 31); // Dec 31, 2000
|
||||
const formatted = testDate.toLocaleDateString();
|
||||
if (formatted.startsWith('12')) return 'MM/DD/YYYY';
|
||||
if (formatted.startsWith('31')) return 'DD/MM/YYYY';
|
||||
return 'YYYY-MM-DD';
|
||||
}
|
||||
const resolved = dateFormat === 'system' ? detectSystemDateFormat() : dateFormat;
|
||||
switch (resolved) {
|
||||
case 'us': return 'MM/DD/YYYY';
|
||||
case 'eu': return 'DD/MM/YYYY';
|
||||
case 'iso': return 'YYYY-MM-DD';
|
||||
default: return resolved satisfies never;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -98,7 +88,6 @@ export function formatTimeInput(date: Date, timeFormat: TimeFormat = 'system'):
|
||||
* Split a date string by common separators (/, ., -).
|
||||
*/
|
||||
function splitDateParts(value: string): string[] | null {
|
||||
// Try common separators: /, ., -
|
||||
for (const sep of ['/', '.', '-']) {
|
||||
const parts = value.split(sep);
|
||||
if (parts.length === 3) return parts;
|
||||
@@ -106,6 +95,13 @@ function splitDateParts(value: string): string[] | null {
|
||||
return null;
|
||||
}
|
||||
|
||||
function detectSystemDateFormat(): 'us' | 'eu' | 'iso' {
|
||||
const formatted = new Date(2000, 11, 31).toLocaleDateString();
|
||||
if (formatted.startsWith('12')) return 'us';
|
||||
if (formatted.startsWith('31')) return 'eu';
|
||||
return 'iso';
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse a date string based on format setting.
|
||||
* Returns null if parsing fails.
|
||||
@@ -114,77 +110,36 @@ function splitDateParts(value: string): string[] | null {
|
||||
export function parseDateInput(value: string, dateFormat: DateFormat = 'system'): Date | null {
|
||||
if (!value) return null;
|
||||
|
||||
const parts = splitDateParts(value);
|
||||
if (!parts) return null;
|
||||
|
||||
const resolved = dateFormat === 'system' ? detectSystemDateFormat() : dateFormat;
|
||||
let day: number, month: number, year: number;
|
||||
|
||||
try {
|
||||
switch (dateFormat) {
|
||||
case 'us': {
|
||||
// MM/DD/YYYY (also accepts . and - separators)
|
||||
const parts = splitDateParts(value);
|
||||
if (!parts) return null;
|
||||
month = parseInt(parts[0], 10);
|
||||
day = parseInt(parts[1], 10);
|
||||
year = parseInt(parts[2], 10);
|
||||
break;
|
||||
}
|
||||
case 'eu': {
|
||||
// DD/MM/YYYY (also accepts . and - separators)
|
||||
const parts = splitDateParts(value);
|
||||
if (!parts) return null;
|
||||
day = parseInt(parts[0], 10);
|
||||
month = parseInt(parts[1], 10);
|
||||
year = parseInt(parts[2], 10);
|
||||
break;
|
||||
}
|
||||
case 'iso': {
|
||||
// YYYY-MM-DD (also accepts . and / separators)
|
||||
const parts = splitDateParts(value);
|
||||
if (!parts) return null;
|
||||
year = parseInt(parts[0], 10);
|
||||
month = parseInt(parts[1], 10);
|
||||
day = parseInt(parts[2], 10);
|
||||
break;
|
||||
}
|
||||
case 'system':
|
||||
default: {
|
||||
// Detect system format and parse accordingly
|
||||
const testDate = new Date(2000, 11, 31); // Dec 31, 2000
|
||||
const formatted = testDate.toLocaleDateString();
|
||||
const parts = splitDateParts(value);
|
||||
|
||||
if (parts) {
|
||||
// Detect format from system locale
|
||||
if (formatted.startsWith('12')) {
|
||||
// US format: MM/DD/YYYY
|
||||
month = parseInt(parts[0], 10);
|
||||
day = parseInt(parts[1], 10);
|
||||
year = parseInt(parts[2], 10);
|
||||
} else if (formatted.startsWith('31')) {
|
||||
// EU format: DD/MM/YYYY
|
||||
day = parseInt(parts[0], 10);
|
||||
month = parseInt(parts[1], 10);
|
||||
year = parseInt(parts[2], 10);
|
||||
} else {
|
||||
// ISO format: YYYY-MM-DD
|
||||
year = parseInt(parts[0], 10);
|
||||
month = parseInt(parts[1], 10);
|
||||
day = parseInt(parts[2], 10);
|
||||
}
|
||||
break;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
if (isNaN(day) || isNaN(month) || isNaN(year)) return null;
|
||||
if (month < 1 || month > 12) return null;
|
||||
if (day < 1 || day > 31) return null;
|
||||
if (year < 1900 || year > 2100) return null;
|
||||
|
||||
return new Date(year, month - 1, day);
|
||||
} catch {
|
||||
return null;
|
||||
switch (resolved) {
|
||||
case 'us':
|
||||
month = parseInt(parts[0], 10);
|
||||
day = parseInt(parts[1], 10);
|
||||
year = parseInt(parts[2], 10);
|
||||
break;
|
||||
case 'eu':
|
||||
day = parseInt(parts[0], 10);
|
||||
month = parseInt(parts[1], 10);
|
||||
year = parseInt(parts[2], 10);
|
||||
break;
|
||||
case 'iso':
|
||||
year = parseInt(parts[0], 10);
|
||||
month = parseInt(parts[1], 10);
|
||||
day = parseInt(parts[2], 10);
|
||||
break;
|
||||
}
|
||||
|
||||
if (isNaN(day) || isNaN(month) || isNaN(year)) return null;
|
||||
if (month < 1 || month > 12) return null;
|
||||
if (day < 1 || day > 31) return null;
|
||||
if (year < 1900 || year > 2100) return null;
|
||||
|
||||
return new Date(year, month - 1, day);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -194,41 +149,22 @@ export function parseDateInput(value: string, dateFormat: DateFormat = 'system')
|
||||
export function parseTimeInput(value: string): { hours: number; minutes: number } | null {
|
||||
if (!value) return null;
|
||||
|
||||
try {
|
||||
const trimmed = value.trim().toUpperCase();
|
||||
const trimmed = value.trim();
|
||||
|
||||
// Check for 12h format with AM/PM
|
||||
const ampmMatch = trimmed.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)?$/i);
|
||||
if (ampmMatch) {
|
||||
let hours = parseInt(ampmMatch[1], 10);
|
||||
const minutes = parseInt(ampmMatch[2], 10);
|
||||
const ampm = ampmMatch[3]?.toUpperCase();
|
||||
const match = trimmed.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)?$/i);
|
||||
if (!match) return null;
|
||||
|
||||
if (ampm === 'PM' && hours < 12) hours += 12;
|
||||
if (ampm === 'AM' && hours === 12) hours = 0;
|
||||
let hours = parseInt(match[1], 10);
|
||||
const minutes = parseInt(match[2], 10);
|
||||
const ampm = match[3]?.toUpperCase();
|
||||
|
||||
if (hours < 0 || hours > 23) return null;
|
||||
if (minutes < 0 || minutes > 59) return null;
|
||||
if (ampm === 'PM' && hours < 12) hours += 12;
|
||||
if (ampm === 'AM' && hours === 12) hours = 0;
|
||||
|
||||
return { hours, minutes };
|
||||
}
|
||||
if (hours < 0 || hours > 23) return null;
|
||||
if (minutes < 0 || minutes > 59) return null;
|
||||
|
||||
// Try 24h format HH:MM
|
||||
const match24 = trimmed.match(/^(\d{1,2}):(\d{2})$/);
|
||||
if (match24) {
|
||||
const hours = parseInt(match24[1], 10);
|
||||
const minutes = parseInt(match24[2], 10);
|
||||
|
||||
if (hours < 0 || hours > 23) return null;
|
||||
if (minutes < 0 || minutes > 59) return null;
|
||||
|
||||
return { hours, minutes };
|
||||
}
|
||||
|
||||
return null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
return { hours, minutes };
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -387,21 +323,18 @@ export function formatTimeOnly(
|
||||
*/
|
||||
export function formatETA(
|
||||
remainingMinutes: number,
|
||||
timeFormat: 'system' | '12h' | '24h' = 'system',
|
||||
timeFormat: TimeFormat = 'system',
|
||||
t?: (key: string) => string
|
||||
): string {
|
||||
const now = new Date();
|
||||
const eta = new Date(now.getTime() + remainingMinutes * 60 * 1000);
|
||||
|
||||
const today = new Date();
|
||||
const today = new Date(now);
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const etaDay = new Date(eta);
|
||||
etaDay.setHours(0, 0, 0, 0);
|
||||
|
||||
const timeOptions: Intl.DateTimeFormatOptions = { hour: '2-digit', minute: '2-digit' };
|
||||
if (timeFormat === '12h') timeOptions.hour12 = true;
|
||||
else if (timeFormat === '24h') timeOptions.hour12 = false;
|
||||
|
||||
const timeOptions = applyTimeFormat({ hour: '2-digit', minute: '2-digit' }, timeFormat);
|
||||
const timeStr = eta.toLocaleTimeString([], timeOptions);
|
||||
const dayDiff = Math.floor((etaDay.getTime() - today.getTime()) / 86400000);
|
||||
|
||||
@@ -485,3 +418,28 @@ export function formatRelativeTime(
|
||||
// Older than 7 days
|
||||
return formatDateTime(dateStr, timeFormat);
|
||||
}
|
||||
|
||||
/**
|
||||
* Format seconds as MM:SS for media/video player display.
|
||||
*
|
||||
* @param seconds - Total seconds
|
||||
* @returns Formatted string (e.g., "2:05", "0:30")
|
||||
*/
|
||||
export function formatMediaTime(seconds: number): string {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format a duration given in hours to a human-readable string.
|
||||
*
|
||||
* @param hours - Duration in hours (e.g., 2.5)
|
||||
* @returns Formatted string (e.g., "2h 30m", "45m", "3h")
|
||||
*/
|
||||
export function formatDurationFromHours(hours: number): string {
|
||||
if (hours < 1) return `${Math.round(hours * 60)}m`;
|
||||
const h = Math.floor(hours);
|
||||
const m = Math.round((hours - h) * 60);
|
||||
return m > 0 ? `${h}h ${m}m` : `${h}h`;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
* @returns A formatted string with the appropriate unit (B, KB, MB, GB, or TB).
|
||||
*/
|
||||
export function formatFileSize(bytes: number): string {
|
||||
if (bytes === 0) return '0 B';
|
||||
if (!Number.isFinite(bytes) || bytes <= 0) return '0 B';
|
||||
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
const k = 1024;
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user