ocearo-ui
Version:
Ocean Robot UI: 3D visualization dashboard for signalk
1 lines • 1.87 kB
JavaScript
(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,97069,e=>{"use strict";var t=e.i(43476),i=e.i(67561),a=e.i(46991),l=e.i(71645),n=e.i(85709);e.i(85269);var s=e.i(22831);let o="bg-oBlue";e.s(["default",0,()=>{let{t:e}=(0,s.useTranslation)(),{nightMode:r}=(0,i.useOcearoContext)(),[u,d]=(0,l.useState)(240),c=(0,n.useSignalKPath)("environment.depth.belowKeel"),h=(0,n.useSignalKPath)("environment.depth.belowTransducer"),m=(0,l.useMemo)(()=>c??h??null,[c,h]);(0,l.useEffect)(()=>{let e=()=>{let e=window.innerHeight;d(e<640?Math.min(.25*e,240):Math.min(.35*e,240))};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);let v=(0,l.useMemo)(()=>null===m?0:Math.min(m/50*100,100),[m]),p=(0,l.useMemo)(()=>null===m?o:m<3?"bg-oRed":m<5?"bg-oYellow":o,[m]),b=r?"text-oNight":"text-hud-main",g=(0,l.useCallback)(e=>null===e?"--":`${(0,a.convertDepthUnit)(e)} ${(0,a.getDepthUnitLabel)()}`,[]);return(0,t.jsxs)("div",{className:"flex flex-col items-center group p-3 transition-all duration-300",children:[(0,t.jsx)("div",{className:`text-xs font-black uppercase tracking-[0.2em] mb-4 opacity-40 group-hover:opacity-100 transition-opacity ${b}`,children:e("indicators.depth")}),(0,t.jsx)(()=>(0,t.jsx)("div",{className:"w-1.5 bg-hud-elevated rounded-full overflow-hidden mb-2 relative",style:{height:u},role:"progressbar","aria-valuenow":m,"aria-valuemin":"0","aria-valuemax":50,"aria-label":`${e("indicators.waterDepth")}: ${g(m)}`,children:(0,t.jsx)("div",{className:`absolute bottom-0 left-0 w-full transition-all duration-1000 ease-in-out ${p} ${m<3?"animate-pulse":""}`,style:{height:`${v}%`}})}),{}),(0,t.jsx)("div",{className:`text-xs font-black tracking-widest mt-2 ${b} ${m<3?"text-oRed animate-soft-pulse":""}`,children:g(m)})]})}])},14774,e=>{e.n(e.i(97069))}]);