\n v{version}\n
\n \n );\n};\n\nexport default SidebarMenu;\n","export default __webpack_public_path__ + \"static/media/waterlinked-logo.d373ac60.png\";","import fetch from 'unfetch';\nimport { SiteContents, SlScenarioStatus } from './types';\n\ninterface fetchProps {\n method?: string;\n headers?: HeadersInit;\n body?: object | string;\n token?: string;\n scope?: string;\n raw?: boolean;\n}\n\n/**\n * Fetches details about a site, identified by siteId\n * @param siteId - string id for the site in question\n * @returns JSON | Promise rejection\n */\nconst SiteDetailsFetcher = async (siteId: string, auth: any) => {\n const token = await auth.getAccessTokenSilently();\n const url = `/api/v1/site/${siteId}`\n const response = fetch(\n url,\n {\n headers: {\n Authorization: `Bearer ${token}`\n }\n }\n )\n .then(res => {\n if (res.ok) {\n return res.json()\n } else {\n const error = new Error(res.statusText)\n return Promise.reject(error)\n }\n })\n .then(data => data)\n return response\n}\n\n/**\n * Retrieves all analytic views for the current user\n * @param auth Auth instance\n * @returns Array - list of presets with details for each one\n */\nconst GetAnalyticViews = async (auth: any) => {\n const token = await auth.getAccessTokenSilently();\n const url = `/api/v1/analytics/views`\n const response = fetch(\n url,\n {\n headers: {\n Authorization: `Bearer ${token}`\n }\n }\n )\n .then(res => {\n if (res.ok) {\n return res.json()\n } else {\n const error = new Error(res.statusText)\n return Promise.reject(error)\n }\n })\n .then(data => data)\n return response\n}\n\n/**\n * Saves the currently active view/preset for the current user\n * @param auth Auth instance\n * @returns Array - list of presets with details for each one\n */\nconst SaveAnalyticView = async (viewData: any, auth: any) => {\n const token = await auth.getAccessTokenSilently();\n let method = 'POST'\n let url = `/api/v1/analytics/views`\n /*\n * A fair assumption: If the ID is set, we'll update via PUT.\n * Otherwise use POST to create a new view.\n */\n if (viewData?.node_key && viewData?.node_key !== null) {\n url = `/api/v1/analytics/views/${viewData.node_key}`\n method = 'PUT'\n }\n const response = fetch(\n url,\n {\n method: method,\n headers: {\n Authorization: `Bearer ${token}`,\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(viewData)\n }\n )\n .then(res => {\n if (res.ok) {\n return res.json()\n } else {\n const error = new Error(res.statusText)\n return Promise.reject(error)\n }\n })\n .then(data => data)\n return response\n}\n\n/**\n * Deletes the currently active view/preset for the current user\n * @param auth Auth instance\n * @returns void - 204 response code if delete was successful\n */\nconst DeleteAnalyticView = async (viewData: any, auth: any) => {\n const token = await auth.getAccessTokenSilently();\n let method = 'DELETE'\n let url = `/api/v1/analytics/views/${viewData?.node_key}`\n const response = fetch(\n url,\n {\n method: method,\n headers: {\n Authorization: `Bearer ${token}`\n }\n }\n )\n .then(res => {\n if (res.ok) {\n return res.ok\n } else {\n const error = new Error(res.statusText)\n return Promise.reject(error)\n }\n })\n .then(data => data)\n return response\n}\n\nconst SensorDetailsFetcher = async (siteId: string, auth: any) => {\n const token = await auth.getAccessTokenSilently();\n const url = `/api/v1/sensor/site/${siteId}`\n const response = fetch(\n url,\n {\n headers: {\n Authorization: `Bearer ${token}`\n }\n }\n )\n .then(res => {\n if (res.ok) {\n return res.json()\n } else {\n const error = new Error(res.statusText)\n return Promise.reject(error)\n }\n })\n .then(data => data)\n return response\n}\n\nconst TimelineDataFetcher = async (params: any) => {\n fetch(params.url)\n .then(async (res) => {\n if (res.ok) {\n return await res.json()\n } else {\n const error = new Error(res.statusText)\n return Promise.reject(error)\n }\n })\n}\n\nconst AuthFetcher = async (url: string, getAccessTokenSilently: () => Promise\n Cloud\n {siteStatus ? (\n \n
\n {sites.find((site) => site.node_key === siteStore.getSiteKey())?.name || 'Select site'}\n
\n }\n >\n \n );\n});\nexport default SiteSelect;\n","import { createMedia } from \"@artsy/fresnel\"\nimport { observer } from \"mobx-react\"\nimport { Link, useLocation } from \"react-router-dom\"\nimport { Sticky, Menu, Icon, Image, Header, Popup } from \"semantic-ui-react\"\nimport useStore from \"./Store/Store\"\nimport logo from './images/waterlinked-logo.png';\nimport SiteSelect from './Components/UIElements/SiteSelect';\n\ninterface TopMenuProps {\n toggleMenu: (event: React.MouseEvent\n The component stopped working. If this failure happens again, please record the steps you have taken which\n triggered the failure and notify Water Linked with the details below.\n
\n{error && error.toString()}
\n \n
\n }\n on=\"click\"\n position=\"right center\"\n />\n );\n};\n\nexport { FactoryResetButton };\n","import { observer } from 'mobx-react';\nimport { useState } from 'react';\nimport { Button } from 'semantic-ui-react'\nimport { AuthFetcher } from '../lib/fetch';\nimport useStore from '../Store/Store';\nimport './LEDButton.css'\n\nconst BlinkLED = (getAccessTokenSilently: () => PromiseAre you sure? Stored data will be lost.
\nSystem will automatically reboot after button is pressed.
\n \n {isSuccess && (\n\n Success. System is now restarting. Please refresh window by clicking:\n
- \n {items.map((d: any) => (\n
- {d} \n ))}\n
\n Changes \n
\n )}\n \n Known issues \n
\n )}\n \n {releases.map((d, i) => (\n
\n);\n\nexport default ReleaseNotes;\n","import { observer } from 'mobx-react';\nimport React, { useMemo } from 'react';\nimport { Icon, Message, List, Label, Button, Popup } from 'semantic-ui-react';\nimport useSWR from 'swr';\n\nimport { AuthFetcher } from '../lib/fetch';\nimport useStore from '../Store/Store';\n\ninterface iconWithTitleProps {\n name: any;\n color: string;\n title: string;\n}\n\nconst IconWithTitle = ({ name, color, title }: iconWithTitleProps) => (\n \n - \n
\n \n \n \n
\n- \n
\n \n \n
\n );\n};\n\ninterface AboutPageProps {\n showKnowledge?: boolean;\n}\n\nconst About = observer(({ showKnowledge }: AboutPageProps) => {\n const { appStore } = useStore();\n appStore.setBreadcrumb('About');\n return (\n Hardware
\nWATER LINKED CAGESENSE
\n\nSoftware
\nVersion information
\nBrowser compatibility
\nThe Web GUI has been tested and verified to work with the following browsers:
\n- \n
Release notes
\n\n {/* \n * The image of the type of sensor this graph is of.\n * Please note that this is the type of sensor, not the measurement type\n * which may be confusing. Consider removing.\n */}\n
\n {graphDataError && (\n \n \n {formatSensorName(sensor)}\n \n {/* Sensor meta data */}\n
\n \n Reading: {sensor.measurement_type}\n Location: {sensor?.cage_name || 'N/A'}\n ID: {sensor?.sensor_id || 'N/A'}\n Depth: {sensor?.sensor_location_meta?.min_depth}-{sensor?.sensor_location_meta?.max_depth}m\n
\n\n {/* Mutate invalidates the cache for the graph URL, making sure a new fetch is performed */}\n mutate(url)}\n className='p-1 me-2'\n color='blue'\n size='tiny'\n >\n analyticsStore.toggleSensor(sensor, sensor.measurement_type, false)}\n className='p-1 me-1'\n color='blue'\n size='tiny'\n >\n
\n \n {\n sensorsWithoutData.length > 0\n ?\n \n \n \n \n {\n return [value.toFixed(2), name]\n }}\n contentStyle={{\n backgroundColor: darkMode === false ? '#eee' : '#333',\n color: darkMode === false ? '#222' : '#fff',\n fontWeight: 'bold'\n }}\n />\n \n \n \n :\n \n \n }\n\n
\n )\n})\n\nexport default GroupedByTypeGraph","import { observer } from 'mobx-react';\nimport { useContext, useState } from 'react';\nimport { Button, Icon, Input, Loader, Popup } from 'semantic-ui-react';\nimport NotyfContext from '../Components/NotyfContext';\nimport { AuthFetcher } from '../lib/fetch';\nimport useStore from '../Store/Store';\n\ninterface CsvDownloadProps {\n sensors: string[];\n to: number;\n from: number;\n}\n\nconst CsvDownload = observer(({ sensors, to, from }: CsvDownloadProps) => {\n const { authStore } = useStore();\n const [name, setName] = useState\n {/*\n * Image of the type of sensor this graph is of.\n * Note: There's a diff between sensor type and measurement\n * we have images of each sensor type, but not each measurement.\n * Grouped graphs only know about that kind of measurement we're looking at, \n * not the type of sensor it is until the date is later iterated.\n * That makes it somewhat error prone when only checking against the measurement type.\n * Instead, we just select the first sensor (if present) and use the sensor_type from\n * that, which indicates what all readings are for. \n * Not very elegant, but is error proof.\n */}\n
\n {\n timelineData?.length > 0 && viewData.sensors?.length > 0\n ?\n \n \n {measurementType} readings for {(sensors?.length)} selected sensor(s)\n \n
\n \n {/* Format the type and all sensor IDs that have been selected/grouped in this graph */}\n Reading: {measurementType} | Sensor(s): {timelineData.map((e: any) => e.name).join(', ')}\n
\nDownload Sensor Report
\n\n \n {/* Buttons related to graph options, group graphs and download reports */}\n \n \n toggleLiveData()}\n className={viewData.graph_settings.live === true ? 'text-dark' : 'text-light'}\n >\n analyticsStore.toggleDisplayGroupedGraph()}\n active={viewData.graph_settings.grouped_graphs === true}\n color={viewData.graph_settings.grouped_graphs === true ? 'green' : 'grey'}\n className={viewData.graph_settings.grouped_graphs === true ? 'text-dark' : 'text-light'}\n >\n \n \n {\n dataPointOptions.map((value: number, key: any) => {\n return (\n analyticsStore.setDataPoints(value)}\n active={viewData.graph_settings.data_points === value}\n >\n {value}\n \n }\n />\n )\n })\n }\n \n \n {/* Options related to the size of each graph square/size */}\n \n \n {\n graphDisplayOptions.map((value: string, key: number) => {\n return (\n analyticsStore.setGraphSize(value)}\n active={viewData.graph_settings.graph_size === value.toString()}\n >\n {value}\n \n }\n />\n )\n })\n }\n \n \n {/* The date range chooser */}\n \n setFocusedInput(focusedInput)}\n displayFormat=\"DD/MM/YYYY\"\n minimumNights={0}\n isOutsideRange={(date) => date.isBefore(minDate, 'day') || date.isAfter(maxDate, 'day')}\n renderCalendarInfo={RenderDatePresets}\n />\n \n \n {\n \n {viewData.graph_settings.live === true\n ?\n <>\n
\n )\n})\n\nexport default GraphOptions","// Contains the analytic views saved for a user\nimport { observer } from \"mobx-react\"\nimport { useState } from \"react\"\nimport { Button, Icon, Input, Popup, Select } from \"semantic-ui-react\"\nimport { DeleteAnalyticView, SaveAnalyticView } from \"../../lib/fetch\"\nimport moment from \"moment\"\nimport useStore from \"../../Store/Store\"\nimport MessageBox from \"../Message\"\n\nconst localStorageViewIndexKey = 'cagesense-view-index'\n\nconst ViewManager = observer(({ views, setAllViews, setActiveViewIndex, activeViewIndex }: { views: any, setAllViews: any, setActiveViewIndex: any, activeViewIndex: any }) => {\n const [showSaveDialogue, setShowSaveDialogue] = useState(false)\n const [saved, setSaved] = useState(false)\n const [loading, setLoading] = useState(false)\n const [error, setError] = useState('')\n const { analyticsStore, authStore } = useStore()\n\n // Get the currently active view\n let currentView = analyticsStore.getViewData()\n let viewIndex = 0\n let existingViewIndex = localStorage.getItem(localStorageViewIndexKey)\n // Overwrite the default userPreferences if one is found from local storage\n if (existingViewIndex) {\n viewIndex = JSON.parse(existingViewIndex)\n setActiveViewIndex(viewIndex)\n }\n\n const saveView = () => {\n setLoading(true)\n SaveAnalyticView(currentView, authStore)\n .then(response => {\n // Update the view of the selected index, then send back to update all views in parent\n views[activeViewIndex] = response\n setAllViews(views)\n // Indicate that the change has been saved\n setSaved(true)\n setShowSaveDialogue(false)\n // Change the \"saved\" status back to false after some seconds\n setTimeout(() => {\n setSaved(false)\n }, 2000)\n })\n .catch((e: any) => {\n setError(e.toString())\n })\n .finally(() => {\n setLoading(false)\n })\n }\n const deleteView = () => {\n // Provide a confirmation dialogue before deleting\n if (window.confirm(`Are you sure you want to remove ${currentView?.name}?`)) {\n setLoading(true)\n DeleteAnalyticView(currentView, authStore)\n .then(success => {\n if (success === true) {\n // We need to filter out the deleted view and return the list to parent\n views = views.splice(activeViewIndex, 1)\n // If there are no views left after deletion, add an empty preset to the list\n if (!views.length || views.length === 0) {\n views.push({\n node_key: null,\n name: 'New view',\n graph_settings: {\n live: true,\n grouped_graphs: false,\n data_points: 100,\n date_from: moment(new Date()).startOf('day').subtract(new Date().getTimezoneOffset(), 'minute').unix(),\n date_to: moment(new Date()).endOf('day').subtract(new Date().getTimezoneOffset(), 'minute').unix(),\n graph_size: 'medium',\n },\n sensors: []\n })\n }\n setAllViews(views)\n // After deletion, set the selected view to the first in the list\n setActiveViewIndex(0)\n // Indicate that deletion is done\n setSaved(true)\n setShowSaveDialogue(false)\n // Change the \"saved\" status back to false after some seconds\n setTimeout(() => {\n setSaved(false)\n }, 2000)\n }\n })\n .catch((e: any) => {\n setError(e.toString())\n })\n .finally(() => {\n setLoading(false)\n })\n }\n }\n\n let options = views?.map((view: any, index: number) => {\n return {\n key: `view-option-${index}`,\n value: index,\n text: `${view?.name ? view.name : 'Unnamed view'} ${view?.sensors?.length ? ` - ${view.sensors.length} sensor(s)` : ''}`\n }\n })\n return (\n \n Graph options\n
\n \n Graph points\n
\n \n Graph sizes\n
\n \n Date (from
\n \n {views?.length > 0\n ?\n <>\n {\n // This calls the parent set method, changing the index to the selected view/preset\n setActiveViewIndex(value)\n // Save the setting to local storage for later use\n localStorage.setItem(localStorageViewIndexKey, JSON.stringify(value))\n }}\n />\n {\n analyticsStore.setViewDataName(v?.value)\n }}\n />\n \n setShowSaveDialogue(false)}\n color='grey'\n >\n Cancel\n \n saveView()}\n color='black'\n disabled={loading === true || !currentView?.name || currentView?.name?.length < 1}\n >\n Save\n \n \n {currentView?.node_key !== null &&\n deleteView()}\n color='red'\n disabled={loading === true}\n className=\"ms-2\"\n >\n Delete\n setShowSaveDialogue(true)}\n color='black'\n >\n {/* Change the button text depending on whether it's an existing view or new */}\n {currentView?.node_key !== null ? 'Edit' : 'Save'}\n \n\n \n }\n\n
\n )\n})\n\nexport default ViewManager","import '../css/Analytics.css';\nimport { observer } from 'mobx-react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { Accordion, Button, Checkbox, Dropdown, Grid, Icon, Label, Menu, Message, Popup, Segment, Sticky } from \"semantic-ui-react\"\nimport { GetAnalyticViews, SiteDetailsFetcher } from '../lib/fetch'\nimport useStore from \"../Store/Store\"\nimport moment from 'moment';\n// The component that displays a single graph for one sensor's reading\nimport SingleGraph from '../Components/Analytics/SingleGraph'\n// The component that displays grouped graphs for one type of sensor reading (i.e oxygen)\nimport GroupedByTypeGraph from '../Components/Analytics/GroupedByTypeGraph'\n// The graph option segment with things like selection for data points and grid toggle\nimport GraphOptions from '../Components/Analytics/GraphOptions';\nimport MessageBox from '../Components/Message';\nimport ViewManager from '../Components/Analytics/ViewManager';\n\n/**\n * Computed result of the relation between sizes in text form and that corresponding grid column width\n * @param graph_size - string that should be small, medium or large\n * @returns number - Width to use for the grid columns\n */\nconst computedGraphSize = (graph_size: string) => {\n const size = graph_size.toLowerCase()\n switch (size) {\n case 'small':\n return 4\n case 'medium':\n return 8\n case 'large':\n return 16\n default:\n return 8\n }\n}\n\n/**\n * Iterates each sensor in a sensor location (assigned or unassigned) and displays their respective measurements\n */\nconst SensorLocationItems = observer(({ location, locationIndex, cageName }: { location: any, locationIndex: number, cageName: string }) => {\n const { analyticsStore } = useStore()\n return (\n \n No saved views\n
\n }\n {showSaveDialogue ?\n (\n <>\n \n \n {location.name}\n \n {location?.sensors?.map((sensor: any, sensorIndex: number) => {\n return (\n -1 ? 'bg-dark-green' : ''}`\n }\n >\n
\n )\n })}\n \n )\n})\n/**\n * Renders the sidebar menu with all sensors for the currently selected site,\n * grouped by what cage they belong to.\n * @param siteData - Array of site and cage data with sensor locations\n * @param viewData - Object holding info on the current active view and the settings in that\n * @returns ReactElement\n */\nconst SidebarMenu = observer(({ siteData, viewData }: { siteData: any, viewData: any }) => {\n const { analyticsStore } = useStore()\n const [activeIndex, setActiveIndex] = useState\n
\n {/* Measurement types for each sensor */}\n \n
\n \n {sensor.name} - ID: {sensor.sensor_id}\n
\n \n {location.name}\n
\n \n {/* The measurement order may be different, so sort them alphabetically so they display uniformly */}\n {sensor?.measurements?.sort((a: any, b: any) => (a < b ? -1 : 1))?.map((measurement: string, measurementIndex: number) => {\n return (\n {measurement}}\n className='text-capitalize me-2 text-sm'\n onChange={(e, data) => analyticsStore.toggleSensor(sensor, measurement, data.checked, location.meta, cageName)}\n toggle\n checked={analyticsStore.isSensorAndMeasurementSelected(sensor.sensor_id, sensor.sensor_type, measurement) > -1}\n />\n )\n })}\n
\n \n There are no cages setup on your site. You can setup some from the overview map.\n
\n )\n }\n})\n\n/**\n * Traverses the site data and counts all sensors across all cages and returns a total number\n * @param siteData Array of cages, sensor locations and sensors\n * @returns number - The accumulated number of sensors available for a site\n */\nconst numberOfSensors = (siteData: any) => {\n let sensorCount = 0\n siteData.cages.map((cage: any, index: number) => {\n return siteData.cages[index].sensor_locations = cage?.sensor_locations?.filter((f: any) => {\n sensorCount += Number.parseInt(f?.sensors?.length) || 0\n return f.sensors.length\n })\n })\n return sensorCount\n}\n\nconst Analytics2 = observer((props: any) => {\n const { siteStore, analyticsStore, authStore } = useStore()\n const [siteData, setSiteData] = useState\n \n \n analyticsStore.toggleDarkMode()}\n />\n analyticsStore.toggleGraphGrid()}\n />\n\n \n \n Analytics for {siteData?.name}\n {viewData?.sensors?.length > 0 && (\n \n {viewData?.sensors?.length} {viewData?.sensors?.length > 1 ? 'sensors' : 'sensor'} selected\n \n }\n content=\"Displays the number of selected measurements from the list on the right\"\n />\n )}\n
\n \n
\n {viewData?.sensors?.length > 0\n ?\n <>\n \n
\n }\n \n )\n})\n\nexport default Analytics2","import { OXYGEN_SENSOR_TYPE, SALINITY_SENSOR_TYPE, TILT_SENSOR_TYPE, TURBIDITY_SENSOR_TYPE } from './types';\n\nconst hexColors = {\n green: '#2B9C6A',\n teal: '#00B5AD',\n yellow: '#FFC83B',\n red: '#D4484B',\n pink: '#ff40c9',\n orange: '#ea8843',\n sunglow: '#ffc83b',\n xanadu: '#6b7d5f',\n gold: '#8e7f49',\n cgBlue: '#337793',\n maximumBlue: '#48b8d0',\n middleBlue: '#59bed4',\n darkBlue: '#0E1A2B',\n menuBlue: '#162840',\n glue: '#1d3556',\n grey: '#ccc',\n};\n\nconst getColor = (sensorType: string, hex?: boolean) => {\n let color: string = '#000000';\n switch (sensorType) {\n case OXYGEN_SENSOR_TYPE:\n color = '#2B9C6A';\n\n break;\n case SALINITY_SENSOR_TYPE:\n color = '#FFFFFF';\n\n break;\n case TILT_SENSOR_TYPE:\n color = '#666';\n\n break;\n case TURBIDITY_SENSOR_TYPE:\n color = '#FFE21F';\n\n break;\n }\n return color;\n};\n\nconst getColorForSeverity = (level: number) => {\n switch (level) {\n default:\n return hexColors.grey;\n case 0:\n return '#2b9c6a';\n case 1:\n return hexColors.yellow;\n case 2:\n return hexColors.red;\n }\n};\n\nconst graphSecondaryColors: string[] = ['#FF976f', '#FF8CD7', '#FFD700', '#00FF00', '#00FFFF'];\nconst getGraphColor = function (index: number): string {\n if (index < graphSecondaryColors.length) {\n return graphSecondaryColors[index];\n }\n return getGraphColor(index - graphSecondaryColors.length);\n};\n\nexport default hexColors;\nexport { getColor, getGraphColor, getColorForSeverity };\n","import { extend, ReactThreeFiber } from '@react-three/fiber';\nimport * as THREE from 'three';\n\nconst vertexShader = `varying vec3 vColor;\n\nvarying float vY;\n\nvoid main()\n{\n vec4 worldPosition = modelMatrix * vec4(position, 1.0);\n vY = worldPosition.y;\n gl_Position = projectionMatrix * viewMatrix * worldPosition;\n}`;\n\nconst fragmentShader = `precision mediump float;\n\nconst vec4 okColor=vec4(0.169,0.612,0.416,0.9);\nconst vec4 warningColor=vec4(1.,0.784,0.231,0.9);\nconst vec4 criticalColor=vec4(0.831,0.282,0.294,0.9);\nconst vec4 inactiveColor=vec4(0.8,0.8,0.8,1.0);\n\nvarying float vY;\n\nuniform float depth1;\nuniform float depth2;\nuniform float depth3;\nuniform float depth4;\n\nuniform float maxDepth;\n\nuniform int depth1Severity;\nuniform int depth2Severity;\nuniform int depth3Severity;\nuniform int depth4Severity;\n\n\nuniform float transitionHeight;\n\n\nvec4 pickColor(in int status);\n\nvec4 pickColor(in int status){\n vec4 color = inactiveColor;\n if (status == 0){\n color = okColor;\n }else if (status == 1){\n color = warningColor;\n }else if (status == 2){\n color = criticalColor;\n }else{\n color = inactiveColor;\n }\n return(color);\n}\n\nfloat findTransitionStart(in float firstDepth, in float secondDepth,in float transitionHeight);\n\nfloat findTransitionStart(in float firstDepth, in float secondDepth,in float transitionHeight){\n return (-((firstDepth+secondDepth)/2.0)+ (transitionHeight/2.0));\n}\n\nfloat findTransitionEnd(in float firstDepth, in float secondDepth,in float transitionHeight);\n\nfloat findTransitionEnd(in float firstDepth, in float secondDepth,in float transitionHeight){\n return (-((firstDepth+secondDepth) / 2.0) - (transitionHeight / 2.0));\n}\n\n\nvoid main()\n{ \n float trans1Start = findTransitionStart(depth1,depth2,transitionHeight);\n float trans1End = findTransitionEnd(depth1,depth2,transitionHeight);\n\n float trans2Start = findTransitionStart(depth2,depth3,transitionHeight);\n float trans2End = findTransitionEnd(depth2,depth3,transitionHeight);\n\n float trans3Start = findTransitionStart(depth3,depth4,transitionHeight);\n float trans3End = findTransitionEnd(depth3,depth4,transitionHeight);\n\n if (vY > trans1Start) {\n gl_FragColor = pickColor(depth1Severity);\n } else if (vY > trans1End){\n float p = ((trans1End - vY) /transitionHeight);\n gl_FragColor = mix(pickColor(depth2Severity), pickColor(depth1Severity), p);\n } else if (vY > trans2Start) {\n gl_FragColor = pickColor(depth2Severity);\n } else if (vY > trans2End) {\n float p = ((trans2End - vY) / (transitionHeight));\n gl_FragColor = mix(pickColor(depth3Severity), pickColor(depth2Severity), p);\n } else if (vY > trans3Start) {\n gl_FragColor = pickColor(depth3Severity);\n } else if (vY > trans3End) {\n float p = ((trans3End - vY) / (transitionHeight));\n gl_FragColor = mix(pickColor(depth4Severity), pickColor(depth3Severity), p);\n } else if (vY > -maxDepth){\n gl_FragColor = pickColor(depth4Severity);\n } else {\n gl_FragColor = inactiveColor;\n }\n}`;\n\nexport class Cage4DepthMaterial extends THREE.ShaderMaterial {\n constructor() {\n super({\n uniforms: {\n depth1: { value: 5.0 },\n depth2: { value: 15.0 },\n depth3: { value: 25.0 },\n depth4: { value: 35.0 },\n maxDepth: { value: 45.0 },\n\n transitionHeight: { value: 1.0 },\n\n hovered: { value: false },\n\n depth1Severity: { value: -1 },\n depth2Severity: { value: -1 },\n depth3Severity: { value: -1 },\n depth4Severity: { value: -1 },\n },\n transparent: true,\n\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n });\n }\n\n get depth1() {\n return this.uniforms.depth1.value;\n }\n\n set depth1(v) {\n this.uniforms.depth1.value = v;\n }\n\n get depth2() {\n return this.uniforms.depth2.value;\n }\n\n set depth2(v) {\n this.uniforms.depth2.value = v;\n }\n\n get depth3() {\n return this.uniforms.depth3.value;\n }\n\n set depth3(v) {\n this.uniforms.depth3.value = v;\n }\n\n get depth4() {\n return this.uniforms.depth4.value;\n }\n\n set depth4(v) {\n this.uniforms.depth4.value = v;\n }\n\n get depth1Severity() {\n return this.uniforms.depth1Severity.value;\n }\n\n set depth1Severity(v) {\n this.uniforms.depth1Severity.value = v;\n }\n\n get depth2Severity() {\n return this.uniforms.depth2Severity.value;\n }\n\n set depth2Severity(v) {\n this.uniforms.depth2Severity.value = v;\n }\n\n get depth3Severity() {\n return this.uniforms.depth3Severity.value;\n }\n\n set depth3Severity(v) {\n this.uniforms.depth3Severity.value = v;\n }\n\n get depth4Severity() {\n return this.uniforms.depth4Severity.value;\n }\n\n set depth4Severity(v) {\n this.uniforms.depth4Severity.value = v;\n }\n get hovered() {\n return this.uniforms.hovered.value;\n }\n\n set hovered(v) {\n this.uniforms.hovered.value = v;\n }\n\n get transitionHeight() {\n return this.uniforms.transitionHeight.value;\n }\n\n set transitionHeight(v) {\n this.uniforms.transitionHeight.value = v;\n }\n}\n\ndeclare global {\n namespace JSX {\n interface IntrinsicElements {\n cage4DepthMaterial: ReactThreeFiber.Object3DNode\n
\n );\n }}\n />\n \n {cageData.name.length > 2 ? cageData.name : `${cageData.node_kind} ${cageData.name}`}\n
\n \n\n {sinkerTube && (\n \n \n \n \n N\n \n \n \n
\n );\n};\n\nexport default CompassRose;\n","import { ResizeObserver } from '@juggle/resize-observer';\nimport { OrbitControls, Sky } from '@react-three/drei';\nimport { Canvas, ThreeEvent, useFrame } from '@react-three/fiber';\nimport { observer } from 'mobx-react';\n\nimport { Fragment, Suspense, useRef, useState } from 'react';\nimport THREE, { MathUtils, Spherical, Vector3 } from 'three';\nimport Cage from '../Components/3D/Objects/Cage';\nimport FeedBarge from '../Components/3D/Objects/FeedBarge';\nimport HeightPlane from '../Components/3D/Objects/HeightPlane';\nimport OceanPlane from '../Components/3D/Objects/OceanPlane';\nimport AlarmDisplay from '../Components/UIElements/AlarmDisplay';\nimport CompassRose from '../Components/UIElements/CompassRose';\nimport { AuthFetcher } from '../lib/fetch';\nimport { CageContents, SiteContents } from '../lib/types';\nimport useStore from '../Store/Store';\n\ninterface SiteViewProps {\n site: SiteContents | undefined;\n setMenuRightVisible: (r: boolean) => void;\n setPicked: (a: any) => void;\n nodeClicked: (a: string) => void;\n showAlarms: boolean;\n showColors?: boolean;\n}\n\nconst SiteView = observer(\n ({ site, setPicked, nodeClicked, setMenuRightVisible, showAlarms, showColors }: SiteViewProps) => {\n const { authStore } = useStore();\n const virtualCamera = useRefAnlegg: {SiteName}
\n\n {\n setActiveSegment(segment.key);\n }}\n className={'circle_segment ' + (active ? 'active' : '')}\n >
\n \n );\n })}\n\n \n
\n );\n};\n\nexport function BucketSampler() {\n // https://github.com/d3fc/d3fc-sample/blob/master/src/bucket.js\n var bucketSize = 10;\n\n var bucket: any = (data: any) =>\n bucketSize <= 1\n ? data.map((d: any) => [d])\n : range(0, Math.ceil(data.length / bucketSize)).map((i) => data.slice(i * bucketSize, (i + 1) * bucketSize));\n\n bucket.bucketSize = function (x: number) {\n if (!arguments.length) {\n return bucketSize;\n }\n\n bucketSize = x;\n return bucket;\n };\n return bucket;\n}\n\nfunction killInf(val: number) {\n // Remove negative infinity from the graph\n if (val < -1e9) {\n return NaN;\n }\n return val;\n}\n\nfunction downsample(\n payload: number[][],\n x_scale: number,\n y_scale: number,\n x_offset: number,\n y_offset: number,\n url: any\n) {\n // Downsample to 1 entry pr pixel in chart (if needed)\n //var dataPrPixel = payload.length / this.width // Downsample to number of pixels available (responsive)\n let dataPrPixel = payload.length / 500; // Downsample to fixed number of entries\n\n let s0: number[] = payload.map(function (d) {\n return d[0];\n });\n let s1: number[] = payload.map(function (d) {\n return d[1];\n });\n let s2: number[] = payload.map(function (d) {\n return d[2];\n });\n let s3: number[] = payload.map(function (d) {\n return d[3];\n });\n\n if (dataPrPixel > 1) {\n // Downsample with BucketSampler\n let bs = BucketSampler();\n let buckets = bs.bucketSize(dataPrPixel);\n\n payload = buckets(payload).map(function (d: any) {\n return Math.max(...d);\n });\n } else {\n // Use data without downsampling\n dataPrPixel = 1;\n }\n\n let geometry: any = [[], [], [], []];\n for (let index = 0; index < payload.length; index++) {\n const px = index * dataPrPixel * x_scale + x_offset;\n y_scale = 1;\n geometry[0][index] = { px: px, py: y_offset + y_scale * killInf(s0[index]) };\n geometry[1][index] = { px: px, py: y_offset + y_scale * killInf(s1[index]) };\n geometry[2][index] = { px: px, py: y_offset + y_scale * killInf(s2[index]) };\n geometry[3][index] = { px: px, py: y_offset + y_scale * killInf(s3[index]) };\n }\n return geometry;\n}\n\ntype CorrelatorGraphProps = {\n defYMax?: number;\n defYMin?: number;\n url: string;\n};\n\ninterface GraphData {\n px: number;\n py: number;\n}\n\nconst CorrelatorGraphManual = observer(({ url, defYMax, defYMin }: CorrelatorGraphProps) => {\n const { authStore } = useStore();\n const [lGraph, setLgraph] = useState\n
\n \n
\n Please make sure the sensor is in water and showing the behaviour you want assistance with.
\n\n Clicking the button below initiates a \n
\n \n \n ))}\n
\n \n ))}\n \n
\n \n ))}\n \n
Cage Details
\nEnter details for the cage.
\nName
\nPosition (East / West)
\nPosition (North / South)
\nCage Circumference
\nSensor Locations
\n\n \n \n \n Save\n \n \n \n { }}\n />\n \n \n (\n \n { setSiteName(data.value); updateSite() }}\n value={site?.name}\n fluid\n />\n \n )\n },\n {\n menuItem: 'Cages',\n render: () => (\n \n {cages.map((c: CageContents) => {\n return (\n \n )\n })}\n \n \n )\n },\n {\n menuItem: 'Feeding Barge',\n render: () => (feedingBarge && (\n \n \n )\n )\n }\n ]\n }\n />\n {/*
)\n}\n\ninterface EditFeedingBargeProps {\n feedingBarge: Feeding_Barge;\n setFeedingBarge: (fb: Feeding_Barge) => void;\n}\n\nconst EditFeedingBarge = ({ feedingBarge, setFeedingBarge }: EditFeedingBargeProps) => {\n const [x, setX] = useStateSite Name
\n\n showSaveSiteDialog()}\n className=\"w-100 mt-3\"\n >\n Save\n \n
*/}\n Feeding Barge
\nChange the position and orientation of the feeding barge.
\nPosition (East / West)
\nPosition (North / South)
\nRotation (Degrees)
\nLongitude
\nLatitude
\nNew cage
\nEnter details for the cage.
\nCage Depth\n
\n \n }\n content={`Enter the depth your cage is situated at. Valid values are from 1 metres and above.`}\n />\n\n Cage Layers\n
\n \n }\n content={`Defines how many layers (vertically) your cage consists of. Valid values are between 1 and ${maxNumberOfLayers}.`}\n />\n \n \n \n Cage Layers\n
\n
\n }\n content={`Enable if each layer in your cage is divided into segments. Valid values are between 1 and ${maxNumberOfSegments}.`}\n />\n \n Cage Layers\n
\n \n shouldAddSinkerTube(data.checked ? data.checked : false)}\n className=\"me-1 mt-1\"\n />\n Sinker tube\n shouldAddShieldingSkirt(data.checked ? data.checked : false)}\n className=\"ms-2 me-1\"\n />\n Lice skirt\n
\n }\n \n \n {!showNewSite ? `Sites` : 'Add new site'}\n
\n\n \n {position && (\n \n \n \n \n Site name *\n setSiteName(d.value)}\n value={siteName}\n placeholder=\"Enter the name for this site\"\n >\n \n \n \n \n \n Gateway ID *\n setTopsideId(d.value)}\n value={topsideId}\n >\n \n \n \n )}\n {!position && (\n \n \n \n Click anywhere on the map to place your site\n
\n }\n content=\"Click anywhere on the map to place the site. You can scroll and zoom the map to make placement easier.\"\n position=\"top center\"\n />\n \n No sites found
\n\n \n \n \n GoToSite(siteKey, siteName)}\n verticalAlign=\"middle\"\n className=\"p-0\"\n >\n \n
\n );\n});\ninterface CoordinatesProps {\n setPosition: (ll: LatLng) => void;\n}\n\nconst Coordinates = ({ setPosition }: CoordinatesProps) => {\n useMapEvents({\n click(e) {\n // console.log(e.latlng)\n setPosition(e.latlng);\n },\n });\n return {site.name}
\nSomething went wrong
;\n // }\n const GoToSite = (siteID: string, siteName: string) => {\n // setCurrentSiteKey(siteID);\n if (!disableGotoSite) {\n siteStore.setSiteKey(siteID);\n }\n //history.push('/dashboard/' + siteID);\n };\n const siteKeys: SiteMeta[] = [];\n if (data) {\n siteKeys.push(...data);\n }\n\n return (\n \n Unable to fetch sites. \n
\n )}\n {data && {error.toString()}
\nCageSense™ Privacy Policy
\n\n This privacy statement details how CageSense™ collects and uses visitor information.
\n\n The statement contains information that you are entitled to when collecting information from CageSense™, and general information about how we treat personal data.\n
\nThe legal owner of the website is the processing officer for the processing of personal data. The treatment basis is the consent of the individual, unless otherwise specified.
\nCageSense™ uses two sorts of cookies, for login and managing authentication and web analytics for improving the user experience and understanding user patterns.
\nLogin and Authentication
\n\n Login and authentication to CageSense™ is handled via Auth0, a third-party, and the information received is subject\n to the
Web Analytics and Cookies
\n\n As an important part of the effort to create a user-friendly website, we look at the user pattern of those who login to CageSense™.\n
\n\n To analyze the information, we use the Google Analytics analysis tool.\n Google Analytics uses cookies (small text files that the site stores on the user's computer), which registers the users' IP address and provides information about the individual user's online movements.\n
\n\n Examples of what the statistics give us answers to are:\n
- \n
- how many people visit different pages \n
- how long the visit lasts \n
- what websites users come from \n
- what OS and browsers are used \n
None of the cookies allow us to link information about your use of the site to you as an individual.
\n\n The information collected by Google Analytics is stored on Google servers in the U.S.\n The information received is subject to the Google Privacy Policy.\n
\n\n An IP address is defined as a personal information because it can be traced back to a particular hardware and thus to an individual. We use Google Analytics's tracking code to anonymize the IP address before the information is stored and processed by Google. Thus, the stored IP address can not be used to identify the individual user.\n
\nSupport
\n\n Do you have any questions? Contact us at post@waterlinked.com
\n\n \n Apply\n {isSubmitting &&
\n \n );\n});\n\nfunction ManualSet() {\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [isSubmitSuccess, setIsSubmitSuccess] = useState(false);\n const [submitError, setSubmitError] = useState('');\n const [currentTime, setCurrentTime] = useState(new Date());\n\n useEffect(() => {\n let secTimer = setInterval(() => {\n setCurrentTime(new Date());\n }, 1000);\n\n return () => clearInterval(secTimer);\n }, []);\n\n const onSubmit = async () => {\n setIsSubmitting(true);\n setIsSubmitSuccess(false);\n setSubmitError('');\n const now = new Date().toISOString();\n const result = await SetManual(now);\n if (!result.ok) {\n const body = await result.text();\n console.log('submit error', body);\n setSubmitError(body);\n setIsSubmitSuccess(false);\n } else {\n console.log('submit success');\n setIsSubmitSuccess(true);\n setSubmitError('');\n setTimeout(() => {\n setIsSubmitSuccess(false);\n }, 5000);\n }\n setIsSubmitting(false);\n refreshNTP();\n };\n\n return (\n <>\n {submitError}
}\n\n \n Set current computer time\n {isSubmitting &&
\n \n );\n}\n\ntype NTPConfigProps = {\n ntp_server: string;\n ntp_enabled: boolean;\n};\n\nconst NTPConfig = observer(({ ntp_server, ntp_enabled }: NTPConfigProps) => {\n const [ntpEnabled, setNTPEnabled] = useState(ntp_enabled);\n\n const handleSubmit = (e: React.FormEvent{submitError}
}\n\n
\n );\n});\n\nexport { Splash };\n","import { Icon } from 'semantic-ui-react';\nimport useStore from '../../Store/Store';\nimport { observer } from 'mobx-react';\nconst StepIndicators = observer(() => {\n const { firstTimeSetupStore } = useStore();\n const currentStep = firstTimeSetupStore.getCurrentStep();\n const allSteps = firstTimeSetupStore.getSteps();\n const stepCircles = allSteps.map((step: any, stepIndex: any) => {\n return (\n \n
\n Welcome {firstName}!
\n\n {\n firstTimeSetupStore.setSetupStarted(true);\n }}\n >\n Start\n \n
\n {user.local.first_time_setup_complete === true && (\n This wizard will guide you through setting up your CageSense™. Click to get started.
\n\n You have already completed this.\n
{stepCircles}
;\n});\n\nexport { StepIndicators };\n","/**\n * Displays the content for the current step of the welcome screen\n *\n * @param allSteps {Array} - Information about all steps and their status\n * @param currentStep {Number} - The current step parameter in the setup process\n * @returns mixed {Jsx.element}\n */\nconst StepContent = ({ allSteps, currentStep }: any) => {\n const content = allSteps[currentStep];\n return (\n \n
\n );\n};\n\nexport { StepContent };\n","import { useEffect } from 'react';\nimport { Grid } from 'semantic-ui-react';\nimport { Message } from 'semantic-ui-react';\nimport useStore from '../../Store/Store';\nconst Checklist = () => {\n const { firstTimeSetupStore } = useStore();\n useEffect(() => {\n const currentStep = firstTimeSetupStore.getCurrentStep();\n firstTimeSetupStore.setStepComplete(currentStep);\n });\n\n return (\n {content.heading}
\n{content.text}
\n \n ![\"Step](\"/images/first-time-setup-intro.jpg\")
\n \n \n \n ![Checklist item](\"/images/cagesense-gateway.svg\"\n)
\n 1 x CageSense™ Gateway\n \n \n ![Checklist item](\"/images/receiver-cable.svg\"\n)
\n 2 x CageSense™ Receiver cables\n \n \n \n\n ![Checklist item](\"/images/sensors.svg\"\n)
\n 1 x CageSense™ Sensor\n \n \n\n ![Checklist item](\"/images/sensor-charge-kit.svg\"\n)
\n 1 x CageSense™ Sensor Charge Kit\n \n \n ![Checklist item](\"/images/ethernet-cable.svg\"\n)
\n 1 x Ethernet Cable\n \n \n ![Checklist item](\"/images/computer.svg\"\n)
\n A computer with Internet connection\n \n \n \n Make sure the CageSense™ Gateway is connected to power before continuing.\n \n
\n );\n};\n\nexport default Checklist;\n","// This step is performed locally on the Gateway, hence no Auth is required.\nimport { observer } from 'mobx-react';\nimport { Grid, Icon, Message } from 'semantic-ui-react';\nimport useStore from '../../Store/Store';\nimport useSWR from 'swr';\nimport { AuthFetcher } from '../../lib/fetch';\n\nconst UserGatewaysSelect = ({ gateways, siteStore, firstTimeSetupStore }: any) => {\n const sites = siteStore.getSites()\n const selectGateway = (gatewayName: string) => {\n // Find the site ID from the sites\n firstTimeSetupStore.setActiveGatewayId(gatewayName)\n const siteConnectedToGateway = sites.filter((e: any) => e.topside_id.toLowerCase() === gatewayName.toLowerCase())\n\n // We've found an exact match (there can't be more than 1)\n if (siteConnectedToGateway.length === 1) {\n siteStore.setSiteKey(siteConnectedToGateway[0].node_key)\n }\n }\n /**\n * Computational getter for what site a gateway belongs to. Uses the siteStore and iterates\n * each entry for the provided gatewayName\n * \n * @param gatewayName \n */\n const siteName = (gatewayName: string) => {\n const results = sites.filter((e: any) => e.topside_id.toLowerCase() === gatewayName.toLowerCase())\n // There must be exactly one site that is connected to this gateway\n return results.length === 1 ? results[0].name : `Not connected to a site (${results.length})`\n }\n const radioOptions = gateways.map((gatewayName: string, index: number) => {\n const activeGatewayId = firstTimeSetupStore.getActiveGatewayId();\n return (\n \n Make sure you have the minimum required components before you begin:
\n\n 1 x CageSense™ Gateway\n \n \n 2 x CageSense™ Receiver cables\n \n \n 1 x CageSense™ Sensor\n \n \n 1 x CageSense™ Sensor Charge Kit\n \n \n 1 x Ethernet Cable\n \n \n A computer with Internet connection\n \n \n {activeGatewayId === gatewayName &&
\n \n {siteName(gatewayName)}\n
\n \n \n );\n });\n return (\n \n
\n );\n});\n\nexport default SetupInternet;\n","import { observer } from 'mobx-react';\nimport useStore from '../../Store/Store';\nimport { AuthFetcher } from '../../lib/fetch';\nimport useSWR from 'swr';\nimport LeafletOverviewMap from '../OverviewMap/LeafletOverviewMap';\n\nconst SiteSetup = observer(() => {\n const { authStore, firstTimeSetupStore, siteStore } = useStore();\n let activeGatewayId = firstTimeSetupStore.getActiveGatewayId();\n const currentStep = firstTimeSetupStore.getCurrentStep();\n let sites: any = [];\n const { data, error } = useSWR('/api/v1/site', (url) => AuthFetcher(url, authStore.getTokenFunction()), {\n revalidateIfStale: true,\n revalidateOnReconnect: true,\n });\n sites = data;\n\n /**\n* Computational getter for what site a gateway belongs to. Uses the siteStore and iterates\n* each entry for the provided gatewayName\n* \n* @param gatewayName \n*/\n const siteName = (gatewayName: string | null) => {\n if (gatewayName) {\n const results = sites.filter((e: any) => e.topside_id.toLowerCase() === gatewayName.toLowerCase())\n // There must be exactly one site that is connected to this gateway\n return results.length === 1 ? results[0].name : `Not connected to a site (${results.length})`\n }\n }\n if (error) {\n console.error('Unable to fetch sites');\n } else {\n // Site setup is complete if there are at least 1 site\n if (sites && sites?.length > 0) {\n // Find the siteID for the selected gateway\n const results = sites.filter((e: any) => e.topside_id.toLowerCase() === activeGatewayId?.toLowerCase())\n if (results.length === 1) {\n // Set the step to complete\n siteStore.setSiteKey(results[0].node_key);\n firstTimeSetupStore.setStepComplete(currentStep);\n }\n }\n }\n\n return (\n Connect the included network cable to the CageSense™ Gateway and to the internet.
\nSelect your gateway from the list below. We'll check automatically for an internet connection.
\nCannot find your gateway? Please contact support@waterlinked.com for help.
\n )}\n {activeGatewayId && (\n // Gateway info exists, so we can display this info\n\n \n \n Status: {gatewayStatus?.topside_id || `${activeGatewayId} wasn't found.`}\n \n \n \n \n \n \n \n {cloudConnection === true && internetConnection === true\n ? `Looks good! \"${activeGatewayId}\" is connected to the Internet and Water Linked.`\n : `Seems like \"${activeGatewayId}\" is not connected to the Internet and/or Water Linked.`}\n \n \n \n
\n )}\n \n
\n \n
\n \n
\n );\n});\n\nexport default SiteSetup;\n","import { AuthFetcher } from '../../lib/fetch';\nimport { observer } from 'mobx-react';\nimport useSWR from 'swr';\nimport useStore from '../../Store/Store';\nimport { Grid, GridColumn, Icon, Message } from 'semantic-ui-react';\n\nconst ReceiverStatuses = ({ statuses }: { statuses: any }) => {\n const res = statuses?.map((e: any, key: number) => {\n return (\n \n Next, we need to know where your site is. Use the map and the \"Add site\" button below to add one. If a site's\n already been setup, it will be set as the active one.\n
\n\n
\n \n Gateway: {activeGatewayId}\n
\n \n Site: {siteName(activeGatewayId)}\n
\n \n The map can be zoomed and dragged.\n
\nReceiver {e.pos}
\n\n \n \n = 2 ? 'grey' : 'red'}>\n Status \n \n
\n );\n});\n\nexport default SetupReceivers;\n","// Placeholders acts as content replacements until content is ready (usually until something has finished loading)\nimport { Grid, Placeholder, Segment, SemanticWIDTHS } from 'semantic-ui-react';\n\nconst Placeholders = ({\n numberOfColumns,\n numberOfCards,\n}: {\n numberOfColumns: SemanticWIDTHS;\n numberOfCards: number;\n}) => {\n return (\n \n Connect at least {minimumNumberOfReceivers} receiver cables (long cables) to the CageSense™ Gateway by aligning the connector head to the receiver ports and twisting the cap to lock them into place.\n
\n\n Connections may take a minute, and is checked for automatically.\n
\n\n {numberOfReceivers >= 2 ? (\n
\n \n
\n ) : (\n \n
\n )}\n \n \n setShowHelp(!showHelp)}\n size=\"tiny\"\n circular\n color=\"grey\"\n className=\"p-1 ms-2\"\n >\n Show connection help\n \n
\n \n \n {editMode ? 'Update' : 'Add'} {selectedDevice.sensor_type} sensor (ID: {selectedDevice.serial_number})\n
\nWe highly suggest you name the sensor after where they'll be placed, the type of sensor and depth.
\n\n For example:\n \n
\n \n\n \n saveSensor(selectedDevice, sensorName)}\n disabled={saving || !sensorName?.length}\n loading={saving}\n />\n
\n \n );\n};\n\n/**\n * Displays a help message about troubleshooting sensor connections\n *\n * @param method - The state method which'll update help message toggle\n * @param value - The current value of the message toggle\n * @returns \n Charge pads require sufficient power to charge a sensor. If connected to a USB port, there may not be enough\n power. Please use a mobile charger with at least 1 ampere output or higher.\n
\n\n 
\n {deviceName}\n
\n \n
\n
\n
\n
{filteredDevices?.length > 0 ? filteredDevices.length : ''} Sensors found (Bluetooth)
\n\n \n \n \n \n {/* Lists existing sensors already added, if any */}\n
\n
\n );\n }\n});\n\nexport default SensorSetup;\n","import { Button, Icon, Popup } from 'semantic-ui-react';\nimport { useAuth0 } from '@auth0/auth0-react';\nimport useStore from '../../Store/Store';\nimport appInfo from '../../../package.json';\nimport { AuthFetcher } from '../../lib/fetch';\nimport { useContext, useState } from 'react';\nimport NotyfContext from '../NotyfContext';\nimport { mutate } from 'swr';\nimport { useHistory } from 'react-router-dom';\n\nconst Footer = () => {\n const { appStore, authStore, firstTimeSetupStore } = useStore();\n const { logout } = useAuth0();\n const history = useHistory();\n const notify = useContext(NotyfContext);\n const [saving, setSaving] = useState(false);\n // Display CageSense Local if the user isn't logged in\n let versionInfo = appStore.getUser().auth0 ? 'CageSense Cloud' : 'CageSense Local';\n let userInfo = appStore.getUser();\n versionInfo += ` ${appInfo.version}`;\n\n const completeSetup = async () => {\n if (!window.confirm('Are you sure you want to skip the first time setup? (You can start it later from the side menu).')) {\n return\n }\n\n if (!userInfo.local) {\n notify.error('There is no user information. Please contact support@waterlinked.com for assistance.');\n return\n }\n\n userInfo.local.first_time_setup_complete = true;\n setSaving(true);\n\n const results = await AuthFetcher('/api/v1/organization/setup', authStore.getTokenFunction(), {\n method: 'PUT',\n body: userInfo.local,\n raw: true,\n });\n\n if (results.ok) {\n // Remove the active gateway ID\n firstTimeSetupStore.setActiveGatewayId('');\n // Update the user object to include the newly set first time setup status\n appStore.setUser(userInfo.local, userInfo.auth0);\n mutate('/api/v1/organization/setup');\n /**\n * Redirect after a short wait, to accomodate saving and redirect issues\n * Trying to do this using useEffect results in all kinds of weird behaviour.\n */\n setTimeout(() => {\n // Set page breadcrumb and redirect\n appStore.setBreadcrumb('Overview Map')\n history.replace('/');\n }, 500)\n } else {\n notify.error('Updating failed, unfortunately');\n userInfo.local.first_time_setup_complete = false;\n setSaving(false);\n }\n };\n\n return (\n \n );\n};\n\nexport default Footer;\n","import '../css/Welcome.css';\nimport { Icon, Step, Grid, Button } from 'semantic-ui-react';\nimport { observer } from 'mobx-react';\nimport { Splash } from '../Components/Welcome/Splash';\nimport { StepIndicators } from '../Components/Welcome/StepIndicators';\nimport { StepContent } from '../Components/Welcome/StepContent';\nimport { stepInterface } from '../lib/types';\n\n// Components for each step\nimport Checklist from '../Components/Welcome/Checklist';\n// Connect Gateway to internet\nimport SetupInternet from '../Components/Welcome/SetupInternet';\n// Add sites\nimport SetupSite from '../Components/Welcome/SetupSite';\n// Connect receivers\nimport SetupReceivers from '../Components/Welcome/SetupReceivers';\n// Add sensors\nimport SensorSetup from '../Components/Welcome/SetupSensors';\n// Complete Setup\nimport SetupComplete from '../Components/Welcome/SetupComplete';\n\nimport useStore from '../Store/Store';\nimport Footer from '../Components/Welcome/Footer';\n\nconst allSteps: Array\n The sensors are up next. If you haven't already, connect charge pad(s) to power and place a sensor on the\n charge pad.\n
\nWait for the led on the sensor to pulse green (located at the bottom). Sensors that've been found and sensors you've added are\n shown below. Searching starts automatically.\n
\nSensors you have added
\n {!devicesAdded?.length ? (\nNo sensors added yet.
\n ) : (\n\n
\n
\n )}\n \n \n {\n // Left-side step column\n setupStarted === true && (\n \n \n )\n }\n \n {setupStarted ? (\n \n\n \n
\n );\n});\n\nexport default Welcome;\n","import useStore from '../../Store/Store';\nimport { useContext, useState } from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { AuthFetcher } from '../../lib/fetch';\nimport { Button, Icon } from 'semantic-ui-react';\nimport NotyfContext from '../NotyfContext';\nimport { mutate } from 'swr';\n\nconst SetupComplete = () => {\n const { appStore, authStore, firstTimeSetupStore } = useStore();\n const [saving, setSaving] = useState(false);\n const notify = useContext(NotyfContext);\n const history = useHistory();\n const redirectToDashboard = () => {\n history.replace('/');\n };\n let userInfo = appStore.getUser();\n const completeSetup = async (finished: boolean) => {\n if (userInfo.local) {\n setSaving(true);\n userInfo.local.first_time_setup_complete = finished;\n\n const results = await AuthFetcher('/api/v1/organization/setup', authStore.getTokenFunction(), {\n method: 'PUT',\n body: userInfo.local,\n raw: true,\n });\n if (results.ok) {\n appStore.setUser(userInfo.local, userInfo.auth0);\n // Remove the active gateway ID\n firstTimeSetupStore.setActiveGatewayId('');\n notify.success('User profile and progress updated');\n } else {\n notify.error('Updating failed, unfortunately');\n userInfo.local.first_time_setup_complete = false;\n }\n mutate('/api/v1/organization/setup');\n appStore.setUser(userInfo.local, userInfo.auth0);\n setSaving(false);\n } else {\n notify.error(\n 'Saving failed. There is no user information. Please contact support@waterlinked.com for assistance.'\n );\n }\n };\n\n // Run automatically when the user shows this step\n if (userInfo.local.first_time_setup_complete === false) {\n completeSetup(true);\n }\n return (\n \n
\n ) : (\n \n
\n )}\n \n {setupStarted && (\n \n {previousButton}\n {nextButton}\n
\n )}\n \n
\n \n redirectToDashboard()}\n />\n )}\n
\n );\n};\n\nexport default SetupComplete;\n","import { useState } from \"react\";\nimport { Accordion, Icon, Segment } from \"semantic-ui-react\";\nimport { getSensorImagePath } from \"../lib/functionality\";\n\nconst Help = () => {\n const [activeIndex, setActiveIndex] = useState\n Congratulations, first time setup is complete!\n
\nWhat's next?
\n\n Attach weights to the receiver cables so they don't move around easily in the water.\n We also suggest attaching tension reliefs to the receiver cables so they won't damage the CageSense Gateway™ if pulled by sudden force.
\n\n Place the end of the receiver cable (the receiver head) well submerged in water and where there are few obstacles between them and the location of your sensors.\n The receiver head should be placed out of harms way from mechanical and moving parts.\n
\n\n Lastly, place the sensors in the water where they should go.\n
\nReading data
\n\n Data is sent from the sensors and arrives pretty quickly, but may in some cases take up to 3 hours.\n
\n\n You can view sensor data over time from the analytics page.\n
\n\n {saving && (\n\n
\n )}\n {userInfo.local.first_time_setup_complete === true && (\n Lyssignaler (LED)
\n Hva betyr egentlig de forskjellige lys-, og lydsignalene som sensorene viser?\n- \n
- Pulserende grønn: Sensoren lader (står på ladeplaten) \n
- Solid grønn: Sensoren er fulladet \n
- Blinkende grønn: Sensoren er tatt av ladeplaten og er klar til bruk \n
- Pulserende oransje: Sensoren lader og er satt i lagringsmodi \n
- Solid oransje: Sensoren er fulladet og er satt i lagringsmodi \n
- Blinkende oransje: Sensoren er tatt av ladeplaten og i lagringsmodi, men er ikke klar for bruk \n
- Solid blå: Sensoren er tilkoblet via blåtann \n
Lydsignaler
\n- \n
- Kort, positiv melodi: Sensoren er tatt av ladeplaten og klar til bruk \n
Hypoksi er (utilstrekkelig tilførsel eller tilgang til oksygen).
\n\n Siden laks er vekselvarme vil både metabolsk rate og oksygenbehov øke ved økende\n vanntemperatur. I det ligger at fisk forbruker mer oksygen ved høyere vanntemperatur. Ettersom\n løseligheten til oksygen avtar med økende vanntemperatur er kontinuerlig overvåkning av\n oksygenmetningen i en oppdrettsmerd helt avgjørende for å unngå at fisken opplever episoder\n med for lavt oksygeninnhold i vannet. Skulle dette skje vil laksen respondere med en\n stressrespons og påfølgende appetitt tap, vekstreduksjon og i ytterste konsekvens, død.
\n \n )\n },\n {\n title: 'Utstående øyne/synssvekkelse/blindhet',\n content: (\n <>\nÅrsak
\n\n Oksygenmangel, Underernæring, Feilernæring\n
\nCageSense™ sensorer som monitorerer dette
\n- \n
- \n
Årsak
\n\n Alger, Hypoksi, Amøber, Sykdom\n
\nDetaljer
\n\n Fisk som opplever stressende situasjoner av forskjellige\n årsaker vil ofte forsøke å kompensere ved hjelp av økt\n gjellelokkfrekvens.\n
\nCageSense™ sensorer som monitorerer dette
\n- \n
- \n
- \n
- \n
Årsak
\n\n Oksygenmangel, Underernæring, Stress, Parasitter,\n Redusert vannkvalitet\n
\nDetaljer
\n\n Kondisjonsfaktor (K) er et mål på fiskens ernæringsstatus og\n beregnes som 100 × Vekt (g)/ Lengde3(cm). Jo høyere K,\n desto fetere er fisken.\n
\nCageSense™ sensorer som monitorerer dette
\n- \n
- \n
- \n
- \n
Årsak
\n\n Hypoksi, Alger, Vannkvalitet, Predatorer,\n Trengeoperasjoner\n
\nDetaljer
\n\n Laks som opplever en negativ utvikling i basale\n miljøparametere, økt predatortrykk eller andre forstyrrende\n faktorer vil instinktivt forsøke å søke seg bort.\n
\nCageSense™ sensorer som monitorerer dette
\n- \n
- \n
- \n
- \n
Årsak
\n\n Smoltkvalitet, Avlusning med ferskvann,\n Elvepåvirkning\n
\nDetaljer
\n\n Laks har en naturlig lavere ionekonsentrasjon sammenlignet\n med naturlig sjøvann. Ved langvarige eksponering for\n betydelig lavere eller høyere verdier enn naturlig vil laks\n kunne oppleve problemer med den osmotiske balansen.\n
\nCageSense™ sensorer som monitorerer dette
\n- \n
- \n
Årsak
\n\n Oksygenmetning, Temperatur, Fôrtilgang, Predatorpåvirkning\n
\nDetaljer
\n\n Laks vil i enkelte tilfeller reagere med endring av\n svømmehastighet som er resultat av ytre eller indre\n påvirkninger. For eksempel vil tilstedeværelse av predatorer\n kunne gi en betydelig økt svømmehastighet. Motsatt vil laks\n utsatt for oksygenbrist redusere hastigheten\n
\nCageSense™ sensorer som monitorerer dette
\n- \n
- \n
- \n
Årsak
\n\n Hypoksi, Stress, Sykdom, Osmotisk stress, Alger\n
\nDetaljer
\n\n Appetitt hos laks er nøye regulert av fiskens tilstand både\n fysiologisk og gjennom ytre påvirkninger. Ved tilfeller av f.eks.\n betydelig oksygendropp vil laksens appetitt reduseres og\n dermed fòropptak reduseres.\n
\nCageSense™ sensorer som monitorerer dette
\n- \n
- \n
- \n\n
- \n
- \n
Årsak
\n\n Vekst, Fôropptak, Stress\n
\nDetaljer
\n\n Fisk er vekselvarm, det vil si de kan ikke produsere egen varme og er\n derfor avhengig av temperaturen i omgivelsene. Skal fiskens\n enzymatiske prosesser som f.eks. hormonell og nervøs kontroll,\n fordøyelse, respirasjon, osmoregulering fungere optimalt er\n temperaturen avgjørende. Laks har et temperaturoptimum på 13-14\n grader som den vil søke aktivt mot. Store avvik fra den ideelle\n temperaturen vil kunne gi seg utslag i nedsatt appetitt, stressadferd\n og i ytterste konsekvens, død\n
\nCageSense™ sensorer som monitorerer dette
\n- \n
- \n
Årsak
\n\n Temperatur, Fórtilgang, Oksygensvikt, Sykdom\n
\nCageSense™ sensorer som monitorerer dette
\n- \n
- \n
- \n
Årsak
\n\n Brakkvannspåvirkning, Temperatur, Strøm, Naturlig lys/ årstid\n
\nCageSense™ sensorer som monitorerer dette
\n- \n
- \n
- \n
\n \n \n
\n )\n}\n\nexport default Help","// Container for content of Auth App\nimport { Fragment, useRef } from 'react';\nimport { Switch, Route } from 'react-router-dom';\nimport { Sidebar, Ref } from 'semantic-ui-react';\nimport ErrorBoundary from './Components/ErrorBoundary';\nimport About from './Routes/About';\nimport Admin from './Routes/Admin';\nimport Analytics from './Routes/AnalyticsV2';\nimport CageOverview from './Routes/CageOverview';\nimport Dashboard from './Routes/Dashboard';\nimport Diagnostic from './Routes/Diagnostic';\nimport EditSite from './Routes/EditSite';\nimport ImageUpload from './Routes/ImageUpload';\nimport OverViewMap from './Routes/OverviewMap';\nimport PrivacyPolicy from './Routes/PrivacyPolicy';\nimport SensorConfiguration from './Routes/SensorConfiguration';\nimport TimeControl from './Routes/Time';\nimport Welcome from './Routes/Welcome';\nimport Help from './Routes/Help';\n\ninterface AppMainProps {\n menuVisible: boolean;\n menuRightVisible: boolean;\n setMenuRightVisible: any;\n setBreadCrumb: any;\n isAdmin: boolean;\n}\n\nconst AppMain = ({ menuVisible, setMenuRightVisible, setBreadCrumb, isAdmin }: AppMainProps) => {\n const segmentRef = useRef(null);\n\n return (\n Hjelp
\nVelkommen til CageSense™ hjelp! Vi har delt hjelpen opp i seksjoner for sensorer og fiskesymptomer, hva du kan gjøre og hvilken sensorer fra Water Linked som hjelper deg å utbedre årsaken(e).
\n\n CageSense™ lar deg overvåke en rekke velferdsindikatorer som er viktige for den daglige driften:\n
\n- \n
- OVI-er (også passive) som enkelt kan være en del av den daglige driften \n
- CageSense™ miljøparametere (ytre påvirkninger) \n
- Scenarioindikasjon på oversiktsiden for din installasjon \n
\n {/* Render each category's title and ingress */}\n \n
\n \n {/* Render each category's list of items (topics) */}\n {category.items.map((item, itemIndex) => {\n return (\n
\n )\n })}\n \n
\n \n {category.ingress}\n
\n {category.description}\n {/* Output category items (for the accordion), if any are present */}\n {category?.items &&\n \n \n \n {item.content}\n \n
\n )\n })}\n \n }\n \n Unfortunately an error occurred while retrieving details. More specifically: {error}
\n\n Please contact Water Linked support at support@waterlinked.com for assistance.\n
\n\n
\n );\n};\n\nfunction App({ devMode, isAdmin }: AppProps) {\n return (\n \n \n \n \n \n \n \n
\n );\n};\n\nexport default LoginButton;\n","import { IdToken, useAuth0 } from '@auth0/auth0-react';\nimport { observer } from 'mobx-react';\nimport 'notyf/notyf.min.css';\nimport { useEffect, useState } from 'react';\nimport { Loader } from 'semantic-ui-react';\n\nimport App from './App';\nimport LoginButton from './Routes/LoginButton';\nimport useStore from './Store/Store';\n\ninterface AuthAppProps {\n devMode: boolean;\n}\nconst AuthApp = observer(({ devMode }: AuthAppProps) => {\n const { appStore, authStore } = useStore();\n const { user, isLoading, isAuthenticated, getAccessTokenSilently, getIdTokenClaims } = useAuth0();\n const [isAdmin, setIsAdmin] = useState\n \n
\n \n
\n \n ![\"Three](\"/images/three-circles.svg\")
\n CageSense™\n
\n \n \n
\n \n v{version}\n
\n