ocearo-ui
Version:
Ocean Robot UI: Sailing made smarter
1 lines • 6.69 kB
JavaScript
;(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[73],{69073:function(e,s,a){a.r(s);var l=a(57437),t=a(2265),n=a(63321);s.default=e=>{var s;let{onSave:a}=e,c=n.Z.getAll(),i=n.Z.getComputedSignalKUrl(),r=n.Z.getBoatsData(),[d,o]=(0,t.useState)(c),[m,h]=(0,t.useState)(c.useAuthentication||!!c.username||!!c.password),[x,u]=(0,t.useState)(c.signalKUrlSet||!1),[g,p]=(0,t.useState)(null),[b,j]=(0,t.useState)(!1),[N,v]=(0,t.useState)({visible:!1,message:""}),f=(0,t.useCallback)(e=>{j(JSON.stringify(e)!==JSON.stringify(c))},[c]);(0,t.useEffect)(()=>{(async()=>{let e=n.Z.getAll();o(e),u(e.signalKUrlSet||!1),h(e.useAuthentication||!!e.username||!!e.password),e.selectedBoat&&p(r.find(s=>s.name===e.selectedBoat)||null)})()},[r]);let k=e=>{let s={...d,...e};o(s),f(s);let l={...s};e.hasOwnProperty("signalKUrlSet")?!1===e.signalKUrlSet&&(l.signalkUrl=i,l.username="",l.password=""):x||e.hasOwnProperty("signalkUrl")?m||(l.username="",l.password=""):(l.signalkUrl=i,l.username="",l.password=""),n.Z.saveConfig(l),null==a||a(l),j(!1),v({visible:!0,message:"Settings saved automatically"}),setTimeout(()=>v({visible:!1,message:""}),2e3)};return(0,l.jsxs)("div",{className:"p-4 text-white",children:[(0,l.jsxs)("h1",{className:"text-2xl font-bold mb-4 flex justify-between items-center",children:["Ocearo Configuration",N.visible&&(0,l.jsx)("span",{className:"text-sm font-normal bg-green-500 text-white px-3 py-1 rounded-full animate-pulse",children:N.message})]}),(0,l.jsxs)("div",{className:"space-y-4",children:[(0,l.jsxs)("div",{className:"space-y-4",children:[(0,l.jsx)("h2",{className:"text-xl font-semibold",children:"Connection Settings"}),(0,l.jsx)("div",{children:(0,l.jsxs)("label",{className:"flex items-center",children:[(0,l.jsx)("input",{type:"checkbox",className:"mr-2",checked:x,onChange:e=>{u(e.target.checked),k({signalKUrlSet:e.target.checked})}}),"Set SignalK URL",!x&&(0,l.jsxs)("span",{className:"ml-2",children:["(",i,")"]})]})}),x&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)("div",{children:[(0,l.jsx)("label",{className:"block font-medium mb-1",children:"SignalK Server URL:"}),(0,l.jsx)("input",{type:"text",className:"border p-2 w-full text-black rounded",value:d.signalkUrl||"",onChange:e=>k({signalkUrl:e.target.value})})]}),(0,l.jsx)("div",{children:(0,l.jsxs)("label",{className:"flex items-center",children:[(0,l.jsx)("input",{type:"checkbox",className:"mr-2",checked:m,onChange:e=>{h(e.target.checked),k({useAuthentication:e.target.checked})}}),"Use Authentication"]})}),m&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)("div",{children:[(0,l.jsx)("label",{className:"block font-medium mb-1",children:"Username:"}),(0,l.jsx)("input",{type:"text",className:"border p-2 w-full text-black rounded",value:d.username||"",onChange:e=>k({username:e.target.value})})]}),(0,l.jsxs)("div",{children:[(0,l.jsx)("label",{className:"block font-medium mb-1",children:"Password:"}),(0,l.jsx)("input",{type:"password",className:"border p-2 w-full text-black rounded",value:d.password||"",onChange:e=>k({password:e.target.value})})]})]})]})]}),(0,l.jsxs)("div",{className:"space-y-4",children:[(0,l.jsx)("h2",{className:"text-xl font-semibold",children:"Vessel Settings"}),(0,l.jsxs)("div",{children:[(0,l.jsx)("label",{className:"block font-medium mb-1",children:"Select Vessel:"}),(0,l.jsxs)("select",{className:"border p-2 w-full text-black rounded",value:d.selectedBoat||"",onChange:e=>{let s=e.target.value;p(r.find(e=>e.name===s)||null),k({selectedBoat:s})},children:[(0,l.jsx)("option",{value:"",children:"-- Select a Vessel --"}),r.map(e=>(0,l.jsx)("option",{value:e.name,children:e.name},e.name))]})]}),(0,l.jsxs)("div",{children:[(0,l.jsx)("label",{className:"block font-medium mb-1",children:"Vessel Color:"}),(0,l.jsx)("input",{type:"color",className:"w-full h-10 rounded",value:d.primaryColor||"#000000",onChange:e=>k({primaryColor:e.target.value})})]}),(0,l.jsx)("div",{children:(0,l.jsxs)("label",{className:"flex items-center",children:[(0,l.jsx)("input",{type:"checkbox",className:"mr-2",checked:d.metallicEffect||!1,onChange:e=>k({metallicEffect:e.target.checked})}),"Enable Metallic Effect"]})})]}),(0,l.jsxs)("div",{className:"space-y-4",children:[(0,l.jsx)("h2",{className:"text-xl font-semibold",children:"Display Settings"}),(0,l.jsx)("div",{children:(0,l.jsxs)("label",{className:"flex items-center text-base",children:[(0,l.jsx)("input",{type:"checkbox",className:"mr-3 h-5 w-5",checked:d.compassNorthUp||!1,onChange:e=>k({compassNorthUp:e.target.checked})}),(0,l.jsxs)("span",{children:["Compass Mode: North at Top",(0,l.jsx)("div",{className:"text-sm text-gray-400",children:d.compassNorthUp?"North at top (land navigation style)":"North at bottom (marine navigation style)"})]})]})})]}),(0,l.jsxs)("div",{className:"space-y-4",children:[(0,l.jsx)("h2",{className:"text-xl font-semibold",children:"Advanced Settings"}),(0,l.jsx)("div",{children:(0,l.jsxs)("label",{className:"flex items-center",children:[(0,l.jsx)("input",{type:"checkbox",className:"mr-2",checked:d.debugMode||!1,onChange:e=>k({debugMode:e.target.checked,signalkUrl:i})}),"Debug Mode"]})}),(0,l.jsxs)("div",{className:"space-y-2",children:[(0,l.jsxs)("label",{className:"block text-sm font-medium",children:["AIS Length Scaling Factor",(0,l.jsx)("div",{className:"text-xs text-gray-500",children:"Controls the scaling of AIS boats on the map (0.1 - 2.0)"})]}),(0,l.jsxs)("div",{className:"flex items-center space-x-4",children:[(0,l.jsx)("span",{className:"text-sm",children:"0.1"}),(0,l.jsx)("input",{type:"range",className:"w-full h-10 appearance-none bg-gray-700 rounded-lg outline-none cursor-pointer",style:{WebkitAppearance:"none",appearance:"none",height:"20px",background:"linear-gradient(to right, #1E3A8A, #3B82F6)",borderRadius:"10px"},min:"0.1",max:"2.0",step:"0.1",value:d.aisLengthScalingFactor||.7,onChange:e=>k({aisLengthScalingFactor:parseFloat(e.target.value)})}),(0,l.jsx)("span",{className:"text-sm",children:"2.0"}),(0,l.jsx)("span",{className:"text-base font-semibold bg-blue-500 px-3 py-1 rounded-lg min-w-[3.5rem] text-center",children:d.aisLengthScalingFactor||.7})]})]}),g&&d.debugMode&&(0,l.jsxs)("div",{className:"space-y-2 text-sm text-gray-400",children:[(0,l.jsxs)("div",{children:["3D Model: ",g.modelPath]}),(0,l.jsxs)("div",{children:["Features: ",null===(s=g.capabilities)||void 0===s?void 0:s.join(", ")]})]})]}),(0,l.jsx)("div",{className:"flex space-x-4 pt-4",children:(0,l.jsx)("button",{onClick:()=>{let e=n.Z.getDefaultConfig();o(e),h(!1),e.useAuthentication=!1,u(!1),e.signalKUrlSet=!1,n.Z.saveConfig(e),j(!1)},className:"bg-oRed text-white px-4 py-2 rounded hover:bg-red-600",children:"Reset Configuration"})})]})]})}}}]);