Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Develop #44

Merged
merged 6 commits into from
May 8, 2024
Merged

Develop #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2563e4e
added translations and bug fixes with charts
CropWatchDevelopment May 8, 2024
4dbb5f6
translations completed
CropWatchDevelopment May 8, 2024
befa453
Merge pull request #42 from CropWatchDevelopment/translations2
CropWatchDevelopment May 8, 2024
b2c234e
now able to rename locations
CropWatchDevelopment May 8, 2024
fa41b34
Merge pull request #43 from CropWatchDevelopment/user-edit-names
CropWatchDevelopment May 8, 2024
cb1342f
fixed merge issue
CropWatchDevelopment May 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 2 additions & 43 deletions src/lib/charts/highcharts/timeseries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { browser } from '$app/environment';
import Highcharts from 'highcharts';
import moment from 'moment';

export const HighChartsTimeSeriesChart = (data: any[], name: string = '') => {
export const HighChartsTimeSeriesChart = (data: any[], yAxis: any[], name: string = '') => {
return {
chart: {
zoomType: 'x',
Expand Down Expand Up @@ -35,48 +35,7 @@ export const HighChartsTimeSeriesChart = (data: any[], name: string = '') => {
},
}
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: 'red'
}
},
title: {
text: '',
style: {
color: 'red'
}
},
plotLines: [
// {
// value: -13, // This is the specific point on the y-axis
// color: 'red',
// width: 2,
// label: {
// text: 'ALERT RULE 1 (Temperature > 0°C)',
// style: {
// fontWeight: 'bold', // Makes the label text bold
// color: 'red',
// },
// }
// }
],
}, { // Secondary yAxis
title: {
text: 'Humidity',
style: {
color: 'lightblue'
}
},
labels: {
format: '{value} %',
style: {
color: 'lightblue'
}
},
opposite: true
}],
yAxis: yAxis,
legend: {
enabled: false
},
Expand Down
80 changes: 80 additions & 0 deletions src/lib/components/ui/EditLocationNameDialog.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<script lang="ts">
import { enhance } from '$app/forms';
import { mdiClose, mdiFloppy, mdiPencil } from '@mdi/js';
import { toast } from '@zerodevx/svelte-toast';
import { Button, Dialog, TextField } from 'svelte-ux';
import { _ } from 'svelte-i18n';

export let currentLocationName: string = '';
let currentLocationNameStatic = currentLocationName;
export let locationId: number = -1;
let open = false;

const handleSubmit = () => {
fetch(`/api/v1/locations/${locationId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: currentLocationName })
})
.then((res) => {
if (res.ok) {
toast.push(`Location name updated successfully`, {
theme: {
'--toastBackground': 'green',
'--toastColor': 'black'
}
});
currentLocationNameStatic = currentLocationName;
} else {
toast.push(`Location name updated FAILED`, {
theme: {
'--toastBackground': 'red',
'--toastColor': 'black'
}
});
currentLocationName = currentLocationNameStatic;
open = false;
}
return res.json();
})
.then((data) => {
console.log(data);
currentLocationName = data.name;
open = false;
})
.catch((err) => {
console.error(err);
currentLocationName = currentLocationNameStatic;
open = false;
});
};

const closing = () => {
currentLocationName = currentLocationNameStatic;
open = false;
};
</script>

<Button on:click={() => (open = true)} icon={mdiPencil} size="sm" />

<form action={`/api/v1/locations/${locationId}`} method="PUT">
<Dialog bind:open on:close={() => closing()}>
<div slot="title">{$_('rename_dialog.rename')} {currentLocationNameStatic} {$_('rename_dialog.to_what')}</div>
<div class="m-4">
<TextField name="newName" label={$_('rename_dialog.new_name')} bind:value={currentLocationName} />
</div>
<div class="flex flex-row mt-1 p-2">
<Button variant="fill" icon={mdiClose} on:click={() => (open = false)} color="danger">{$_('close')}</Button>
<span class="flex-grow" />
<Button
variant="fill"
type="button"
icon={mdiFloppy}
on:click={() => handleSubmit()}
color="success">{$_('save')}</Button
>
</div>
</Dialog>
</form>
19 changes: 10 additions & 9 deletions src/lib/components/ui/dashboardCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,14 @@
import { get, writable } from 'svelte/store';
import { isDayTime } from '$lib/utilities/isDayTime';
import { goto } from '$app/navigation';
import { mdiArrowRight, mdiArrowRightCircle, mdiEye, mdiLink } from '@mdi/js';
import { mdiArrowRight, mdiArrowRightCircle, mdiEye, mdiLink, mdiPencil } from '@mdi/js';
import { _ } from 'svelte-i18n';
import moment from 'moment';
import EditLocationNameDialog from './EditLocationNameDialog.svelte';

export let data;
const locationId = data.location_id;
const locationName: string = data.cw_locations.name ?? '--';
let locationName: string = data.cw_locations.name ?? '--';
const temperature: number = data.weatherJSON.temperature ?? 0;
const rainfall: number = data.weatherJSON.rainfall ?? 0;
const humidity: number = data.weatherJSON.humidity ?? 0;
Expand Down Expand Up @@ -80,19 +81,19 @@
</div>
</a>
<div class="pl-2 pt-2">
<h2 class="text-xl my-3 flex flex-row">
{locationName ?? '--'}
<h2 class="text-xl my-3 flex flex-row items-center">
{locationName ?? '--'} <EditLocationNameDialog {locationId} bind:currentLocationName={locationName} />
<span class="flex flex-grow" />
<Button variant="outline" color="primary" icon={mdiArrowRight} on:click={() => goto(`app/locations/${locationId}`)} />
</h2>
<div class="flex">
<p class="basis-1/3"></p>
<div class="basis-1/3 text-xs flex flex-row justify-center">
<div class="basis-1/3 text-xs flex flex-row justify-center text-slate-800">
<img src={thermometerImage} alt="" class="w-4" />
<p>{$_('dashboardCard.primaryData')}</p>
</div>
<div class="basis-1/3 text-xs flex flex-row justify-center">
<img src={moistureImage} alt="" class="w-4" />
<img src={moistureImage} alt="" class="w-4 text-slate-800" />
<p>{$_('dashboardCard.secondaryData')}</p>
</div>
</div>
Expand All @@ -107,7 +108,7 @@
<Collapse>
<!-- Outside -->
<div slot="trigger" class="flex-1 px-3 py-2">
<div class="flex text-center">
<div class="flex text-center text-base">
<div class="basis-1/3 flex items-center space-x-2">
<div class="w-2">
<img src={moment().diff(moment(device.data.created_at), 'minutes') > 120 ? inactiveImage : activeImage} alt="" />
Expand Down Expand Up @@ -143,8 +144,8 @@
{:then data}
{#each Object.keys(data) as dataPointKey}
<div class="px-3 pb-3 flex border-b">
<p class="basis-1/2 text-sm">{$_(dataPointKey)}</p>
<p class="basis-1/2 text-sm">{data[dataPointKey]}</p>
<p class="basis-1/2 text-base">{$_(dataPointKey)}</p>
<p class="basis-1/2 text-base">{data[dataPointKey]}</p>
</div>
{/each}
{/await}
Expand Down
40 changes: 38 additions & 2 deletions src/lib/components/ui/sensors/CW_SS_TME.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,24 @@
data: data.map((d: any) => [new Date(d.created_at).valueOf(), d.soil_temperatureC])
}
],
[
{
// Secondary yAxis
title: {
text: $_('temperature'),
style: {
color: 'red'
}
},
labels: {
format: '{value} °C',
style: {
color: 'red'
}
},
opposite: false
},
],
$_('soil_temperature')
);

Expand All @@ -38,11 +56,29 @@
type: 'line',
yAxis: 0,
name: $_('soil_moisture'),
color: 'blue',
color: 'lightblue',
data: data.map((d: any) => [new Date(d.created_at).valueOf(), d.soil_moisture])
}
],
$_('soil_moisture')
[
{
// Secondary yAxis
title: {
text: $_('humidity'),
style: {
color: 'lightblue'
}
},
labels: {
format: '{value} %',
style: {
color: 'lightblue'
}
},
opposite: true
}
],
''
);
</script>

Expand Down
78 changes: 66 additions & 12 deletions src/lib/components/ui/sensors/CW_SS_TMEPNPK.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import Highcharts from '$lib/actions/highcharts.action';
import { scaleBand, scaleUtc } from 'd3-scale';
import { curveLinearClosed } from 'd3-shape';
import { Chart, Svg, Group, Axis, Spline, Points } from 'layerchart';
import { Chart, Svg, Group, Axis, Spline, Points } from 'layerchart';
import { _ } from 'svelte-i18n';

export let data;
Expand All @@ -19,14 +19,18 @@
let temperature = data.at(0).soil_temperatureC;
let moisture = data.at(0).soil_moisture;
let soil_ec = data.at(0).soil_EC;
let npk_array = [
{ name: 'N', value: data.at(0).soil_N },
{ name: 'P', value: data.at(0).soil_P },
{ name: 'K', value: data.at(0).soil_K },
];
let N = data.at(0).soil_N;
let P = data.at(0).soil_P;
let K = data.at(0).soil_K;
let soil_ph = data.at(0).soil_PH;
let npk_array = [
{ name: 'N', value: data.at(0).soil_N },
{ name: 'P', value: data.at(0).soil_P },
{ name: 'K', value: data.at(0).soil_K }
];
let lastSeen = data.at(0).created_at;
let isActiveRecently = moment().diff(moment(lastSeen), 'minutes') < 31;
let curve = curveLinearClosed;
let curve = curveLinearClosed;

$: tempConfig = HighChartsTimeSeriesChart(
[
Expand All @@ -38,6 +42,23 @@
data: data.map((d: any) => [new Date(d.created_at).valueOf(), d.soil_temperatureC])
}
],
[
{
labels: {
format: '{value}°C',
style: {
color: 'red'
}
},
title: {
text: $_('temperature'),
style: {
color: 'red'
}
},
plotLines: []
}
],
$_('soil_temperature')
);

Expand All @@ -47,11 +68,29 @@
type: 'line',
yAxis: 0,
name: $_('soil_moisture'),
color: 'blue',
color: 'lightblue',
data: data.map((d: any) => [new Date(d.created_at).valueOf(), d.soil_moisture])
}
],
$_('soil_moisture')
[
{
// Secondary yAxis
title: {
text: $_('humidity'),
style: {
color: 'lightblue'
}
},
labels: {
format: '{value} %',
style: {
color: 'lightblue'
}
},
opposite: true
}
],
$_('')
);
</script>

Expand All @@ -64,21 +103,36 @@
/>
<div class="flex flex-col">
<p class="text-surface-100 text-4xl">{sensorName}</p>
<p class="text-slate-500">{$_('lastSeen')}: <Duration start={lastSeen} totalUnits={1} /> {$_('ago')}</p>
<p class="text-slate-500">
{$_('lastSeen')}: <Duration start={lastSeen} totalUnits={1} />
{$_('ago')}
</p>
</div>
</div>
<DarkCard title={$_('soil_temperature')} value={temperature} optimalValue={-20} unit={'ºC'}>
<div class="chart" use:Highcharts={tempConfig} />
{data.length}
</DarkCard>

<DarkCard title={$_('soil_moisture')} value={moisture} optimalValue={20} unit={'%'}>
<div class="chart" use:Highcharts={moistureConfig} />
</DarkCard>

<DarkCard title={$_('soil_EC')} value={soil_ec} unit={'µS/m'} optimalValue={1}></DarkCard>
<DarkCard title={$_('soil_EC')} value={soil_ec} unit={'µS/m'} optimalValue={null}></DarkCard>

<DarkCard title={$_('soil_PH')} value={soil_ph} unit={''} optimalValue={null}></DarkCard>

<DarkCard title={`${$_('soil_N')} / ${$_('soil_P')} / ${$_('soil_K')}`}>
<!-- <div class="flex flex-row w-full justify-between flex-wrap mt-3">
<p class="text-surface-100 text-xl">{$_('soil_N')}: {N}</p>
<p class="text-surface-100 text-xl">{$_('soil_P')}: {P}</p>
<p class="text-surface-100 text-xl">{$_('soil_K')}: {K}</p>
</div> -->
<div class="flex flex-col justify-between">
<DarkCard title={$_('soil_N')} value={N} unit={'µS/m'} optimalValue={null}></DarkCard>
<DarkCard title={$_('soil_P')} value={P} unit={'µS/m'} optimalValue={null}></DarkCard>
<DarkCard title={$_('soil_K')} value={K} unit={'µS/m'} optimalValue={null}></DarkCard>

</div>
<div class="h-[300px] p-4 border rounded">
<Chart
data={npk_array}
Expand Down
Loading