KevinMidboe/hivemonitor
1
0
Fork 0
mirror of https://github.com/KevinMidboe/hivemonitor.git synced 2025-10-28 17:10:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: UI Elements (#1)

Browse Source 
* adds a bunch of ui components with mock data

* build docker image with yarn.lock & yarn instead of npm

* easier to add topics, build options smarter from ENV vars

* fallback to index.html on all requests for SPA

* updates w/ black/white support, better mobile styling

* adds test components to home & dashboard pages

* adds chart.js dependency

* mqtt payload examples

* lint

* drone ci config

* eslint fixes
This commit is contained in:
Kevin
2025-02-09 13:46:46 +01:00
committed by Kevin Midboe
parent 5712e79391
commit ec25b22567
56 changed files with 1374 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
.drone.yml Normal file
View File

@@ -0,0 +1,105 @@
---
kind: pipeline
type: docker
name: Build
platform:
os: linux
arch: amd64
volumes:
- name: cache
host:
path: /tmp/cache
trigger:
event:
include:
- push
steps:
- name: Load cached frontend packages
image: sinlead/drone-cache:1.0.0
settings:
action: load
key: yarn.lock
mount: node_modules
prefix: yarn-modules-${DRONE_REPO_NAME}
volumes:
- name: cache
path: /cache
- name: Frontend install
image: node:current-alpine
commands:
- node -v
- yarn --version
- yarn
- name: Cache frontend packages
image: sinlead/drone-cache:1.0.0
settings:
action: save
key: yarn.lock
mount: node_modules
prefix: yarn-modules-${DRONE_REPO_NAME}
volumes:
- name: cache
path: /cache
- name: Frontend build
image: node:current-alpine
commands:
- yarn build
- name: Lint project using eslint
image: node:current-alpine
commands:
- yarn lint
---
kind: pipeline
type: docker
name: Publish
platform:
os: linux
arch: amd64
steps:
- name: Publish to ghcr
image: plugins/docker
environment:
PUBLIC_MQTT_BROKER_WS_URL:
from_secret: MQTT_BROKER_WS_URL
settings:
registry: ghcr.io
repo: ghcr.io/kevinmidboe/${DRONE_REPO_NAME}
dockerfile: Dockerfile
username:
from_secret: GITHUB_USERNAME
password:
from_secret: GHCR_UPLOAD_TOKEN
build_args:
- PUBLIC_MQTT_BROKER_WS_URL=wss://hive.schleppe.cloud/mqtt
build_args_from_env:
- PUBLIC_MQTT_BROKER_WS_URL
tags:
- latest
- ${DRONE_COMMIT_SHA}
trigger:
event:
include:
- push
exclude:
- pull_request
branch:
- main
depends_on:
- Build
---
kind: signature
hmac: 41d26f0c24afccaea20bfa929d51e7ac8bdaf5ebbc523349ed6934411af026c1

8
Dockerfile
View File

@@ -4,12 +4,14 @@ WORKDIR /app
COPY package*.json .
COPY *config* .
COPY .env .
COPY yarn.lock .
COPY src/ src
COPY static/ static
RUN npm install
RUN npm run build
ARG PUBLIC_MQTT_BROKER_WS_URL
RUN yarn install
RUN yarn run build
FROM nginx:alpine

31
README.md
View File

@@ -3,10 +3,12 @@
Hive monitor is a frontend for displaying data from MQTT server receiving events from bee hives. The complementary project [hivemonitor-ESP32-firmware]() reads sensor values and publishes on MQTT topic.
Complemetary hivemonitor repositories:
- [Hive monitor ESP32 Firmware](https://github.com/kevinmidboe/hivemonitor-esp32-firmware)
- [Hive monitor ESP32 PCB design](https://github.com/kevinmidboe/hivemonitor-pcb)
## Preview
[Preview site](https://hive.schleppe.cloud)
![Hive monitor site, 4 pages](https://github.com/KevinMidboe/hivemonitor/assets/2287769/7fdb3f1c-3f2b-4e1f-b8c8-290b7e6d1d2b)
@@ -74,3 +76,32 @@ Build and run using nginx in docker:
docker build -t hivemonitor .
docker run -p 8080:8080 --name hivemonitor-frontend hivemonitor
```
## Example mqtt payloads
should automate generating interfaces or grpc.
telemetry/gateway/[id]:
```json
{
"gateway_name": "Elisabeth",
"t": "2025-02-08 15:03:30",
"temperature": "22",
"battery_level": "20"
}
```
telemetry/hive/[id]:
```json
{
"hive_name": "Elisabeth",
"t": "2025-02-08 15:03:30",
"temperature": "22",
"humidity": "30",
"pressure": "30",
"weight": "30",
"battery_level": "20"
}
```

22
nginx.conf
View File

@@ -18,5 +18,25 @@ http {
root /app/;
gzip_static on;
# what file to server as index
index index.html;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to redirecting to index.html
try_files $uri $uri/ $uri.html /index.html;
}
location ~* \.(?:css|js|jpg|svg)$ {
expires 30d;
add_header Cache-Control "public";
}
location ~* \.(?:json)$ {
expires 1d;
add_header Cache-Control "public";
}
}
}
}

1
package.json
View File

@@ -31,6 +31,7 @@
},
"type": "module",
"dependencies": {
"chart.js": "^4.4.7",
"mqtt": "^5.0.0",
"svelte-gestures": "^1.5.2"
}

55
src/lib/components/Badge.svelte Normal file
View File

@@ -0,0 +1,55 @@
<script lang="ts">
const dataTypes = ['Temperature', 'Pressure', 'Weight', 'Activity'];
const randomOfList = (list: string[]) => list[Math.floor(Math.random() * list.length)];
const dataType = randomOfList(dataTypes);
const lastValue = Math.floor((Math.random() * 30 + 10) * 10) / 10;
const lastUpdated = Math.floor(Math.random() * 300);
</script>
<div class="badge-container">
<div class="heading">
<div class="metric">
<span>{dataType}</span>
<b>{lastValue}</b>
</div>
<span>{lastUpdated} mins</span>
</div>
<div class="meta">
<span>Up from last 2 days</span>
</div>
</div>
<style lang="scss">
.badge-container {
display: flex;
flex-direction: column;
border-radius: 1rem;
background-color: var(--highlight);
padding: 0.75rem 1rem;
.heading {
display: flex;
flex-direction: row;
justify-content: space-between;
.metric {
display: flex;
flex-direction: column;
b {
font-size: 3rem;
font-weight: 900;
}
}
}
.meta {
margin-top: 0.4rem;
font-size: 0.8rem;
opacity: 0.8;
}
}
</style>

110
src/lib/components/Calendar.svelte Normal file
View File

@@ -0,0 +1,110 @@
<script lang="ts">
const color = '#F6B139';
export let offset = 0;
function randomOpacity() {
return `${color}${Math.floor(Math.random() * 100)}`;
}
let today = new Date();
let year = today.getFullYear();
let month = today.getMonth() - offset;
// wrap year
if (month < 0) {
year = year - 1;
month = 12 + month;
}
const months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
];
const monthString = months[month];
function getDaysInMonth(year: number, month: number) {
return new Date(year, month + 1, 0).getDate();
}
let daysInMonth = getDaysInMonth(year, month);
let firstDay = new Date(year, month, 1).getDay() - 1;
firstDay = firstDay > 0 ? firstDay : 7 + firstDay;
</script>
<div class="calendar-container">
<p>{monthString}</p>
<div class="calendar">
<!-- eslint-disable-next-line -->
{#each Array(firstDay).fill(null) as _}
<div class="empty" />
{/each}
{#each Array(daysInMonth)
.fill(0)
.map((_, i) => i + 1) as _}
<div class="day">
<span style={`background: ${randomOpacity()}`} />
</div>
{/each}
</div>
</div>
<style lang="scss">
.calendar-container {
padding: 1rem;
border-radius: 1rem;
background-color: var(--highlight);
@media only screen and (min-width: 768px) {
justify-content: space-between;
}
p {
text-align: center;
margin: 0;
margin-bottom: 0.5rem;
}
}
.calendar {
--size: calc(90vw / 8);
display: grid;
grid-template-columns: repeat(7, var(--size));
gap: 5px;
gap: 0.24rem;
justify-content: start;
@media only screen and (min-width: 768px) {
--size: 28px;
}
}
.day {
background-color: #ffffff30;
background-color: var(--highlight);
border-radius: 50%;
}
.day span {
border-radius: 50%;
display: block;
min-width: var(--size);
min-height: var(--size);
width: 100%;
height: 100%;
/*
@media only screen and (min-width: 768px) {
--size: 24px;
}
*/
}
</style>

8
src/lib/components/Card.svelte
View File

@@ -4,8 +4,8 @@
export let title = '';
export let iconBackground = 'var(--background)';
export let opens: any = null;
export let data: any = {};
export let opens: any = null; // eslint-disable-line
export let data: any = {}; // eslint-disable-line
export let borderLess = false;
function openModal() {
@@ -128,8 +128,8 @@
}
.metric .icon {
max-width: 22px;
height: 22px;
max-width: 28px;
height: 28px;
margin-right: 0.25rem;
}
}

2
src/lib/components/DateSeparator.svelte
View File

@@ -2,7 +2,7 @@
export let date: Date;
function convertDate() {
let [_, time] = date.toLocaleString('nb-NO').split(', ');
let [_, time] = date.toLocaleString('nb-NO').split(', '); // eslint-disable-line
time = time.slice(0, time.length - 3);
const diffDays = Math.floor((new Date().getTime() - date.getTime()) / 86400000);

99
src/lib/components/Dropdown.svelte Normal file
View File

@@ -0,0 +1,99 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
let open = false;
let dropdown;
const options = ['Today', 'Yesterday', 'Last 7 Days', 'Last 30 Days', 'All time'];
export let selected = options[options.length - 1];
function select(option: string) {
selected = option;
open = false;
dispatch('date', option);
}
function handleEnter(event: KeyboardEvent): boolean {
if (!(event.code === 'Enter' || event.code === 'Space')) return false;
event.preventDefault();
return true;
}
</script>
<div class="dropdown" bind:this={dropdown}>
<button class="trigger" on:click={() => (open = !open)}>
{selected}
<span class="arrow">▾</span>
</button>
{#if open}
<ul class="menu">
{#each options as option}
<li>
<span
tabindex="0"
class:active={selected === option}
on:click={() => select(option)}
on:keydown={(event) => handleEnter(event) && select(option)}
role="button">{option}</span
>
</li>
{/each}
</ul>
{/if}
</div>
<style>
.dropdown {
position: relative;
display: inline-block;
margin: 1rem 0;
}
.trigger {
background-color: var(--color);
color: var(--background);
background-color: var(--highlight);
color: var(--color);
padding: 10px 15px;
border: none;
border-radius: 6px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
width: 150px;
}
.arrow {
margin-left: auto;
}
.menu {
position: absolute;
top: 100%;
left: 0;
background: var(--background);
color: var(--color);
border-radius: 6px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
width: 150px;
z-index: 10;
list-style: none;
margin: 0.2rem 0 0 0;
padding: 0;
overflow: hidden;
}
.menu li span {
display: block;
width: 100%;
padding: 10px;
cursor: pointer;
}
.menu li span:hover,
.menu li span:active {
background: #333;
background: var(--color);
color: var(--background);
}
</style>

5
src/lib/components/FooterNavigation.svelte
View File

@@ -43,6 +43,7 @@
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
cursor: pointer;
padding: 0.6rem 0.5rem 0.2rem;
color: var(--color);
@@ -50,6 +51,10 @@
transition: all 200ms ease;
will-change: font-weight;
&:hover {
background-color: var(--background-60);
}
.icon {
width: 20px;
height: 20px;

159
src/lib/components/Graph.svelte Normal file
View File

@@ -0,0 +1,159 @@
<script lang="ts">
import { onMount } from 'svelte';
import Chart from 'chart.js/auto';
import { Filler } from 'chart.js';
Chart.register(Filler);
export let date: string;
let chart: Chart;
let chartElement: HTMLCanvasElement;
let chartHeight = 0;
const data = [
{ year: 2010, count: Math.floor(10 * (Math.random() * 30) + 10) / 10 },
{ year: 2011, count: Math.floor(10 * (Math.random() * 30) + 20) / 10 },
{ year: 2012, count: Math.floor(10 * (Math.random() * 30) + 15) / 10 },
{ year: 2013, count: Math.floor(10 * (Math.random() * 30) + 25) / 10 },
{ year: 2014, count: Math.floor(10 * (Math.random() * 30) + 22) / 10 },
{ year: 2015, count: Math.floor(10 * (Math.random() * 30) + 30) / 10 },
{ year: 2016, count: Math.floor(10 * (Math.random() * 30) + 28) / 10 }
];
function hexToRgb(hex: string) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
}
: null;
}
function createLineBackgroundGradient(hex: string, element: HTMLCanvasElement) {
const context = element.getContext('2d');
if (context == null) return;
// const gradient = context.createLinearGradient(0, 0, 0, context.canvas.height);
const gradient = context.createLinearGradient(0, 0, 0, chartHeight * 0.9 || 180);
const c = hexToRgb(hex);
if (c == null) return;
gradient.addColorStop(0.2, `rgb(${c.r}, ${c.g}, ${c.b}, 0.6)`);
gradient.addColorStop(1, `rgb(${c.r}, ${c.g}, ${c.b}, 0)`);
return gradient;
}
function mountGraph() {
const c = randomOfList(colors);
chart = new Chart(chartElement, {
type: 'line',
data: {
labels: data.map((row) => row.year),
datasets: [
{
label: 'Acquisitions by year',
data: data.map((row) => row.count),
fill: true,
backgroundColor: createLineBackgroundGradient(c, chartElement)
}
]
},
options: {
plugins: {
legend: {
display: false
}
},
scales: {},
elements: {
line: {
borderJoinStyle: 'round',
borderCapStyle: 'round',
tension: 0.3,
borderColor: c
},
point: {
radius: 4,
backgroundColor: c
}
}
}
});
if (chartHeight == 0) {
chartHeight = chartElement.getBoundingClientRect()?.height || 0;
console.log('chartHeight:', chartHeight);
chart.destroy();
mountGraph();
}
}
onMount(() => mountGraph());
// const colors = ["#ADBCA5", "#E8B9AB", "#E09891", "#CB769E"];
const dataTypes = ['Temperature', 'Pressure', 'Weight', 'Activity'];
const colors = [
'#FFA14C', // orange
'#FFE160', // yellow
'#AEF78E', // light green
'#7CE64B', // green
'#F46036', // orange - 2
'#A6D9F7', // light blue
'#5146EB', // blue
'#EA038D', // pink
'#832ED5' // purple
];
const randomOfList = (list: string[]) => list[Math.floor(Math.random() * list.length)];
const dataType = randomOfList(dataTypes);
const lastValue = data[data.length - 1].count;
</script>
<div class="graph-container">
<div class="heading">
<div class="metric">
<span>{dataType}</span>
<b>{lastValue}</b>
</div>
<span>{date} days</span>
</div>
<div class="graph">
<canvas bind:this={chartElement} />
</div>
</div>
<style lang="scss">
.graph-container {
display: flex;
flex-direction: column;
border-radius: 1rem;
background-color: var(--highlight);
padding: 0.75rem 1rem;
.heading {
display: flex;
flex-direction: row;
justify-content: space-between;
.metric {
display: flex;
flex-direction: column;
b {
font-size: 3rem;
font-weight: 900;
}
}
}
.graph {
width: 100%;
}
}
</style>

2
src/lib/components/HiveSummary.svelte
View File

@@ -53,4 +53,6 @@
</Card>
{/each}
<!--
<p style="text-align: right; margin-top: 0">{sinceUpdate} s since last update</p>
-->

9
src/lib/components/Modal.svelte
View File

@@ -16,17 +16,17 @@
function toggleHandler(isOpen: boolean) {
if (!browser || !modalElement) return;
const app = document.getElementById('app');
if (!app) return
if (!app) return;
if (isOpen) {
app.classList.add('no-scroll');
app.inert = true;
app.setAttribute('aria-hidden', 'true')
app.setAttribute('aria-hidden', 'true');
} else {
setTimeout(() => (modalElement.scrollTop = 0), 500);
app.classList.remove('no-scroll');
app.inert = false;
app.setAttribute('aria-hidden', 'false')
app.setAttribute('aria-hidden', 'false');
}
}
@@ -52,7 +52,7 @@
<style lang="scss">
.modal {
position: fixed;
position: hidden;
top: 0;
left: 100vw;
background-color: var(--background);
@@ -64,6 +64,7 @@
overflow-y: scroll;
&.open {
position: fixed;
left: 0;
}
}

76
src/lib/components/Slider.svelte Normal file
View File

@@ -0,0 +1,76 @@
<script lang="ts">
const percent = Math.floor(Math.random() * 100);
const health = () => {
if (percent > 66) {
return 'bad';
} else if (percent > 33) {
return 'good';
}
return 'amazing';
};
</script>
<div class="slider-container">
<p>
<span>Hive health</span>
<b>{health()}</b>
</p>
<div class="slider">
<div />
<div />
<div />
<span style={`left: ${percent}%`} />
</div>
</div>
<style lang="scss">
.slider-container {
border-radius: 1rem;
background-color: var(--highlight);
padding: 1rem;
p {
display: flex;
justify-content: space-between;
margin-top: 0;
}
}
.slider {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
div {
width: 100%;
height: 2rem;
}
div:nth-of-type(1) {
background-color: #23c45e; // green
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
div:nth-of-type(2) {
background-color: #e8b306; // yellow
}
div:nth-of-type(3) {
background-color: #ee4443; // red
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
span {
position: absolute;
top: -1rem;
height: 3rem;
margin-top: 0.5rem;
width: 0.8rem;
border-radius: 0.5rem;
background-color: var(--color);
}
}
</style>

13
src/lib/components/cards/HighTemperature.svelte
View File

@@ -1,14 +1,13 @@
<script lang="ts">
import Card from "../Card.svelte";
import ThermometerHotIcon from "$lib/icons/thermometerHot.svelte";
import Card from '../Card.svelte';
import ThermometerHotIcon from '$lib/icons/thermometerHot.svelte';
export let temperature: string | number;
export let borderLess: boolean = false;
export let temperature: string | number;
export let borderLess = false;
</script>
<Card title="High temperature" iconBackground="#F93131" {borderLess}>
<ThermometerHotIcon slot="logo" fill="var(--highlight)" />
<ThermometerHotIcon slot="logo" fill="var(--highlight)" />
<span slot="first-value">Over: { temperature }°C</span>
<span slot="first-value">Over: {temperature}°C</span>
</Card>

13
src/lib/components/cards/LowBattery.svelte
View File

@@ -1,15 +1,14 @@
<script lang="ts">
import Card from "../Card.svelte";
import BatteryLowIcon from "$lib/icons/batteryLow.svelte";
import Card from '../Card.svelte';
import BatteryLowIcon from '$lib/icons/batteryLow.svelte';
export let battery: number | string;
export let borderLess: boolean = false;
export let battery: number | string;
export let borderLess = false;
</script>
<!-- <Card title="Low battery" iconBackground="#FF6B00" {borderLess}> -->
<Card title="Low battery" iconBackground="#58C73A" {borderLess}>
<BatteryLowIcon slot="logo" fill="var(--highlight)" />
<BatteryLowIcon slot="logo" fill="var(--highlight)" />
<span slot="first-value">Under: { battery }%</span>
<span slot="first-value">Under: {battery}%</span>
</Card>

13
src/lib/components/cards/LowTemperature.svelte
View File

@@ -1,14 +1,13 @@
<script lang="ts">
import Card from "../Card.svelte";
import ThermometerColdIcon from "$lib/icons/thermometerCold.svelte";
import Card from '../Card.svelte';
import ThermometerColdIcon from '$lib/icons/thermometerCold.svelte';
export let temperature: number | string;
export let borderLess: boolean = false;
export let temperature: number | string;
export let borderLess = false;
</script>
<Card title="low temperature" iconBackground="#05B4EC" {borderLess}>
<ThermometerColdIcon slot="logo" fill="var(--highlight)" />
<ThermometerColdIcon slot="logo" fill="var(--highlight)" />
<span slot="first-value">Under: { temperature }°C</span>
<span slot="first-value">Under: {temperature}°C</span>
</Card>

13
src/lib/components/cards/NoData.svelte
View File

@@ -1,14 +1,13 @@
<script lang="ts">
import Card from "../Card.svelte";
import NetworkDisconnectedIcon from "$lib/icons/networkDisconnected.svelte";
import Card from '../Card.svelte';
import NetworkDisconnectedIcon from '$lib/icons/networkDisconnected.svelte';
export let time: String | Number;
export let borderLess: boolean = false;
export let time: string | number;
export let borderLess = false;
</script>
<Card title="no data" iconBackground="#ECECEC" {borderLess}>
<NetworkDisconnectedIcon slot="logo" fill="#213547" />
<NetworkDisconnectedIcon slot="logo" fill="#213547" />
<span slot="first-value">More than: { time } hours</span>
<span slot="first-value">More than: {time} hours</span>
</Card>

15
src/lib/components/cards/WeightChanged.svelte
View File

@@ -1,15 +1,14 @@
<script lang="ts">
import Card from "../Card.svelte";
import WeightIcon from "$lib/icons/weight.svelte";
import Card from '../Card.svelte';
import WeightIcon from '$lib/icons/weight.svelte';
export let from: string | number;
export let to: string | number;
export let borderLess: boolean = false;
export let from: string | number;
export let to: string | number;
export let borderLess = false;
</script>
<Card title="Weight changed" iconBackground="#F6B138" {borderLess}>
<WeightIcon slot="logo" fill="var(--highlight)" />
<WeightIcon slot="logo" fill="var(--highlight)" />
<span slot="first-value">From { from }kg to { to }kg</span>
<span slot="first-value">From {from}kg to {to}kg</span>
</Card>

17
src/lib/components/displays/BatteryDisplay.svelte
View File

@@ -1,18 +1,17 @@
<script lang="ts">
import Display from "$lib/components/Display.svelte";
import BatteryIcon from "$lib/icons/Battery.svelte";
import { formatBattery } from "$lib/telemetryFormatters";
import Display from '$lib/components/Display.svelte';
import BatteryIcon from '$lib/icons/Battery.svelte';
import { formatBattery } from '$lib/telemetryFormatters';
export let battery: string | undefined = undefined;
export let battery: string | undefined = undefined;
</script>
<Display>
<BatteryIcon slot="icon" />
<BatteryIcon slot="icon" />
<span slot="title">Battery</span>
<span slot="value">{ formatBattery(battery) }% remaining</span>
<span slot="title">Battery</span>
<span slot="value">{formatBattery(battery)}% remaining</span>
</Display>
<style lang="scss">
</style>
</style>

20
src/lib/components/displays/HumidityDisplay.svelte
View File

@@ -1,20 +1,18 @@
<script lang="ts">
import Display from "$lib/components/Display.svelte";
import HumidityIcon from "$lib/icons/humidity.svelte";
import { formatHumidity } from "$lib/telemetryFormatters";
import Display from '$lib/components/Display.svelte';
import HumidityIcon from '$lib/icons/humidity.svelte';
import { formatHumidity } from '$lib/telemetryFormatters';
export let humidity: string | undefined = undefined
export let humidity: string | undefined = undefined;
</script>
<Display>
<HumidityIcon slot="icon" />
<HumidityIcon slot="icon" />
<span slot="title">Humidity</span>
<span slot="value">{ formatHumidity(humidity) }%</span>
<span slot="change">Min 24 - Max 48</span>
<span slot="title">Humidity</span>
<span slot="value">{formatHumidity(humidity)}%</span>
<span slot="change">Min 24 - Max 48</span>
</Display>
<style lang="scss">
</style>
</style>

17
src/lib/components/displays/QueenDisplay.svelte
View File

@@ -1,18 +1,15 @@
<script lang="ts">
import Display from "$lib/components/Display.svelte";
import CrownIcon from "$lib/icons/crown.svelte";
import Display from '$lib/components/Display.svelte';
import CrownIcon from '$lib/icons/crown.svelte';
</script>
<Display>
<CrownIcon slot="icon" />
<CrownIcon slot="icon" />
<span slot="title">Resident Queen</span>
<span slot="value">Elisabeth</span>
<span slot="change">Age 453 days</span>
<span slot="title">Resident Queen</span>
<span slot="value">Elisabeth</span>
<span slot="change">Age 453 days</span>
</Display>
<style lang="scss">
</style>
</style>

38
src/lib/components/displays/SyncDisplay.svelte
View File

@@ -1,33 +1,31 @@
<script lang="ts">
import Display from "$lib/components/Display.svelte";
import SyncIcon from "$lib/icons/Sync.svelte";
import { diffTime } from "$lib/telemetryFormatters";
import Display from '$lib/components/Display.svelte';
import SyncIcon from '$lib/icons/Sync.svelte';
import { diffTime } from '$lib/telemetryFormatters';
export let date: string | undefined = undefined
export let date: string | undefined = undefined;
let interval: number;
let sinceUpdate: number;
let interval: number;
let sinceUpdate: number;
function resetInterval() {
if (interval) clearInterval(interval);
function resetInterval() {
if (interval) clearInterval(interval);
interval = setInterval(() => (sinceUpdate = Math.floor(sinceUpdate + 1)), 1000);
}
interval = setInterval(() => (sinceUpdate = Math.floor(sinceUpdate + 1)), 1000);
}
$: {
sinceUpdate = diffTime(date);
resetInterval()
}
$: {
sinceUpdate = diffTime(date);
resetInterval();
}
</script>
<Display>
<SyncIcon slot="icon" />
<SyncIcon slot="icon" />
<span slot="title">Last synced</span>
<span slot="value">{ sinceUpdate }s ago</span>
<span slot="title">Last synced</span>
<span slot="value">{sinceUpdate}s ago</span>
</Display>
<style lang="scss">
</style>
</style>

22
src/lib/components/displays/TemperatureDisplay.svelte
View File

@@ -1,22 +1,20 @@
<script lang="ts">
import Display from "$lib/components/Display.svelte";
import ThermometerIcon from "$lib/icons/thermometer.svelte";
import { formatTemperature } from "$lib/telemetryFormatters";
import Display from '$lib/components/Display.svelte';
import ThermometerIcon from '$lib/icons/thermometer.svelte';
import { formatTemperature } from '$lib/telemetryFormatters';
export let temperature: string | undefined = undefined
export let change: string | null = '';
export let temperature: string | undefined = undefined;
export let change: string | null = '';
</script>
<Display>
<ThermometerIcon slot="icon" />
<ThermometerIcon slot="icon" />
<span slot="title">Temperature</span>
<span slot="value">{ formatTemperature(temperature) }°C</span>
<span slot="title">Temperature</span>
<span slot="value">{formatTemperature(temperature)}°C</span>
<span slot="change">{change}</span>
<span slot="change">{change}</span>
</Display>
<style lang="scss">
</style>
</style>

19
src/lib/components/displays/WeightDisplay.svelte
View File

@@ -1,19 +1,18 @@
<script lang="ts">
import Display from "$lib/components/Display.svelte";
import WeightIcon from "$lib/icons/weight.svelte";
import { formatWeight } from "$lib/telemetryFormatters";
import Display from '$lib/components/Display.svelte';
import WeightIcon from '$lib/icons/weight.svelte';
import { formatWeight } from '$lib/telemetryFormatters';
export let weight: string | undefined = undefined
export let weight: string | undefined = undefined;
</script>
<Display>
<WeightIcon slot="icon" />
<WeightIcon slot="icon" />
<span slot="title">Weight</span>
<span slot="value">{ formatWeight(weight) }kg</span>
<span slot="change">Min 22.4 - Max 24.4</span>
<span slot="title">Weight</span>
<span slot="value">{formatWeight(weight)}kg</span>
<span slot="change">Min 22.4 - Max 24.4</span>
</Display>
<style lang="scss">
</style>
</style>

4
src/lib/components/modals/GatewayModal.svelte
View File

@@ -36,8 +36,8 @@
{#if selectedSection === segments[0]}
<section class="display">
<SyncDisplay date="{telemetry?.t || data?.t }" />
<TemperatureDisplay temperature="{telemetry?.temperature}" />
<SyncDisplay date={telemetry?.t || data?.t} />
<TemperatureDisplay temperature={telemetry?.temperature} />
</section>
<p>

2
src/lib/components/modals/ModalHeader.svelte
View File

@@ -5,7 +5,7 @@
export let title: string;
export let subtitle: string;
export let icon: any;
export let icon: any; // eslint-disable-line
let bodyTitleEl: HTMLElement;
let headerTitleEl: HTMLElement;

18
src/lib/icons/AlarmIcon.svelte
View File

@@ -20,11 +20,18 @@
</g>
</svg> -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 23.1152 22.1973">
<g>
<path d="M0 15.459C0 16.1719 0.546875 16.6406 1.47461 16.6406L5.5957 16.6406C5.67383 18.5254 7.14844 20.1758 9.20898 20.1758C11.2793 20.1758 12.7539 18.5352 12.832 16.6406L16.9531 16.6406C17.8711 16.6406 18.4277 16.1719 18.4277 15.459C18.4277 14.4824 17.4316 13.6035 16.5918 12.7344C15.9473 12.0605 15.7715 10.6738 15.6934 9.55078C15.625 5.70312 14.6289 3.22266 12.0312 2.28516C11.6992 1.00586 10.6543 0 9.20898 0C7.77344 0 6.71875 1.00586 6.39648 2.28516C3.79883 3.22266 2.80273 5.70312 2.73438 9.55078C2.65625 10.6738 2.48047 12.0605 1.83594 12.7344C0.986328 13.6035 0 14.4824 0 15.459ZM1.89453 15.166L1.89453 15.0488C2.07031 14.7656 2.65625 14.1895 3.16406 13.623C3.86719 12.8418 4.19922 11.582 4.28711 9.67773C4.36523 5.41016 5.63477 4.05273 7.30469 3.59375C7.54883 3.53516 7.68555 3.41797 7.69531 3.16406C7.72461 2.14844 8.31055 1.43555 9.20898 1.43555C10.1172 1.43555 10.6934 2.14844 10.7324 3.16406C10.7422 3.41797 10.8691 3.53516 11.1133 3.59375C12.793 4.05273 14.0625 5.41016 14.1406 9.67773C14.2285 11.582 14.5605 12.8418 15.2539 13.623C15.7715 14.1895 16.3477 14.7656 16.5234 15.0488L16.5234 15.166ZM7.11914 16.6406L11.3086 16.6406C11.2305 17.9688 10.3906 18.7988 9.20898 18.7988C8.03711 18.7988 7.1875 17.9688 7.11914 16.6406Z"/>
</g>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 23.1152 22.1973"
>
<g>
<path
d="M0 15.459C0 16.1719 0.546875 16.6406 1.47461 16.6406L5.5957 16.6406C5.67383 18.5254 7.14844 20.1758 9.20898 20.1758C11.2793 20.1758 12.7539 18.5352 12.832 16.6406L16.9531 16.6406C17.8711 16.6406 18.4277 16.1719 18.4277 15.459C18.4277 14.4824 17.4316 13.6035 16.5918 12.7344C15.9473 12.0605 15.7715 10.6738 15.6934 9.55078C15.625 5.70312 14.6289 3.22266 12.0312 2.28516C11.6992 1.00586 10.6543 0 9.20898 0C7.77344 0 6.71875 1.00586 6.39648 2.28516C3.79883 3.22266 2.80273 5.70312 2.73438 9.55078C2.65625 10.6738 2.48047 12.0605 1.83594 12.7344C0.986328 13.6035 0 14.4824 0 15.459ZM1.89453 15.166L1.89453 15.0488C2.07031 14.7656 2.65625 14.1895 3.16406 13.623C3.86719 12.8418 4.19922 11.582 4.28711 9.67773C4.36523 5.41016 5.63477 4.05273 7.30469 3.59375C7.54883 3.53516 7.68555 3.41797 7.69531 3.16406C7.72461 2.14844 8.31055 1.43555 9.20898 1.43555C10.1172 1.43555 10.6934 2.14844 10.7324 3.16406C10.7422 3.41797 10.8691 3.53516 11.1133 3.59375C12.793 4.05273 14.0625 5.41016 14.1406 9.67773C14.2285 11.582 14.5605 12.8418 15.2539 13.623C15.7715 14.1895 16.3477 14.7656 16.5234 15.0488L16.5234 15.166ZM7.11914 16.6406L11.3086 16.6406C11.2305 17.9688 10.3906 18.7988 9.20898 18.7988C8.03711 18.7988 7.1875 17.9688 7.11914 16.6406Z"
/>
</g>
</svg>
<!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 23.1152 22.1973">
@@ -32,4 +39,3 @@
<path d="M1.47461 16.6406L16.9531 16.6406C17.8711 16.6406 18.4277 16.1719 18.4277 15.459C18.4277 14.4824 17.4316 13.6035 16.5918 12.7344C15.9473 12.0605 15.7715 10.6738 15.6934 9.55078C15.625 5.80078 14.6289 3.22266 12.0312 2.28516C11.6602 1.00586 10.6543 0 9.20898 0C7.77344 0 6.75781 1.00586 6.39648 2.28516C3.79883 3.22266 2.80273 5.80078 2.73438 9.55078C2.65625 10.6738 2.48047 12.0605 1.83594 12.7344C0.986328 13.6035 0 14.4824 0 15.459C0 16.1719 0.546875 16.6406 1.47461 16.6406ZM9.20898 20.5566C10.8691 20.5566 12.0801 19.3457 12.207 17.9785L6.2207 17.9785C6.34766 19.3457 7.55859 20.5566 9.20898 20.5566Z"/>
</g>
</svg> -->

19
src/lib/icons/ArrowLeft.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
export let fill = 'var(--color)';
export let fill = 'var(--color)';
</script>
<!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 768 768">
@@ -19,8 +19,17 @@
</g>
</svg>
-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 18.1348 14.8145" {fill}>
<g>
<path d="M0 7.40234C0 7.64648 0.107422 7.87109 0.302734 8.05664L6.78711 14.5312C6.98242 14.7168 7.1875 14.8047 7.42188 14.8047C7.90039 14.8047 8.28125 14.4531 8.28125 13.9648C8.28125 13.7305 8.19336 13.4961 8.03711 13.3496L5.84961 11.123L1.98242 7.59766L1.77734 8.07617L4.92188 8.27148L17.2754 8.27148C17.7832 8.27148 18.1348 7.91016 18.1348 7.40234C18.1348 6.89453 17.7832 6.5332 17.2754 6.5332L4.92188 6.5332L1.77734 6.72852L1.98242 7.2168L5.84961 3.68164L8.03711 1.45508C8.19336 1.29883 8.28125 1.07422 8.28125 0.839844C8.28125 0.351562 7.90039 0 7.42188 0C7.1875 0 6.98242 0.078125 6.76758 0.292969L0.302734 6.74805C0.107422 6.93359 0 7.1582 0 7.40234Z"/>
</g>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 18.1348 14.8145"
{fill}
>
<g>
<path
d="M0 7.40234C0 7.64648 0.107422 7.87109 0.302734 8.05664L6.78711 14.5312C6.98242 14.7168 7.1875 14.8047 7.42188 14.8047C7.90039 14.8047 8.28125 14.4531 8.28125 13.9648C8.28125 13.7305 8.19336 13.4961 8.03711 13.3496L5.84961 11.123L1.98242 7.59766L1.77734 8.07617L4.92188 8.27148L17.2754 8.27148C17.7832 8.27148 18.1348 7.91016 18.1348 7.40234C18.1348 6.89453 17.7832 6.5332 17.2754 6.5332L4.92188 6.5332L1.77734 6.72852L1.98242 7.2168L5.84961 3.68164L8.03711 1.45508C8.19336 1.29883 8.28125 1.07422 8.28125 0.839844C8.28125 0.351562 7.90039 0 7.42188 0C7.1875 0 6.98242 0.078125 6.76758 0.292969L0.302734 6.74805C0.107422 6.93359 0 7.1582 0 7.40234Z"
/>
</g>
</svg>

25
src/lib/icons/Battery.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
export let fill = 'var(--color)';
export let fill = 'var(--color)';
</script>
<!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 768 768" {fill} style="transform: rotate(-90deg);">
@@ -7,7 +7,6 @@
<path d="M96 256h32v256h-32v-256zM160 512h32v-256h-32v256zM224 512h32v-256h-32v256zM288 512h32v-256h-32v256zM352 512h32v-256h-32v256zM416 512h32v-256h-32v256z"></path>
</svg> -->
<!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 23.0273 17.998" {fill}>
<g>
<rect height="17.998" opacity="0" width="23.0273" x="0" y="0"/>
@@ -17,10 +16,20 @@
</svg>
-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 23.0273 17.998" {fill}>
<g>
<path d="M3.06641 17.9785L19.9609 17.9785C22.0117 17.9785 23.0273 16.9727 23.0273 14.9609L23.0273 5.51758C23.0273 3.50586 22.0117 2.5 19.9609 2.5L18.6133 2.5L18.6133 1.19141C18.6133 0.449219 18.1836 0 17.4316 0L14.5508 0C13.8086 0 13.3789 0.449219 13.3789 1.19141L13.3789 2.5L9.6582 2.5L9.6582 1.19141C9.6582 0.449219 9.22852 0 8.47656 0L5.5957 0C4.84375 0 4.42383 0.449219 4.42383 1.19141L4.42383 2.5L3.06641 2.5C1.02539 2.5 0 3.50586 0 5.51758L0 14.9609C0 16.9727 1.02539 17.9785 3.06641 17.9785ZM1.57227 14.873L1.57227 5.60547C1.57227 4.58984 2.10938 4.07227 3.08594 4.07227L19.9414 4.07227C20.9082 4.07227 21.4551 4.58984 21.4551 5.60547L21.4551 14.873C21.4551 15.8887 20.9082 16.4062 19.9414 16.4062L3.08594 16.4062C2.10938 16.4062 1.57227 15.8887 1.57227 14.873Z"/>
<path d="M4.99023 10.957L9.0625 10.957C9.46289 10.957 9.77539 10.6445 9.77539 10.2441C9.77539 9.83398 9.46289 9.52148 9.0625 9.52148L4.99023 9.52148C4.58984 9.52148 4.26758 9.83398 4.26758 10.2441C4.26758 10.6445 4.58984 10.957 4.99023 10.957ZM15.9863 13.1836C16.3867 13.1836 16.6992 12.8711 16.6992 12.4707L16.6992 10.957L18.2129 10.957C18.6133 10.957 18.9355 10.6445 18.9355 10.2441C18.9355 9.83398 18.6133 9.52148 18.2129 9.52148L16.6992 9.52148L16.6992 8.00781C16.6992 7.60742 16.3867 7.28516 15.9863 7.28516C15.5859 7.28516 15.2637 7.60742 15.2637 8.00781L15.2637 9.52148L13.75 9.52148C13.3496 9.52148 13.0371 9.83398 13.0371 10.2441C13.0371 10.6445 13.3496 10.957 13.75 10.957L15.2637 10.957L15.2637 12.4707C15.2637 12.8711 15.5859 13.1836 15.9863 13.1836Z"/>
</g>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 23.0273 17.998"
{fill}
>
<g>
<path
d="M3.06641 17.9785L19.9609 17.9785C22.0117 17.9785 23.0273 16.9727 23.0273 14.9609L23.0273 5.51758C23.0273 3.50586 22.0117 2.5 19.9609 2.5L18.6133 2.5L18.6133 1.19141C18.6133 0.449219 18.1836 0 17.4316 0L14.5508 0C13.8086 0 13.3789 0.449219 13.3789 1.19141L13.3789 2.5L9.6582 2.5L9.6582 1.19141C9.6582 0.449219 9.22852 0 8.47656 0L5.5957 0C4.84375 0 4.42383 0.449219 4.42383 1.19141L4.42383 2.5L3.06641 2.5C1.02539 2.5 0 3.50586 0 5.51758L0 14.9609C0 16.9727 1.02539 17.9785 3.06641 17.9785ZM1.57227 14.873L1.57227 5.60547C1.57227 4.58984 2.10938 4.07227 3.08594 4.07227L19.9414 4.07227C20.9082 4.07227 21.4551 4.58984 21.4551 5.60547L21.4551 14.873C21.4551 15.8887 20.9082 16.4062 19.9414 16.4062L3.08594 16.4062C2.10938 16.4062 1.57227 15.8887 1.57227 14.873Z"
/>
<path
d="M4.99023 10.957L9.0625 10.957C9.46289 10.957 9.77539 10.6445 9.77539 10.2441C9.77539 9.83398 9.46289 9.52148 9.0625 9.52148L4.99023 9.52148C4.58984 9.52148 4.26758 9.83398 4.26758 10.2441C4.26758 10.6445 4.58984 10.957 4.99023 10.957ZM15.9863 13.1836C16.3867 13.1836 16.6992 12.8711 16.6992 12.4707L16.6992 10.957L18.2129 10.957C18.6133 10.957 18.9355 10.6445 18.9355 10.2441C18.9355 9.83398 18.6133 9.52148 18.2129 9.52148L16.6992 9.52148L16.6992 8.00781C16.6992 7.60742 16.3867 7.28516 15.9863 7.28516C15.5859 7.28516 15.2637 7.60742 15.2637 8.00781L15.2637 9.52148L13.75 9.52148C13.3496 9.52148 13.0371 9.83398 13.0371 10.2441C13.0371 10.6445 13.3496 10.957 13.75 10.957L15.2637 10.957L15.2637 12.4707C15.2637 12.8711 15.5859 13.1836 15.9863 13.1836Z"
/>
</g>
</svg>

21
src/lib/icons/DashboardIcon.svelte
View File

@@ -12,10 +12,19 @@
</svg>
-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 19.9023 17.2559">
<g>
<path d="M0 9.96094C0 12.5195 0.996094 14.873 2.61719 16.6406C3.04688 17.1191 3.79883 17.2363 4.375 16.6602L5.75195 15.293C6.05469 14.9902 6.05469 14.4824 5.75195 14.1797C5.44922 13.877 4.94141 13.877 4.63867 14.1797L3.56445 15.2539C2.38281 13.8184 1.66992 11.9922 1.66992 9.96094C1.66992 5.36133 5.3418 1.66016 9.95117 1.66016C14.5605 1.66016 18.2324 5.36133 18.2324 9.96094C18.2324 11.9922 17.5195 13.8184 16.3379 15.2539L15.2637 14.1797C14.9609 13.877 14.4531 13.877 14.1504 14.1797C13.8477 14.4824 13.8477 14.9902 14.1504 15.293L15.5273 16.6602C16.1035 17.2363 16.8555 17.1191 17.2852 16.6406C18.9062 14.873 19.9023 12.5195 19.9023 9.96094C19.9023 4.52148 15.4004 0 9.95117 0C4.51172 0 0 4.52148 0 9.96094ZM3.22266 9.17969L0.830078 9.17969L0.830078 10.752L3.22266 10.752C3.65234 10.752 4.00391 10.3906 4.00391 9.96094C4.00391 9.53125 3.65234 9.17969 3.22266 9.17969ZM9.16992 3.21289C9.16992 3.64258 9.52148 4.00391 9.95117 4.00391C10.3809 4.00391 10.7422 3.64258 10.7422 3.21289L10.7422 0.830078L9.16992 0.830078ZM14.1797 4.63867C13.877 4.94141 13.877 5.43945 14.1797 5.75195C14.4824 6.05469 14.9902 6.05469 15.293 5.75195L16.9727 4.0625L15.8691 2.94922ZM16.709 9.17969C16.2793 9.17969 15.9277 9.53125 15.9277 9.96094C15.9277 10.3906 16.2793 10.752 16.709 10.752L19.1016 10.752L19.1016 9.17969Z" />
<path d="M11.1914 11.2109C11.8359 10.5664 11.8359 9.64844 11.1914 9.00391C11.0742 8.88672 10.8203 8.70117 10.6641 8.59375L5.92773 5.30273C5.69336 5.13672 5.45898 5.18555 5.3125 5.32227C5.17578 5.47852 5.12695 5.70312 5.29297 5.9375L8.58398 10.6738C8.69141 10.8301 8.87695 11.084 8.99414 11.2109C9.63867 11.8457 10.5566 11.8457 11.1914 11.2109Z" />
</g>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 19.9023 17.2559"
>
<g>
<path
d="M0 9.96094C0 12.5195 0.996094 14.873 2.61719 16.6406C3.04688 17.1191 3.79883 17.2363 4.375 16.6602L5.75195 15.293C6.05469 14.9902 6.05469 14.4824 5.75195 14.1797C5.44922 13.877 4.94141 13.877 4.63867 14.1797L3.56445 15.2539C2.38281 13.8184 1.66992 11.9922 1.66992 9.96094C1.66992 5.36133 5.3418 1.66016 9.95117 1.66016C14.5605 1.66016 18.2324 5.36133 18.2324 9.96094C18.2324 11.9922 17.5195 13.8184 16.3379 15.2539L15.2637 14.1797C14.9609 13.877 14.4531 13.877 14.1504 14.1797C13.8477 14.4824 13.8477 14.9902 14.1504 15.293L15.5273 16.6602C16.1035 17.2363 16.8555 17.1191 17.2852 16.6406C18.9062 14.873 19.9023 12.5195 19.9023 9.96094C19.9023 4.52148 15.4004 0 9.95117 0C4.51172 0 0 4.52148 0 9.96094ZM3.22266 9.17969L0.830078 9.17969L0.830078 10.752L3.22266 10.752C3.65234 10.752 4.00391 10.3906 4.00391 9.96094C4.00391 9.53125 3.65234 9.17969 3.22266 9.17969ZM9.16992 3.21289C9.16992 3.64258 9.52148 4.00391 9.95117 4.00391C10.3809 4.00391 10.7422 3.64258 10.7422 3.21289L10.7422 0.830078L9.16992 0.830078ZM14.1797 4.63867C13.877 4.94141 13.877 5.43945 14.1797 5.75195C14.4824 6.05469 14.9902 6.05469 15.293 5.75195L16.9727 4.0625L15.8691 2.94922ZM16.709 9.17969C16.2793 9.17969 15.9277 9.53125 15.9277 9.96094C15.9277 10.3906 16.2793 10.752 16.709 10.752L19.1016 10.752L19.1016 9.17969Z"
/>
<path
d="M11.1914 11.2109C11.8359 10.5664 11.8359 9.64844 11.1914 9.00391C11.0742 8.88672 10.8203 8.70117 10.6641 8.59375L5.92773 5.30273C5.69336 5.13672 5.45898 5.18555 5.3125 5.32227C5.17578 5.47852 5.12695 5.70312 5.29297 5.9375L8.58398 10.6738C8.69141 10.8301 8.87695 11.084 8.99414 11.2109C9.63867 11.8457 10.5566 11.8457 11.1914 11.2109Z"
/>
</g>
</svg>

16
src/lib/icons/SettingIcon.svelte
View File

@@ -5,8 +5,16 @@
</svg>
-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 21.6016 21.2817">
<g>
<path d="M10.791 19.9719C11.0254 19.9719 11.2598 19.9621 11.4941 19.9426L12.041 20.968C12.1582 21.2024 12.3926 21.3196 12.666 21.2707C12.9297 21.2219 13.1152 21.0266 13.1445 20.7532L13.3203 19.6203C13.7695 19.5032 14.209 19.3371 14.6387 19.1516L15.4785 19.8938C15.6738 20.0696 15.9473 20.1282 16.2012 19.9817C16.4258 19.8547 16.5332 19.6008 16.4648 19.3274L16.2402 18.2239C16.6113 17.9504 16.9824 17.6477 17.3145 17.3254L18.3496 17.7551C18.623 17.8625 18.877 17.7942 19.0723 17.5696C19.2285 17.3742 19.2578 17.1008 19.1113 16.8664L18.5156 15.8996C18.7695 15.5188 19.0039 15.1086 19.2188 14.6789L20.3516 14.718C20.6055 14.7375 20.8594 14.6008 20.9375 14.3274C21.0254 14.0735 20.9375 13.8196 20.7324 13.6535L19.8535 12.9504C19.9707 12.5012 20.0488 12.0324 20.0879 11.5442L21.1523 11.2024C21.4258 11.1145 21.6016 10.9094 21.6016 10.636C21.6016 10.3528 21.4258 10.1574 21.1523 10.0696L20.0879 9.72776C20.0488 9.23948 19.9707 8.7805 19.8535 8.32151L20.7324 7.60862C20.9277 7.45237 21.0254 7.20823 20.9375 6.95432C20.8594 6.68089 20.6055 6.54417 20.3516 6.5637L19.2188 6.593C19.0039 6.16331 18.7695 5.76292 18.5156 5.36253L19.1113 4.39573C19.248 4.18089 19.2285 3.90745 19.0723 3.71214C18.877 3.47776 18.623 3.41917 18.3594 3.52659L17.3145 3.93675C16.9824 3.63401 16.6113 3.32151 16.2402 3.04807L16.4648 1.95432C16.5234 1.66136 16.4258 1.41721 16.2012 1.30003C15.9473 1.15354 15.6738 1.19261 15.4785 1.37815L14.6387 2.11057C14.209 1.93479 13.7695 1.77854 13.3203 1.65159L13.1445 0.528543C13.1152 0.255106 12.9297 0.059793 12.666 0.0109649C12.3926-0.0378632 12.1484 0.0793243 12.041 0.303934L11.4941 1.32932C11.2598 1.30979 11.0254 1.30003 10.791 1.30003C10.5469 1.30003 10.3223 1.30979 10.0781 1.32932L9.54102 0.303934C9.42383 0.0793243 9.18945-0.0378632 8.91602 0.0109649C8.65234 0.059793 8.48633 0.255106 8.4375 0.528543L8.26172 1.64182C7.8125 1.77854 7.37305 1.93479 6.93359 2.11057L6.10352 1.38792C5.89844 1.19261 5.63477 1.15354 5.37109 1.30003C5.15625 1.41721 5.05859 1.66136 5.11719 1.95432L5.33203 3.04807C4.9707 3.32151 4.58984 3.63401 4.25781 3.93675L3.22266 3.52659C2.95898 3.41917 2.70508 3.47776 2.50977 3.71214C2.35352 3.90745 2.32422 4.18089 2.46094 4.39573L3.06641 5.36253C2.8125 5.76292 2.58789 6.16331 2.36328 6.593L1.23047 6.5637C0.966797 6.54417 0.722656 6.68089 0.644531 6.95432C0.556641 7.20823 0.634766 7.45237 0.849609 7.60862L1.72852 8.32151C1.61133 8.7805 1.5332 9.23948 1.50391 9.72776L0.419922 10.0696C0.146484 10.1477 0 10.3528 0 10.636C0 10.9192 0.146484 11.1145 0.419922 11.2024L1.50391 11.5442C1.5332 12.0324 1.61133 12.5012 1.72852 12.9504L0.849609 13.6535C0.634766 13.8196 0.556641 14.0735 0.644531 14.3274C0.722656 14.6008 0.966797 14.7375 1.23047 14.718L2.36328 14.6789C2.58789 15.1086 2.8125 15.5188 3.06641 15.8996L2.4707 16.8664C2.33398 17.1008 2.34375 17.3742 2.50977 17.5696C2.70508 17.7942 2.95898 17.8625 3.23242 17.7551L4.25781 17.3254C4.58984 17.6477 4.9707 17.9504 5.33203 18.2239L5.11719 19.3274C5.06836 19.6008 5.15625 19.8547 5.37109 19.9817C5.63477 20.1282 5.89844 20.0696 6.10352 19.8938L6.93359 19.1516C7.37305 19.3371 7.8125 19.5032 8.26172 19.6301L8.4375 20.7532C8.48633 21.0266 8.65234 21.2219 8.91602 21.2707C9.18945 21.3196 9.42383 21.2024 9.54102 20.968L10.0781 19.9426C10.3125 19.9621 10.5469 19.9719 10.791 19.9719ZM10.791 18.3996C6.45508 18.3996 3.13477 14.9621 3.13477 10.6457C3.13477 6.31956 6.45508 2.87229 10.791 2.87229C15.127 2.87229 18.4668 6.31956 18.4668 10.6457C18.4668 14.9621 15.127 18.3996 10.791 18.3996ZM9.0918 9.14182L10.2441 8.4094L6.98242 2.8137L5.78125 3.48753ZM12.9688 11.3L19.4629 11.3L19.4629 9.95237L12.9688 9.95237ZM10.2637 12.8918L9.12109 12.1496L5.68359 17.7551L6.875 18.4582ZM10.7715 13.2043C12.1875 13.2043 13.3301 12.0715 13.3301 10.6555C13.3301 9.23948 12.1875 8.0969 10.7715 8.0969C9.35547 8.0969 8.22266 9.23948 8.22266 10.6555C8.22266 12.0715 9.35547 13.2043 10.7715 13.2043ZM10.7715 11.7395C10.1562 11.7395 9.67773 11.2805 9.67773 10.6555C9.67773 10.0305 10.1562 9.55198 10.7715 9.55198C11.3965 9.55198 11.875 10.0305 11.875 10.6555C11.875 11.2805 11.3965 11.7395 10.7715 11.7395Z"/>
</g>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 21.6016 21.2817"
>
<g>
<path
d="M10.791 19.9719C11.0254 19.9719 11.2598 19.9621 11.4941 19.9426L12.041 20.968C12.1582 21.2024 12.3926 21.3196 12.666 21.2707C12.9297 21.2219 13.1152 21.0266 13.1445 20.7532L13.3203 19.6203C13.7695 19.5032 14.209 19.3371 14.6387 19.1516L15.4785 19.8938C15.6738 20.0696 15.9473 20.1282 16.2012 19.9817C16.4258 19.8547 16.5332 19.6008 16.4648 19.3274L16.2402 18.2239C16.6113 17.9504 16.9824 17.6477 17.3145 17.3254L18.3496 17.7551C18.623 17.8625 18.877 17.7942 19.0723 17.5696C19.2285 17.3742 19.2578 17.1008 19.1113 16.8664L18.5156 15.8996C18.7695 15.5188 19.0039 15.1086 19.2188 14.6789L20.3516 14.718C20.6055 14.7375 20.8594 14.6008 20.9375 14.3274C21.0254 14.0735 20.9375 13.8196 20.7324 13.6535L19.8535 12.9504C19.9707 12.5012 20.0488 12.0324 20.0879 11.5442L21.1523 11.2024C21.4258 11.1145 21.6016 10.9094 21.6016 10.636C21.6016 10.3528 21.4258 10.1574 21.1523 10.0696L20.0879 9.72776C20.0488 9.23948 19.9707 8.7805 19.8535 8.32151L20.7324 7.60862C20.9277 7.45237 21.0254 7.20823 20.9375 6.95432C20.8594 6.68089 20.6055 6.54417 20.3516 6.5637L19.2188 6.593C19.0039 6.16331 18.7695 5.76292 18.5156 5.36253L19.1113 4.39573C19.248 4.18089 19.2285 3.90745 19.0723 3.71214C18.877 3.47776 18.623 3.41917 18.3594 3.52659L17.3145 3.93675C16.9824 3.63401 16.6113 3.32151 16.2402 3.04807L16.4648 1.95432C16.5234 1.66136 16.4258 1.41721 16.2012 1.30003C15.9473 1.15354 15.6738 1.19261 15.4785 1.37815L14.6387 2.11057C14.209 1.93479 13.7695 1.77854 13.3203 1.65159L13.1445 0.528543C13.1152 0.255106 12.9297 0.059793 12.666 0.0109649C12.3926-0.0378632 12.1484 0.0793243 12.041 0.303934L11.4941 1.32932C11.2598 1.30979 11.0254 1.30003 10.791 1.30003C10.5469 1.30003 10.3223 1.30979 10.0781 1.32932L9.54102 0.303934C9.42383 0.0793243 9.18945-0.0378632 8.91602 0.0109649C8.65234 0.059793 8.48633 0.255106 8.4375 0.528543L8.26172 1.64182C7.8125 1.77854 7.37305 1.93479 6.93359 2.11057L6.10352 1.38792C5.89844 1.19261 5.63477 1.15354 5.37109 1.30003C5.15625 1.41721 5.05859 1.66136 5.11719 1.95432L5.33203 3.04807C4.9707 3.32151 4.58984 3.63401 4.25781 3.93675L3.22266 3.52659C2.95898 3.41917 2.70508 3.47776 2.50977 3.71214C2.35352 3.90745 2.32422 4.18089 2.46094 4.39573L3.06641 5.36253C2.8125 5.76292 2.58789 6.16331 2.36328 6.593L1.23047 6.5637C0.966797 6.54417 0.722656 6.68089 0.644531 6.95432C0.556641 7.20823 0.634766 7.45237 0.849609 7.60862L1.72852 8.32151C1.61133 8.7805 1.5332 9.23948 1.50391 9.72776L0.419922 10.0696C0.146484 10.1477 0 10.3528 0 10.636C0 10.9192 0.146484 11.1145 0.419922 11.2024L1.50391 11.5442C1.5332 12.0324 1.61133 12.5012 1.72852 12.9504L0.849609 13.6535C0.634766 13.8196 0.556641 14.0735 0.644531 14.3274C0.722656 14.6008 0.966797 14.7375 1.23047 14.718L2.36328 14.6789C2.58789 15.1086 2.8125 15.5188 3.06641 15.8996L2.4707 16.8664C2.33398 17.1008 2.34375 17.3742 2.50977 17.5696C2.70508 17.7942 2.95898 17.8625 3.23242 17.7551L4.25781 17.3254C4.58984 17.6477 4.9707 17.9504 5.33203 18.2239L5.11719 19.3274C5.06836 19.6008 5.15625 19.8547 5.37109 19.9817C5.63477 20.1282 5.89844 20.0696 6.10352 19.8938L6.93359 19.1516C7.37305 19.3371 7.8125 19.5032 8.26172 19.6301L8.4375 20.7532C8.48633 21.0266 8.65234 21.2219 8.91602 21.2707C9.18945 21.3196 9.42383 21.2024 9.54102 20.968L10.0781 19.9426C10.3125 19.9621 10.5469 19.9719 10.791 19.9719ZM10.791 18.3996C6.45508 18.3996 3.13477 14.9621 3.13477 10.6457C3.13477 6.31956 6.45508 2.87229 10.791 2.87229C15.127 2.87229 18.4668 6.31956 18.4668 10.6457C18.4668 14.9621 15.127 18.3996 10.791 18.3996ZM9.0918 9.14182L10.2441 8.4094L6.98242 2.8137L5.78125 3.48753ZM12.9688 11.3L19.4629 11.3L19.4629 9.95237L12.9688 9.95237ZM10.2637 12.8918L9.12109 12.1496L5.68359 17.7551L6.875 18.4582ZM10.7715 13.2043C12.1875 13.2043 13.3301 12.0715 13.3301 10.6555C13.3301 9.23948 12.1875 8.0969 10.7715 8.0969C9.35547 8.0969 8.22266 9.23948 8.22266 10.6555C8.22266 12.0715 9.35547 13.2043 10.7715 13.2043ZM10.7715 11.7395C10.1562 11.7395 9.67773 11.2805 9.67773 10.6555C9.67773 10.0305 10.1562 9.55198 10.7715 9.55198C11.3965 9.55198 11.875 10.0305 11.875 10.6555C11.875 11.2805 11.3965 11.7395 10.7715 11.7395Z"
/>
</g>
</svg>

20
src/lib/icons/Sync.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
export let fill = 'var(--color)'
export let fill = 'var(--color)';
</script>
<!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 768 768" {fill}>
@@ -8,9 +8,17 @@
</svg>
-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 23.8839 19.9316" {fill}>
<g>
<path d="M0.19663 9.99023C-0.184229 10.5273-0.00844799 11.0059 0.694677 11.0059L2.04233 11.0059C2.56968 15.9766 6.85679 19.9219 11.9447 19.9219C14.9232 19.9219 17.6185 18.5645 19.4544 16.4551C19.8158 16.0352 19.7669 15.5078 19.3861 15.2344C19.0052 14.9609 18.5365 15.0586 18.224 15.4199C16.7103 17.168 14.4642 18.2617 11.9447 18.2617C7.68686 18.2617 4.22007 15.1074 3.72202 11.0059L5.1771 11.0059C5.87046 11.0059 6.04624 10.5273 5.67515 10L3.48765 6.88477C3.17515 6.43555 2.7064 6.42578 2.38413 6.88477ZM4.44468 3.4668C4.07358 3.88672 4.12241 4.4043 4.51304 4.67773C4.8939 4.95117 5.35288 4.86328 5.67515 4.50195C7.19858 2.76367 9.44468 1.66016 11.9447 1.66016C16.1927 1.66016 19.6595 4.81445 20.1673 8.92578L18.7123 8.92578C18.0189 8.92578 17.8431 9.39453 18.2142 9.93164L20.4017 13.0469C20.7142 13.4961 21.183 13.5059 21.5052 13.0469L23.683 9.94141C24.0736 9.39453 23.888 8.92578 23.1849 8.92578L21.847 8.92578C21.3099 3.95508 17.0326 0 11.9447 0C8.96616 0 6.28061 1.34766 4.44468 3.4668Z"/>
</g>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 23.8839 19.9316"
{fill}
>
<g>
<path
d="M0.19663 9.99023C-0.184229 10.5273-0.00844799 11.0059 0.694677 11.0059L2.04233 11.0059C2.56968 15.9766 6.85679 19.9219 11.9447 19.9219C14.9232 19.9219 17.6185 18.5645 19.4544 16.4551C19.8158 16.0352 19.7669 15.5078 19.3861 15.2344C19.0052 14.9609 18.5365 15.0586 18.224 15.4199C16.7103 17.168 14.4642 18.2617 11.9447 18.2617C7.68686 18.2617 4.22007 15.1074 3.72202 11.0059L5.1771 11.0059C5.87046 11.0059 6.04624 10.5273 5.67515 10L3.48765 6.88477C3.17515 6.43555 2.7064 6.42578 2.38413 6.88477ZM4.44468 3.4668C4.07358 3.88672 4.12241 4.4043 4.51304 4.67773C4.8939 4.95117 5.35288 4.86328 5.67515 4.50195C7.19858 2.76367 9.44468 1.66016 11.9447 1.66016C16.1927 1.66016 19.6595 4.81445 20.1673 8.92578L18.7123 8.92578C18.0189 8.92578 17.8431 9.39453 18.2142 9.93164L20.4017 13.0469C20.7142 13.4961 21.183 13.5059 21.5052 13.0469L23.683 9.94141C24.0736 9.39453 23.888 8.92578 23.1849 8.92578L21.847 8.92578C21.3099 3.95508 17.0326 0 11.9447 0C8.96616 0 6.28061 1.34766 4.44468 3.4668Z"
/>
</g>
</svg>

23
src/lib/icons/batteryLow.svelte
View File

@@ -1,10 +1,21 @@
<script lang="ts">
export let fill = 'var(--color)';
export let fill = 'var(--color)';
</script>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 28.6816 17.998" {fill}>
<g>
<path d="M27.4023 15.5469C28.0957 15.5469 28.6816 14.9805 28.6816 14.3164C28.6816 13.6426 28.1055 13.0859 27.4023 13.0859C26.6992 13.0859 26.123 13.6426 26.123 14.3164C26.123 14.9805 26.709 15.5469 27.4023 15.5469ZM27.4023 11.2109C27.8809 11.2109 28.2227 10.8789 28.2422 10.3809L28.4375 3.4668C28.457 2.8418 28.0469 2.42188 27.4023 2.42188C26.7578 2.42188 26.3477 2.8418 26.3672 3.4668L26.5723 10.3809C26.5918 10.8789 26.9238 11.2109 27.4023 11.2109Z" />
<path d="M4.99023 10.957L9.0625 10.957C9.46289 10.957 9.77539 10.6445 9.77539 10.2441C9.77539 9.83398 9.46289 9.52148 9.0625 9.52148L4.99023 9.52148C4.58984 9.52148 4.26758 9.83398 4.26758 10.2441C4.26758 10.6445 4.58984 10.957 4.99023 10.957ZM15.9863 13.1836C16.3867 13.1836 16.6992 12.8711 16.6992 12.4707L16.6992 10.957L18.2129 10.957C18.6133 10.957 18.9355 10.6445 18.9355 10.2441C18.9355 9.83398 18.6133 9.52148 18.2129 9.52148L16.6992 9.52148L16.6992 8.00781C16.6992 7.60742 16.3867 7.28516 15.9863 7.28516C15.5859 7.28516 15.2637 7.60742 15.2637 8.00781L15.2637 9.52148L13.75 9.52148C13.3496 9.52148 13.0371 9.83398 13.0371 10.2441C13.0371 10.6445 13.3496 10.957 13.75 10.957L15.2637 10.957L15.2637 12.4707C15.2637 12.8711 15.5859 13.1836 15.9863 13.1836ZM3.06641 17.9785L19.9609 17.9785C22.0117 17.9785 23.0273 16.9727 23.0273 14.9609L23.0273 5.51758C23.0273 3.50586 22.0117 2.5 19.9609 2.5L18.6133 2.5L18.6133 1.19141C18.6133 0.449219 18.1836 0 17.4316 0L14.5508 0C13.8086 0 13.3789 0.449219 13.3789 1.19141L13.3789 2.5L9.6582 2.5L9.6582 1.19141C9.6582 0.449219 9.22852 0 8.47656 0L5.5957 0C4.84375 0 4.42383 0.449219 4.42383 1.19141L4.42383 2.5L3.06641 2.5C1.02539 2.5 0 3.50586 0 5.51758L0 14.9609C0 16.9727 1.02539 17.9785 3.06641 17.9785ZM1.57227 14.873L1.57227 5.60547C1.57227 4.58984 2.10938 4.07227 3.08594 4.07227L19.9414 4.07227C20.9082 4.07227 21.4551 4.58984 21.4551 5.60547L21.4551 14.873C21.4551 15.8887 20.9082 16.4062 19.9414 16.4062L3.08594 16.4062C2.10938 16.4062 1.57227 15.8887 1.57227 14.873Z" />
</g>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 28.6816 17.998"
{fill}
>
<g>
<path
d="M27.4023 15.5469C28.0957 15.5469 28.6816 14.9805 28.6816 14.3164C28.6816 13.6426 28.1055 13.0859 27.4023 13.0859C26.6992 13.0859 26.123 13.6426 26.123 14.3164C26.123 14.9805 26.709 15.5469 27.4023 15.5469ZM27.4023 11.2109C27.8809 11.2109 28.2227 10.8789 28.2422 10.3809L28.4375 3.4668C28.457 2.8418 28.0469 2.42188 27.4023 2.42188C26.7578 2.42188 26.3477 2.8418 26.3672 3.4668L26.5723 10.3809C26.5918 10.8789 26.9238 11.2109 27.4023 11.2109Z"
/>
<path
d="M4.99023 10.957L9.0625 10.957C9.46289 10.957 9.77539 10.6445 9.77539 10.2441C9.77539 9.83398 9.46289 9.52148 9.0625 9.52148L4.99023 9.52148C4.58984 9.52148 4.26758 9.83398 4.26758 10.2441C4.26758 10.6445 4.58984 10.957 4.99023 10.957ZM15.9863 13.1836C16.3867 13.1836 16.6992 12.8711 16.6992 12.4707L16.6992 10.957L18.2129 10.957C18.6133 10.957 18.9355 10.6445 18.9355 10.2441C18.9355 9.83398 18.6133 9.52148 18.2129 9.52148L16.6992 9.52148L16.6992 8.00781C16.6992 7.60742 16.3867 7.28516 15.9863 7.28516C15.5859 7.28516 15.2637 7.60742 15.2637 8.00781L15.2637 9.52148L13.75 9.52148C13.3496 9.52148 13.0371 9.83398 13.0371 10.2441C13.0371 10.6445 13.3496 10.957 13.75 10.957L15.2637 10.957L15.2637 12.4707C15.2637 12.8711 15.5859 13.1836 15.9863 13.1836ZM3.06641 17.9785L19.9609 17.9785C22.0117 17.9785 23.0273 16.9727 23.0273 14.9609L23.0273 5.51758C23.0273 3.50586 22.0117 2.5 19.9609 2.5L18.6133 2.5L18.6133 1.19141C18.6133 0.449219 18.1836 0 17.4316 0L14.5508 0C13.8086 0 13.3789 0.449219 13.3789 1.19141L13.3789 2.5L9.6582 2.5L9.6582 1.19141C9.6582 0.449219 9.22852 0 8.47656 0L5.5957 0C4.84375 0 4.42383 0.449219 4.42383 1.19141L4.42383 2.5L3.06641 2.5C1.02539 2.5 0 3.50586 0 5.51758L0 14.9609C0 16.9727 1.02539 17.9785 3.06641 17.9785ZM1.57227 14.873L1.57227 5.60547C1.57227 4.58984 2.10938 4.07227 3.08594 4.07227L19.9414 4.07227C20.9082 4.07227 21.4551 4.58984 21.4551 5.60547L21.4551 14.873C21.4551 15.8887 20.9082 16.4062 19.9414 16.4062L3.08594 16.4062C2.10938 16.4062 1.57227 15.8887 1.57227 14.873Z"
/>
</g>
</svg>

17
src/lib/icons/crown.svelte
View File

@@ -8,8 +8,17 @@
</svg>
-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 25.0488 20.3418" fill="var(--brand)">
<g>
<path d="M2.5293 9.11133C3.91602 9.11133 5.04883 7.97852 5.04883 6.57227C5.04883 5.19531 3.91602 4.05273 2.5293 4.05273C1.13281 4.05273 0 5.18555 0 6.57227C0 7.97852 1.14258 9.11133 2.5293 9.11133ZM2.5293 7.58789C1.98242 7.58789 1.52344 7.12891 1.52344 6.57227C1.52344 6.01562 1.98242 5.57617 2.5293 5.57617C3.06641 5.57617 3.52539 6.03516 3.52539 6.57227C3.52539 7.12891 3.08594 7.58789 2.5293 7.58789ZM12.5293 5.04883C13.916 5.04883 15.0488 3.91602 15.0488 2.51953C15.0488 1.14258 13.916 0 12.5293 0C11.123 0 10 1.13281 10 2.51953C10 3.91602 11.1328 5.04883 12.5293 5.04883ZM12.5293 3.52539C11.9824 3.52539 11.5234 3.06641 11.5234 2.51953C11.5234 1.96289 11.9824 1.52344 12.5293 1.52344C13.0664 1.52344 13.5254 1.98242 13.5254 2.51953C13.5254 3.06641 13.0859 3.52539 12.5293 3.52539ZM22.5195 9.11133C23.9062 9.11133 25.0488 7.97852 25.0488 6.57227C25.0488 5.18555 23.916 4.05273 22.5195 4.05273C21.1328 4.05273 20 5.19531 20 6.57227C20 7.97852 21.1328 9.11133 22.5195 9.11133ZM22.5195 7.58789C21.9629 7.58789 21.5234 7.12891 21.5234 6.57227C21.5234 6.03516 21.9824 5.57617 22.5195 5.57617C23.0664 5.57617 23.5254 6.01562 23.5254 6.57227C23.5254 7.12891 23.0664 7.58789 22.5195 7.58789ZM3.69141 8.4668L6.78711 10.3711C7.41211 10.752 8.44727 10.7715 9.0918 9.90234L12.7832 4.95117L11.3867 4.35547L8.01758 8.87695C7.8418 9.13086 7.65625 9.17969 7.32422 8.97461L4.47266 7.2168ZM21.3574 8.45703L20.5762 7.20703L17.7441 8.94531C17.3926 9.16992 17.1973 9.10156 17.002 8.83789L13.6621 4.33594L12.2754 4.94141L15.9766 9.91211C16.6016 10.752 17.627 10.752 18.1934 10.4004ZM4.92188 15.625L20.1367 15.625L20.1367 14.1504L4.92188 14.1504ZM2.48047 8.68164L4.47266 16.7969C4.84375 18.3301 5.6543 19.1016 7.26562 19.1016L17.7832 19.1016C19.4043 19.1016 20.2051 18.3301 20.5859 16.7969L22.5781 8.68164L21.2012 8.05664L19.1211 16.6113C18.9551 17.3047 18.5352 17.627 17.8027 17.627L7.25586 17.627C6.52344 17.627 6.10352 17.3047 5.9375 16.6113L3.84766 8.05664Z"/>
</g>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 25.0488 20.3418"
fill="var(--brand)"
>
<g>
<path
d="M2.5293 9.11133C3.91602 9.11133 5.04883 7.97852 5.04883 6.57227C5.04883 5.19531 3.91602 4.05273 2.5293 4.05273C1.13281 4.05273 0 5.18555 0 6.57227C0 7.97852 1.14258 9.11133 2.5293 9.11133ZM2.5293 7.58789C1.98242 7.58789 1.52344 7.12891 1.52344 6.57227C1.52344 6.01562 1.98242 5.57617 2.5293 5.57617C3.06641 5.57617 3.52539 6.03516 3.52539 6.57227C3.52539 7.12891 3.08594 7.58789 2.5293 7.58789ZM12.5293 5.04883C13.916 5.04883 15.0488 3.91602 15.0488 2.51953C15.0488 1.14258 13.916 0 12.5293 0C11.123 0 10 1.13281 10 2.51953C10 3.91602 11.1328 5.04883 12.5293 5.04883ZM12.5293 3.52539C11.9824 3.52539 11.5234 3.06641 11.5234 2.51953C11.5234 1.96289 11.9824 1.52344 12.5293 1.52344C13.0664 1.52344 13.5254 1.98242 13.5254 2.51953C13.5254 3.06641 13.0859 3.52539 12.5293 3.52539ZM22.5195 9.11133C23.9062 9.11133 25.0488 7.97852 25.0488 6.57227C25.0488 5.18555 23.916 4.05273 22.5195 4.05273C21.1328 4.05273 20 5.19531 20 6.57227C20 7.97852 21.1328 9.11133 22.5195 9.11133ZM22.5195 7.58789C21.9629 7.58789 21.5234 7.12891 21.5234 6.57227C21.5234 6.03516 21.9824 5.57617 22.5195 5.57617C23.0664 5.57617 23.5254 6.01562 23.5254 6.57227C23.5254 7.12891 23.0664 7.58789 22.5195 7.58789ZM3.69141 8.4668L6.78711 10.3711C7.41211 10.752 8.44727 10.7715 9.0918 9.90234L12.7832 4.95117L11.3867 4.35547L8.01758 8.87695C7.8418 9.13086 7.65625 9.17969 7.32422 8.97461L4.47266 7.2168ZM21.3574 8.45703L20.5762 7.20703L17.7441 8.94531C17.3926 9.16992 17.1973 9.10156 17.002 8.83789L13.6621 4.33594L12.2754 4.94141L15.9766 9.91211C16.6016 10.752 17.627 10.752 18.1934 10.4004ZM4.92188 15.625L20.1367 15.625L20.1367 14.1504L4.92188 14.1504ZM2.48047 8.68164L4.47266 16.7969C4.84375 18.3301 5.6543 19.1016 7.26562 19.1016L17.7832 19.1016C19.4043 19.1016 20.2051 18.3301 20.5859 16.7969L22.5781 8.68164L21.2012 8.05664L19.1211 16.6113C18.9551 17.3047 18.5352 17.627 17.8027 17.627L7.25586 17.627C6.52344 17.627 6.10352 17.3047 5.9375 16.6113L3.84766 8.05664Z"
/>
</g>
</svg>

31
src/lib/icons/hive.svelte
View File

@@ -1,13 +1,19 @@
<script lang="ts">
export let fill = 'var(--color)'
export let fill = 'var(--color)';
</script>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" viewBox="0 0 540.000000 540.000000" {fill}
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,540.000000) scale(0.100000,-0.100000)">
<path d="M1708 5180 c-227 -39 -375 -286 -292 -489 8 -18 14 -35 14 -37 0 -2
<svg
version="1.0"
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 540.000000 540.000000"
{fill}
preserveAspectRatio="xMidYMid meet"
>
<g transform="translate(0.000000,540.000000) scale(0.100000,-0.100000)">
<path
d="M1708 5180 c-227 -39 -375 -286 -292 -489 8 -18 14 -35 14 -37 0 -2
-19 -4 -43 -4 -64 0 -155 -27 -216 -63 -177 -106 -253 -341 -171 -531 l19 -46
-38 0 c-168 0 -327 -98 -402 -248 -33 -64 -34 -71 -34 -182 0 -104 3 -120 26
-168 l26 -52 -26 -6 c-287 -62 -433 -342 -312 -599 52 -113 179 -213 291 -231
@@ -53,9 +59,12 @@ c-492 0 -789 4 -818 11 -66 15 -115 53 -145 112 -40 81 -30 168 28 234 65 74
-273 0 -295 5 -355 73 -108 123 -44 312 118 346 33 7 294 11 765 11 l716 0 29
29 c23 23 29 38 29 71 0 43 -20 83 -48 97 -9 4 -268 10 -574 13 -545 5 -557 5
-585 26 -54 40 -75 83 -71 144 5 64 25 98 78 129 35 21 42 21 997 18 954 -2
962 -2 989 -23z"/>
<path d="M2571 2064 c-212 -57 -350 -268 -314 -480 16 -94 62 -181 128 -243
962 -2 989 -23z"
/>
<path
d="M2571 2064 c-212 -57 -350 -268 -314 -480 16 -94 62 -181 128 -243
130 -123 317 -153 481 -75 164 77 265 273 235 450 -31 174 -157 311 -321 348
-84 19 -138 19 -209 0z"/>
</g>
-84 19 -138 19 -209 0z"
/>
</g>
</svg>

35
src/lib/icons/humidity.svelte
View File

@@ -5,12 +5,31 @@
</svg>
-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 22.34 21.084" fill="#56CCF2">
<g>
<path d="M3.96111 18.4082C8.30681 18.4082 10.6603 14.7168 14.7521 14.7168C15.7092 14.7168 16.5685 14.9316 17.5646 15.498C17.9748 15.7324 18.3654 15.5762 18.5705 15.2832C18.8146 14.9316 18.7951 14.4043 18.2482 14.082C17.1447 13.4473 16.0021 13.1445 14.7521 13.1445C10.3283 13.1445 7.99431 16.8359 3.96111 16.8359C2.99431 16.8359 2.1447 16.6211 1.14861 16.0449C0.738454 15.8105 0.338063 15.9668 0.142751 16.2695C-0.0916244 16.6211-0.0720932 17.1582 0.465016 17.4609C1.56853 18.1055 2.71111 18.4082 3.96111 18.4082Z"/>
<path d="M3.97088 13.1738C8.31658 13.1738 10.6701 9.48242 14.7619 9.48242C15.7189 9.48242 16.5783 9.69727 17.5744 10.2637C17.9845 10.498 18.3752 10.3418 18.5803 10.0488C18.8244 9.69727 18.8049 9.16992 18.258 8.84766C17.1545 8.21289 16.0119 7.91016 14.7619 7.91016C10.3381 7.91016 8.00408 11.6016 3.97088 11.6016C3.00408 11.6016 2.15447 11.377 1.15838 10.8105C0.748219 10.5762 0.347829 10.7324 0.152516 11.0352C-0.0818588 11.3867-0.0623275 11.9141 0.474782 12.2266C1.5783 12.8613 2.72088 13.1738 3.97088 13.1738Z"/>
<path d="M3.96111 7.92969C8.30681 7.92969 10.6603 4.24805 14.7521 4.24805C15.7092 4.24805 16.5685 4.46289 17.5646 5.0293C17.9748 5.26367 18.3654 5.10742 18.5705 4.81445C18.8146 4.46289 18.7951 3.93555 18.2482 3.61328C17.1447 2.97852 16.0021 2.67578 14.7521 2.67578C10.3283 2.67578 7.99431 6.35742 3.96111 6.35742C2.99431 6.35742 2.1447 6.14258 1.14861 5.57617C0.738454 5.3418 0.338063 5.49805 0.142751 5.80078C-0.0916244 6.15234-0.0720932 6.67969 0.465016 6.99219C1.56853 7.62695 2.71111 7.92969 3.96111 7.92969Z"/>
<path d="M16.7834 21.084C19.8595 21.084 22.34 18.6523 22.34 15.6152C22.34 14.0039 21.5685 12.5098 21.0217 11.4648L18.8439 7.41211C18.3947 6.58203 17.7502 6.08398 16.7834 6.08398C15.8166 6.08398 15.172 6.58203 14.7228 7.41211L12.5549 11.4746C12.008 12.5098 11.2267 14.0039 11.2267 15.6152C11.2267 18.6523 13.717 21.084 16.7834 21.084Z" fill="var(--highlight)"/>
<path d="M16.7834 19.7461C19.1369 19.7461 21.0119 17.9102 21.0119 15.6152C21.0119 14.3457 20.3771 13.1055 19.84 12.0996L17.6623 8.04688C17.4279 7.60742 17.2131 7.42188 16.7834 7.42188C16.3439 7.42188 16.1388 7.60742 15.9045 8.04688L13.7365 12.0996C13.1994 13.1055 12.5646 14.3457 12.5646 15.6152C12.5646 17.9102 14.4396 19.7461 16.7834 19.7461Z"/>
</g>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%"
height="100%"
viewBox="0 0 22.34 21.084"
fill="#56CCF2"
>
<g>
<path
d="M3.96111 18.4082C8.30681 18.4082 10.6603 14.7168 14.7521 14.7168C15.7092 14.7168 16.5685 14.9316 17.5646 15.498C17.9748 15.7324 18.3654 15.5762 18.5705 15.2832C18.8146 14.9316 18.7951 14.4043 18.2482 14.082C17.1447 13.4473 16.0021 13.1445 14.7521 13.1445C10.3283 13.1445 7.99431 16.8359 3.96111 16.8359C2.99431 16.8359 2.1447 16.6211 1.14861 16.0449C0.738454 15.8105 0.338063 15.9668 0.142751 16.2695C-0.0916244 16.6211-0.0720932 17.1582 0.465016 17.4609C1.56853 18.1055 2.71111 18.4082 3.96111 18.4082Z"
/>
<path
d="M3.97088 13.1738C8.31658 13.1738 10.6701 9.48242 14.7619 9.48242C15.7189 9.48242 16.5783 9.69727 17.5744 10.2637C17.9845 10.498 18.3752 10.3418 18.5803 10.0488C18.8244 9.69727 18.8049 9.16992 18.258 8.84766C17.1545 8.21289 16.0119 7.91016 14.7619 7.91016C10.3381 7.91016 8.00408 11.6016 3.97088 11.6016C3.00408 11.6016 2.15447 11.377 1.15838 10.8105C0.748219 10.5762 0.347829 10.7324 0.152516 11.0352C-0.0818588 11.3867-0.0623275 11.9141 0.474782 12.2266C1.5783 12.8613 2.72088 13.1738 3.97088 13.1738Z"
/>
<path
d="M3.96111 7.92969C8.30681 7.92969 10.6603 4.24805 14.7521 4.24805C15.7092 4.24805 16.5685 4.46289 17.5646 5.0293C17.9748 5.26367 18.3654 5.10742 18.5705 4.81445C18.8146 4.46289 18.7951 3.93555 18.2482 3.61328C17.1447 2.97852 16.0021 2.67578 14.7521 2.67578C10.3283 2.67578 7.99431 6.35742 3.96111 6.35742C2.99431 6.35742 2.1447 6.14258 1.14861 5.57617C0.738454 5.3418 0.338063 5.49805 0.142751 5.80078C-0.0916244 6.15234-0.0720932 6.67969 0.465016 6.99219C1.56853 7.62695 2.71111 7.92969 3.96111 7.92969Z"
/>
<path
d="M16.7834 21.084C19.8595 21.084 22.34 18.6523 22.34 15.6152C22.34 14.0039 21.5685 12.5098 21.0217 11.4648L18.8439 7.41211C18.3947 6.58203 17.7502 6.08398 16.7834 6.08398C15.8166 6.08398 15.172 6.58203 14.7228 7.41211L12.5549 11.4746C12.008 12.5098 11.2267 14.0039 11.2267 15.6152C11.2267 18.6523 13.717 21.084 16.7834 21.084Z"
fill="var(--highlight)"
/>
<path
d="M16.7834 19.7461C19.1369 19.7461 21.0119 17.9102 21.0119 15.6152C21.0119 14.3457 20.3771 13.1055 19.84 12.0996L17.6623 8.04688C17.4279 7.60742 17.2131 7.42188 16.7834 7.42188C16.3439 7.42188 16.1388 7.60742 15.9045 8.04688L13.7365 12.0996C13.1994 13.1055 12.5646 14.3457 12.5646 15.6152C12.5646 17.9102 14.4396 19.7461 16.7834 19.7461Z"
/>
</g>
</svg>

17
src/lib/icons/marker.svelte
View File

@@ -1,4 +1,15 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 768 768" fill="var(--color)">
<path d="M565 75c-48.3-48.4-112.6-75-181-75s-132.7 26.6-181 75c-48.4 48.4-75 112.6-75 181 0 85.4 39.1 195.8 116.4 328.1 56.4 96.7 112 168.5 114.4 171.5 6.1 7.8 15.4 12.4 25.3 12.4s19.2-4.6 25.3-12.4c2.3-3 58-74.8 114.4-171.5 77.1-132.3 116.2-242.7 116.2-328.1 0-68.4-26.6-132.7-75-181zM384 682c-57.3-80.4-192-284.5-192-426 0-105.9 86.1-192 192-192s192 86.1 192 192c0 141.5-134.7 345.6-192 426z"></path>
<path d="M384 128c-70.6 0-128 57.4-128 128s57.4 128 128 128c70.6 0 128-57.4 128-128s-57.4-128-128-128zM384 352c-52.9 0-96-43.1-96-96s43.1-96 96-96 96 43.1 96 96-43.1 96-96 96z"></path>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 768 768"
fill="var(--color)"
>
<path
d="M565 75c-48.3-48.4-112.6-75-181-75s-132.7 26.6-181 75c-48.4 48.4-75 112.6-75 181 0 85.4 39.1 195.8 116.4 328.1 56.4 96.7 112 168.5 114.4 171.5 6.1 7.8 15.4 12.4 25.3 12.4s19.2-4.6 25.3-12.4c2.3-3 58-74.8 114.4-171.5 77.1-132.3 116.2-242.7 116.2-328.1 0-68.4-26.6-132.7-75-181zM384 682c-57.3-80.4-192-284.5-192-426 0-105.9 86.1-192 192-192s192 86.1 192 192c0 141.5-134.7 345.6-192 426z"
/>
<path
d="M384 128c-70.6 0-128 57.4-128 128s57.4 128 128 128c70.6 0 128-57.4 128-128s-57.4-128-128-128zM384 352c-52.9 0-96-43.1-96-96s43.1-96 96-96 96 43.1 96 96-43.1 96-96 96z"
/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 719 B

After

Width:  |  Height:  |  Size: 724 B

21
src/lib/icons/network.svelte
View File

@@ -12,9 +12,20 @@
</svg>
-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20.8691 17.041" fill="var(--color)">
<g>
<path d="M3.14453 6.29883C4.88281 6.29883 6.28906 4.89258 6.28906 3.14453C6.28906 1.41602 4.88281 0 3.14453 0C1.40625 0 0 1.41602 0 3.14453C0 4.89258 1.40625 6.29883 3.14453 6.29883ZM3.14453 4.76562C2.24609 4.76562 1.5332 4.05273 1.5332 3.14453C1.5332 2.23633 2.24609 1.5332 3.14453 1.5332C4.05273 1.5332 4.75586 2.23633 4.75586 3.14453C4.75586 4.05273 4.0625 4.76562 3.14453 4.76562ZM17.7148 6.29883C19.4629 6.29883 20.8691 4.89258 20.8691 3.14453C20.8691 1.41602 19.4629 0 17.7148 0C15.9863 0 14.5703 1.41602 14.5703 3.14453C14.5703 4.89258 15.9863 6.29883 17.7148 6.29883ZM17.7148 4.76562C16.8164 4.76562 16.1035 4.05273 16.1035 3.14453C16.1035 2.23633 16.8262 1.5332 17.7148 1.5332C18.6328 1.5332 19.3359 2.23633 19.3359 3.14453C19.3359 4.05273 18.6328 4.76562 17.7148 4.76562ZM10.4395 17.0312C12.1777 17.0312 13.584 15.6152 13.584 13.877C13.584 12.1387 12.1777 10.7324 10.4395 10.7324C8.70117 10.7324 7.29492 12.1387 7.29492 13.877C7.29492 15.6152 8.70117 17.0312 10.4395 17.0312ZM10.4395 15.498C9.54102 15.498 8.82812 14.7852 8.82812 13.877C8.82812 12.9688 9.54102 12.2656 10.4395 12.2656C11.3477 12.2656 12.0508 12.9688 12.0508 13.877C12.0508 14.7852 11.3477 15.498 10.4395 15.498Z"/>
<path d="M7.93945 4.00391C8.39844 4.00391 8.7793 3.62305 8.7793 3.16406C8.7793 2.70508 8.39844 2.32422 7.93945 2.32422C7.48047 2.32422 7.09961 2.70508 7.09961 3.16406C7.09961 3.62305 7.48047 4.00391 7.93945 4.00391ZM10.4395 4.00391C10.8984 4.00391 11.2793 3.62305 11.2793 3.16406C11.2793 2.70508 10.8984 2.32422 10.4395 2.32422C9.9707 2.32422 9.59961 2.70508 9.59961 3.16406C9.59961 3.62305 9.9707 4.00391 10.4395 4.00391ZM12.9199 4.00391C13.3887 4.00391 13.7695 3.62305 13.7695 3.16406C13.7695 2.70508 13.3887 2.32422 12.9199 2.32422C12.4609 2.32422 12.0801 2.70508 12.0801 3.16406C12.0801 3.62305 12.4609 4.00391 12.9199 4.00391ZM15.2148 8.42773C15.6738 8.42773 16.0547 8.04688 16.0547 7.58789C16.0547 7.12891 15.6738 6.74805 15.2148 6.74805C14.7559 6.74805 14.375 7.12891 14.375 7.58789C14.375 8.04688 14.7559 8.42773 15.2148 8.42773ZM13.3984 10.4297C13.8574 10.4297 14.2383 10.0488 14.2383 9.58984C14.2383 9.13086 13.8574 8.75 13.3984 8.75C12.9395 8.75 12.5586 9.13086 12.5586 9.58984C12.5586 10.0488 12.9395 10.4297 13.3984 10.4297ZM7.46094 10.4297C7.92969 10.4297 8.31055 10.0488 8.31055 9.58984C8.31055 9.13086 7.92969 8.75 7.46094 8.75C7.00195 8.75 6.62109 9.13086 6.62109 9.58984C6.62109 10.0488 7.00195 10.4297 7.46094 10.4297ZM5.64453 8.42773C6.10352 8.42773 6.48438 8.04688 6.48438 7.58789C6.48438 7.12891 6.10352 6.74805 5.64453 6.74805C5.18555 6.74805 4.80469 7.12891 4.80469 7.58789C4.80469 8.04688 5.18555 8.42773 5.64453 8.42773Z"/>
</g>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 20.8691 17.041"
fill="var(--color)"
>
<g>
<path
d="M3.14453 6.29883C4.88281 6.29883 6.28906 4.89258 6.28906 3.14453C6.28906 1.41602 4.88281 0 3.14453 0C1.40625 0 0 1.41602 0 3.14453C0 4.89258 1.40625 6.29883 3.14453 6.29883ZM3.14453 4.76562C2.24609 4.76562 1.5332 4.05273 1.5332 3.14453C1.5332 2.23633 2.24609 1.5332 3.14453 1.5332C4.05273 1.5332 4.75586 2.23633 4.75586 3.14453C4.75586 4.05273 4.0625 4.76562 3.14453 4.76562ZM17.7148 6.29883C19.4629 6.29883 20.8691 4.89258 20.8691 3.14453C20.8691 1.41602 19.4629 0 17.7148 0C15.9863 0 14.5703 1.41602 14.5703 3.14453C14.5703 4.89258 15.9863 6.29883 17.7148 6.29883ZM17.7148 4.76562C16.8164 4.76562 16.1035 4.05273 16.1035 3.14453C16.1035 2.23633 16.8262 1.5332 17.7148 1.5332C18.6328 1.5332 19.3359 2.23633 19.3359 3.14453C19.3359 4.05273 18.6328 4.76562 17.7148 4.76562ZM10.4395 17.0312C12.1777 17.0312 13.584 15.6152 13.584 13.877C13.584 12.1387 12.1777 10.7324 10.4395 10.7324C8.70117 10.7324 7.29492 12.1387 7.29492 13.877C7.29492 15.6152 8.70117 17.0312 10.4395 17.0312ZM10.4395 15.498C9.54102 15.498 8.82812 14.7852 8.82812 13.877C8.82812 12.9688 9.54102 12.2656 10.4395 12.2656C11.3477 12.2656 12.0508 12.9688 12.0508 13.877C12.0508 14.7852 11.3477 15.498 10.4395 15.498Z"
/>
<path
d="M7.93945 4.00391C8.39844 4.00391 8.7793 3.62305 8.7793 3.16406C8.7793 2.70508 8.39844 2.32422 7.93945 2.32422C7.48047 2.32422 7.09961 2.70508 7.09961 3.16406C7.09961 3.62305 7.48047 4.00391 7.93945 4.00391ZM10.4395 4.00391C10.8984 4.00391 11.2793 3.62305 11.2793 3.16406C11.2793 2.70508 10.8984 2.32422 10.4395 2.32422C9.9707 2.32422 9.59961 2.70508 9.59961 3.16406C9.59961 3.62305 9.9707 4.00391 10.4395 4.00391ZM12.9199 4.00391C13.3887 4.00391 13.7695 3.62305 13.7695 3.16406C13.7695 2.70508 13.3887 2.32422 12.9199 2.32422C12.4609 2.32422 12.0801 2.70508 12.0801 3.16406C12.0801 3.62305 12.4609 4.00391 12.9199 4.00391ZM15.2148 8.42773C15.6738 8.42773 16.0547 8.04688 16.0547 7.58789C16.0547 7.12891 15.6738 6.74805 15.2148 6.74805C14.7559 6.74805 14.375 7.12891 14.375 7.58789C14.375 8.04688 14.7559 8.42773 15.2148 8.42773ZM13.3984 10.4297C13.8574 10.4297 14.2383 10.0488 14.2383 9.58984C14.2383 9.13086 13.8574 8.75 13.3984 8.75C12.9395 8.75 12.5586 9.13086 12.5586 9.58984C12.5586 10.0488 12.9395 10.4297 13.3984 10.4297ZM7.46094 10.4297C7.92969 10.4297 8.31055 10.0488 8.31055 9.58984C8.31055 9.13086 7.92969 8.75 7.46094 8.75C7.00195 8.75 6.62109 9.13086 6.62109 9.58984C6.62109 10.0488 7.00195 10.4297 7.46094 10.4297ZM5.64453 8.42773C6.10352 8.42773 6.48438 8.04688 6.48438 7.58789C6.48438 7.12891 6.10352 6.74805 5.64453 6.74805C5.18555 6.74805 4.80469 7.12891 4.80469 7.58789C4.80469 8.04688 5.18555 8.42773 5.64453 8.42773Z"
/>
</g>
</svg>

30
src/lib/icons/networkDisconnected.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
export let fill = '#F93131';
export let fill = '#F93131';
</script>
<!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 768 768" {fill}>
@@ -8,11 +8,25 @@
<path d="M288 416h-64v32h64v-32zM288 352h-64v32h64v-32zM288 288h-128v32h128v-32zM288 224h-64v32h64v-32zM288 160h-64v32h64v-32zM288 96h-128v32h128v-32z"></path>
</svg>
-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 21.7029 21.7141" {fill}>
<g>
<path d="M6.26221 18.9967L7.66846 19.3189C7.00439 17.7467 6.65283 16.0865 6.62354 14.3775C6.3501 9.52402 8.43994 4.89511 12.1704 1.83847L10.9302 1.35019C7.229 4.63144 5.18799 9.40683 5.45166 14.3971C5.47119 15.9596 5.74463 17.5025 6.26221 18.9967ZM12.7075 19.9635L13.8013 19.4752C11.9751 16.8971 10.979 13.8404 10.979 10.6471C10.979 7.61972 11.8579 4.7291 13.5083 2.26816L12.356 1.85801C10.6958 4.47519 9.79736 7.5123 9.79736 10.6471C9.79736 14.0162 10.813 17.2291 12.7075 19.9635ZM17.9907 16.5846L18.772 15.6666C15.6079 13.9869 13.9087 10.276 13.8599 6.27207C13.8501 4.90488 14.0845 3.54746 14.5728 2.29746L13.4302 1.97519C12.9126 3.34238 12.6685 4.78769 12.6782 6.28183C12.7271 10.608 14.5728 14.6607 17.9907 16.5846ZM10.2759 9.46543L10.6763 10.6959C11.0864 10.7447 11.4868 10.7545 11.897 10.7545C14.7388 10.7447 17.4536 9.79746 19.6509 8.05918L19.104 6.96543C17.0825 8.64511 14.5532 9.56308 11.897 9.57285C11.3501 9.57285 10.813 9.53379 10.2759 9.46543ZM1.41846 12.0924C6.49658 16.4283 13.772 17.2389 19.6216 14.1725L19.6021 12.8346C13.8989 16.1256 6.62354 15.3053 1.71143 10.7643ZM10.8521 20.8131C16.3013 20.8131 20.813 16.2916 20.813 10.8521C20.813 5.40293 16.2915 0.891208 10.8423 0.891208C5.40283 0.891208 0.891113 5.40293 0.891113 10.8521C0.891113 16.2916 5.4126 20.8131 10.8521 20.8131ZM10.8521 19.485C6.14502 19.485 2.21924 15.5689 2.21924 10.8521C2.21924 6.13535 6.13525 2.21933 10.8423 2.21933C15.5591 2.21933 19.4849 6.13535 19.4849 10.8521C19.4849 15.5689 15.5688 19.485 10.8521 19.485Z" />
<path d="M18.4692 21.1646C19.2212 21.9068 20.4321 21.8971 21.1548 21.1353C21.8872 20.3932 21.8872 19.2115 21.145 18.4791L3.23486 0.559177C2.50244-0.173245 1.30127-0.18301 0.549316 0.559177C-0.183105 1.28183-0.183105 2.50254 0.549316 3.23496Z" fill="#ECECEC"/>
<path d="M19.2798 20.3541C19.5728 20.6471 20.061 20.6373 20.3442 20.3443C20.6372 20.0514 20.6372 19.5728 20.3442 19.2799L2.43408 1.36972C2.14111 1.07676 1.65283 1.06699 1.35986 1.36972C1.06689 1.65293 1.06689 2.14121 1.35986 2.43418Z" />
</g>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%"
height="100%"
viewBox="0 0 21.7029 21.7141"
{fill}
>
<g>
<path
d="M6.26221 18.9967L7.66846 19.3189C7.00439 17.7467 6.65283 16.0865 6.62354 14.3775C6.3501 9.52402 8.43994 4.89511 12.1704 1.83847L10.9302 1.35019C7.229 4.63144 5.18799 9.40683 5.45166 14.3971C5.47119 15.9596 5.74463 17.5025 6.26221 18.9967ZM12.7075 19.9635L13.8013 19.4752C11.9751 16.8971 10.979 13.8404 10.979 10.6471C10.979 7.61972 11.8579 4.7291 13.5083 2.26816L12.356 1.85801C10.6958 4.47519 9.79736 7.5123 9.79736 10.6471C9.79736 14.0162 10.813 17.2291 12.7075 19.9635ZM17.9907 16.5846L18.772 15.6666C15.6079 13.9869 13.9087 10.276 13.8599 6.27207C13.8501 4.90488 14.0845 3.54746 14.5728 2.29746L13.4302 1.97519C12.9126 3.34238 12.6685 4.78769 12.6782 6.28183C12.7271 10.608 14.5728 14.6607 17.9907 16.5846ZM10.2759 9.46543L10.6763 10.6959C11.0864 10.7447 11.4868 10.7545 11.897 10.7545C14.7388 10.7447 17.4536 9.79746 19.6509 8.05918L19.104 6.96543C17.0825 8.64511 14.5532 9.56308 11.897 9.57285C11.3501 9.57285 10.813 9.53379 10.2759 9.46543ZM1.41846 12.0924C6.49658 16.4283 13.772 17.2389 19.6216 14.1725L19.6021 12.8346C13.8989 16.1256 6.62354 15.3053 1.71143 10.7643ZM10.8521 20.8131C16.3013 20.8131 20.813 16.2916 20.813 10.8521C20.813 5.40293 16.2915 0.891208 10.8423 0.891208C5.40283 0.891208 0.891113 5.40293 0.891113 10.8521C0.891113 16.2916 5.4126 20.8131 10.8521 20.8131ZM10.8521 19.485C6.14502 19.485 2.21924 15.5689 2.21924 10.8521C2.21924 6.13535 6.13525 2.21933 10.8423 2.21933C15.5591 2.21933 19.4849 6.13535 19.4849 10.8521C19.4849 15.5689 15.5688 19.485 10.8521 19.485Z"
/>
<path
d="M18.4692 21.1646C19.2212 21.9068 20.4321 21.8971 21.1548 21.1353C21.8872 20.3932 21.8872 19.2115 21.145 18.4791L3.23486 0.559177C2.50244-0.173245 1.30127-0.18301 0.549316 0.559177C-0.183105 1.28183-0.183105 2.50254 0.549316 3.23496Z"
fill="#ECECEC"
/>
<path
d="M19.2798 20.3541C19.5728 20.6471 20.061 20.6373 20.3442 20.3443C20.6372 20.0514 20.6372 19.5728 20.3442 19.2799L2.43408 1.36972C2.14111 1.07676 1.65283 1.06699 1.35986 1.36972C1.06689 1.65293 1.06689 2.14121 1.35986 2.43418Z"
/>
</g>
</svg>

28
src/lib/icons/thermometer.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
export let fill = '#F93131';
export let fill = '#F93131';
</script>
<!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 768 768" {fill}>
@@ -8,10 +8,24 @@
<path d="M288 416h-64v32h64v-32zM288 352h-64v32h64v-32zM288 288h-128v32h128v-32zM288 224h-64v32h64v-32zM288 160h-64v32h64v-32zM288 96h-128v32h128v-32z"></path>
</svg>
-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 12.7051 21.7285" {fill}>
<g>
<path d="M10.0098 3.58398L12.1289 3.58398C12.4707 3.58398 12.7051 3.32031 12.7051 3.01758C12.7051 2.71484 12.4707 2.45117 12.1289 2.45117L10.0098 2.45117C9.66797 2.45117 9.43359 2.71484 9.43359 3.01758C9.43359 3.32031 9.66797 3.58398 10.0098 3.58398ZM10.0098 6.32812L12.1289 6.32812C12.4707 6.32812 12.7051 6.06445 12.7051 5.76172C12.7051 5.45898 12.4707 5.19531 12.1289 5.19531L10.0098 5.19531C9.66797 5.19531 9.43359 5.45898 9.43359 5.76172C9.43359 6.06445 9.66797 6.32812 10.0098 6.32812ZM10.0098 9.07227L12.1289 9.07227C12.4707 9.07227 12.7051 8.80859 12.7051 8.50586C12.7051 8.20312 12.4707 7.92969 12.1289 7.92969L10.0098 7.92969C9.66797 7.92969 9.43359 8.20312 9.43359 8.50586C9.43359 8.80859 9.66797 9.07227 10.0098 9.07227ZM10.0098 11.8164L12.1289 11.8164C12.4707 11.8164 12.7051 11.5527 12.7051 11.25C12.7051 10.9375 12.4707 10.6738 12.1289 10.6738L10.0098 10.6738C9.66797 10.6738 9.43359 10.9375 9.43359 11.25C9.43359 11.5527 9.66797 11.8164 10.0098 11.8164Z"/>
<path d="M5.11719 21.6992C7.92969 21.6992 10.2051 19.4141 10.2051 16.6016C10.2051 15.1172 9.59961 13.8184 8.42773 12.7637C8.22266 12.5781 8.17383 12.4609 8.17383 12.168L8.17383 3.33984C8.17383 1.35742 6.93359 0 5.11719 0C3.28125 0 2.03125 1.35742 2.03125 3.33984L2.03125 12.168C2.03125 12.4609 1.99219 12.5781 1.77734 12.7637C0.615234 13.8184 0 15.1172 0 16.6016C0 19.4141 2.28516 21.6992 5.11719 21.6992ZM5.11719 20.2832C3.07617 20.2832 1.43555 18.623 1.43555 16.6016C1.43555 15.3809 2.01172 14.2773 3.04688 13.584C3.34961 13.3789 3.4668 13.1934 3.4668 12.793L3.4668 3.39844C3.4668 2.22656 4.14062 1.43555 5.11719 1.43555C6.07422 1.43555 6.74805 2.22656 6.74805 3.39844L6.74805 12.793C6.74805 13.1934 6.86523 13.3789 7.16797 13.584C8.20312 14.2773 8.7793 15.3809 8.7793 16.6016C8.7793 18.623 7.12891 20.2832 5.11719 20.2832Z"/>
<path d="M5.10742 18.9648C6.41602 18.9648 7.4707 17.9102 7.4707 16.5918C7.4707 15.6738 6.95312 14.9219 6.20117 14.5117C5.88867 14.3457 5.78125 14.2285 5.78125 13.75L5.78125 8.52539C5.78125 8.05664 5.47852 7.75391 5.10742 7.75391C4.72656 7.75391 4.43359 8.05664 4.43359 8.52539L4.43359 13.75C4.43359 14.2285 4.32617 14.3457 4.01367 14.5117C3.26172 14.9219 2.74414 15.6738 2.74414 16.5918C2.74414 17.9102 3.79883 18.9648 5.10742 18.9648Z"/>
</g>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%"
height="100%"
viewBox="0 0 12.7051 21.7285"
{fill}
>
<g>
<path
d="M10.0098 3.58398L12.1289 3.58398C12.4707 3.58398 12.7051 3.32031 12.7051 3.01758C12.7051 2.71484 12.4707 2.45117 12.1289 2.45117L10.0098 2.45117C9.66797 2.45117 9.43359 2.71484 9.43359 3.01758C9.43359 3.32031 9.66797 3.58398 10.0098 3.58398ZM10.0098 6.32812L12.1289 6.32812C12.4707 6.32812 12.7051 6.06445 12.7051 5.76172C12.7051 5.45898 12.4707 5.19531 12.1289 5.19531L10.0098 5.19531C9.66797 5.19531 9.43359 5.45898 9.43359 5.76172C9.43359 6.06445 9.66797 6.32812 10.0098 6.32812ZM10.0098 9.07227L12.1289 9.07227C12.4707 9.07227 12.7051 8.80859 12.7051 8.50586C12.7051 8.20312 12.4707 7.92969 12.1289 7.92969L10.0098 7.92969C9.66797 7.92969 9.43359 8.20312 9.43359 8.50586C9.43359 8.80859 9.66797 9.07227 10.0098 9.07227ZM10.0098 11.8164L12.1289 11.8164C12.4707 11.8164 12.7051 11.5527 12.7051 11.25C12.7051 10.9375 12.4707 10.6738 12.1289 10.6738L10.0098 10.6738C9.66797 10.6738 9.43359 10.9375 9.43359 11.25C9.43359 11.5527 9.66797 11.8164 10.0098 11.8164Z"
/>
<path
d="M5.11719 21.6992C7.92969 21.6992 10.2051 19.4141 10.2051 16.6016C10.2051 15.1172 9.59961 13.8184 8.42773 12.7637C8.22266 12.5781 8.17383 12.4609 8.17383 12.168L8.17383 3.33984C8.17383 1.35742 6.93359 0 5.11719 0C3.28125 0 2.03125 1.35742 2.03125 3.33984L2.03125 12.168C2.03125 12.4609 1.99219 12.5781 1.77734 12.7637C0.615234 13.8184 0 15.1172 0 16.6016C0 19.4141 2.28516 21.6992 5.11719 21.6992ZM5.11719 20.2832C3.07617 20.2832 1.43555 18.623 1.43555 16.6016C1.43555 15.3809 2.01172 14.2773 3.04688 13.584C3.34961 13.3789 3.4668 13.1934 3.4668 12.793L3.4668 3.39844C3.4668 2.22656 4.14062 1.43555 5.11719 1.43555C6.07422 1.43555 6.74805 2.22656 6.74805 3.39844L6.74805 12.793C6.74805 13.1934 6.86523 13.3789 7.16797 13.584C8.20312 14.2773 8.7793 15.3809 8.7793 16.6016C8.7793 18.623 7.12891 20.2832 5.11719 20.2832Z"
/>
<path
d="M5.10742 18.9648C6.41602 18.9648 7.4707 17.9102 7.4707 16.5918C7.4707 15.6738 6.95312 14.9219 6.20117 14.5117C5.88867 14.3457 5.78125 14.2285 5.78125 13.75L5.78125 8.52539C5.78125 8.05664 5.47852 7.75391 5.10742 7.75391C4.72656 7.75391 4.43359 8.05664 4.43359 8.52539L4.43359 13.75C4.43359 14.2285 4.32617 14.3457 4.01367 14.5117C3.26172 14.9219 2.74414 15.6738 2.74414 16.5918C2.74414 17.9102 3.79883 18.9648 5.10742 18.9648Z"
/>
</g>
</svg>

34
src/lib/icons/thermometerCold.svelte
View File

@@ -1,13 +1,29 @@
<script lang="ts">
export let fill = '#F93131';
export let fill = '#F93131';
</script>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 19.3553 23.9941" {fill}>
<g>
<path d="M19.0234 10.7812L17.6953 10.0195L18.877 9.33594C19.1309 9.18945 19.2285 8.89648 19.0918 8.65234C18.9453 8.38867 18.6426 8.34961 18.3691 8.50586L16.709 9.45312L13.7988 7.80273L16.7383 6.14258L18.3984 7.09961C18.6621 7.25586 18.9551 7.20703 19.1211 6.95312C19.248 6.69922 19.1504 6.40625 18.9062 6.26953L17.7246 5.58594L19.0332 4.84375C19.3359 4.66797 19.4434 4.36523 19.2773 4.08203C19.1309 3.80859 18.7988 3.75 18.5352 3.90625L17.207 4.67773L17.207 3.33008C17.207 3.02734 17.002 2.80273 16.7285 2.80273C16.416 2.80273 16.2305 3.02734 16.2305 3.35938L16.2207 5.25391L13.3105 6.96289L13.3398 3.56445L14.9902 2.60742C15.2637 2.44141 15.3711 2.16797 15.2246 1.9043C15.0781 1.66016 14.7852 1.60156 14.5312 1.74805L13.3496 2.43164L13.3594 0.947266C13.3594 0.615234 13.1543 0.351562 12.832 0.351562C12.5 0.351562 12.3047 0.615234 12.3047 0.947266L12.3145 2.43164L11.1328 1.74805C10.8789 1.60156 10.5762 1.66016 10.4395 1.9043C10.293 2.16797 10.4004 2.44141 10.6738 2.60742L12.3242 3.56445L12.3535 6.96289L9.43359 5.25391L9.42383 3.35938C9.42383 3.02734 9.24805 2.80273 8.93555 2.80273C8.66211 2.80273 8.45703 3.02734 8.45703 3.33008L8.45703 4.67773L7.12891 3.90625C6.86523 3.75 6.5332 3.80859 6.38672 4.08203C6.2207 4.36523 6.32812 4.66797 6.63086 4.84375L7.93945 5.58594L6.75781 6.26953C6.51367 6.40625 6.40625 6.69922 6.54297 6.95312C6.70898 7.20703 7.00195 7.25586 7.26562 7.09961L8.92578 6.14258L11.8555 7.80273L8.95508 9.45312L7.29492 8.50586C7.02148 8.34961 6.71875 8.38867 6.57227 8.65234C6.43555 8.89648 6.5332 9.18945 6.78711 9.33594L7.96875 10.0195L6.64062 10.7812C6.34766 10.9375 6.2207 11.25 6.38672 11.5332C6.54297 11.8164 6.875 11.8555 7.16797 11.6895L8.47656 10.918L8.48633 12.2754C8.48633 12.5488 8.69141 12.793 8.96484 12.793C9.26758 12.7832 9.45312 12.5488 9.45312 12.2461L9.45312 10.3418L12.3535 8.64258L12.3242 12.0215L10.6836 12.9785C10.4102 13.1445 10.293 13.418 10.4492 13.6816C10.5859 13.9258 10.8887 13.9844 11.1426 13.8379L12.3145 13.1641L12.3047 14.6582C12.3047 14.9902 12.5 15.2539 12.832 15.2539C13.1543 15.2539 13.3594 14.9902 13.3594 14.6582L13.3496 13.1641L14.5215 13.8379C14.7754 13.9844 15.0684 13.9258 15.2148 13.6816C15.3711 13.418 15.2539 13.1445 14.9805 12.9785L13.3398 12.0215L13.3105 8.64258L16.2012 10.3418L16.2012 12.2461C16.2012 12.5488 16.3965 12.7832 16.6992 12.793C16.9727 12.793 17.1777 12.5488 17.1777 12.2754L17.1875 10.918L18.4961 11.6895C18.7891 11.8555 19.1113 11.8164 19.2773 11.5332C19.4434 11.25 19.3164 10.9375 19.0234 10.7812Z" />
<path d="M6.25 23.9746C9.6875 23.9746 12.4805 21.1719 12.4805 17.7344C12.4805 15.9863 11.7773 14.4336 10.4492 13.1836L10.459 4.47266C10.459 1.875 8.71094 0 6.25 0C3.76953 0 2.02148 1.875 2.02148 4.47266L2.03125 13.1836C0.703125 14.4336 0 15.9863 0 17.7344C0 21.1719 2.79297 23.9746 6.25 23.9746Z" fill="#05B4EC"/>
<path d="M6.25 22.832C9.0625 22.832 11.3379 20.5469 11.3379 17.7344C11.3379 16.25 10.7324 14.9512 9.56055 13.8965C9.35547 13.7109 9.30664 13.5938 9.30664 13.3008L9.31641 4.47266C9.31641 2.49023 8.06641 1.13281 6.25 1.13281C4.41406 1.13281 3.1543 2.49023 3.1543 4.47266L3.16406 13.3008C3.16406 13.5938 3.125 13.7109 2.91016 13.8965C1.74805 14.9512 1.13281 16.25 1.13281 17.7344C1.13281 20.5469 3.41797 22.832 6.25 22.832ZM6.25 21.416C4.20898 21.416 2.56836 19.7559 2.56836 17.7344C2.56836 16.5137 3.14453 15.4102 4.17969 14.7168C4.48242 14.5117 4.59961 14.3262 4.59961 13.9258L4.59961 4.53125C4.59961 3.35938 5.27344 2.56836 6.25 2.56836C7.20703 2.56836 7.88086 3.35938 7.88086 4.53125L7.88086 13.9258C7.88086 14.3262 7.99805 14.5117 8.30078 14.7168C9.33594 15.4102 9.91211 16.5137 9.91211 17.7344C9.91211 19.7559 8.26172 21.416 6.25 21.416Z" />
<path d="M6.24023 20.0977C7.54883 20.0977 8.60352 19.043 8.60352 17.7246C8.60352 16.8066 8.08594 16.0547 7.33398 15.6445C7.02148 15.4785 6.91406 15.3613 6.91406 14.8828L6.91406 12.9297C6.91406 12.4609 6.61133 12.1582 6.24023 12.1582C5.85938 12.1582 5.56641 12.4609 5.56641 12.9297L5.56641 14.8828C5.56641 15.3613 5.45898 15.4785 5.14648 15.6445C4.39453 16.0547 3.87695 16.8066 3.87695 17.7246C3.87695 19.043 4.93164 20.0977 6.24023 20.0977Z" />
</g>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%"
height="100%"
viewBox="0 0 19.3553 23.9941"
{fill}
>
<g>
<path
d="M19.0234 10.7812L17.6953 10.0195L18.877 9.33594C19.1309 9.18945 19.2285 8.89648 19.0918 8.65234C18.9453 8.38867 18.6426 8.34961 18.3691 8.50586L16.709 9.45312L13.7988 7.80273L16.7383 6.14258L18.3984 7.09961C18.6621 7.25586 18.9551 7.20703 19.1211 6.95312C19.248 6.69922 19.1504 6.40625 18.9062 6.26953L17.7246 5.58594L19.0332 4.84375C19.3359 4.66797 19.4434 4.36523 19.2773 4.08203C19.1309 3.80859 18.7988 3.75 18.5352 3.90625L17.207 4.67773L17.207 3.33008C17.207 3.02734 17.002 2.80273 16.7285 2.80273C16.416 2.80273 16.2305 3.02734 16.2305 3.35938L16.2207 5.25391L13.3105 6.96289L13.3398 3.56445L14.9902 2.60742C15.2637 2.44141 15.3711 2.16797 15.2246 1.9043C15.0781 1.66016 14.7852 1.60156 14.5312 1.74805L13.3496 2.43164L13.3594 0.947266C13.3594 0.615234 13.1543 0.351562 12.832 0.351562C12.5 0.351562 12.3047 0.615234 12.3047 0.947266L12.3145 2.43164L11.1328 1.74805C10.8789 1.60156 10.5762 1.66016 10.4395 1.9043C10.293 2.16797 10.4004 2.44141 10.6738 2.60742L12.3242 3.56445L12.3535 6.96289L9.43359 5.25391L9.42383 3.35938C9.42383 3.02734 9.24805 2.80273 8.93555 2.80273C8.66211 2.80273 8.45703 3.02734 8.45703 3.33008L8.45703 4.67773L7.12891 3.90625C6.86523 3.75 6.5332 3.80859 6.38672 4.08203C6.2207 4.36523 6.32812 4.66797 6.63086 4.84375L7.93945 5.58594L6.75781 6.26953C6.51367 6.40625 6.40625 6.69922 6.54297 6.95312C6.70898 7.20703 7.00195 7.25586 7.26562 7.09961L8.92578 6.14258L11.8555 7.80273L8.95508 9.45312L7.29492 8.50586C7.02148 8.34961 6.71875 8.38867 6.57227 8.65234C6.43555 8.89648 6.5332 9.18945 6.78711 9.33594L7.96875 10.0195L6.64062 10.7812C6.34766 10.9375 6.2207 11.25 6.38672 11.5332C6.54297 11.8164 6.875 11.8555 7.16797 11.6895L8.47656 10.918L8.48633 12.2754C8.48633 12.5488 8.69141 12.793 8.96484 12.793C9.26758 12.7832 9.45312 12.5488 9.45312 12.2461L9.45312 10.3418L12.3535 8.64258L12.3242 12.0215L10.6836 12.9785C10.4102 13.1445 10.293 13.418 10.4492 13.6816C10.5859 13.9258 10.8887 13.9844 11.1426 13.8379L12.3145 13.1641L12.3047 14.6582C12.3047 14.9902 12.5 15.2539 12.832 15.2539C13.1543 15.2539 13.3594 14.9902 13.3594 14.6582L13.3496 13.1641L14.5215 13.8379C14.7754 13.9844 15.0684 13.9258 15.2148 13.6816C15.3711 13.418 15.2539 13.1445 14.9805 12.9785L13.3398 12.0215L13.3105 8.64258L16.2012 10.3418L16.2012 12.2461C16.2012 12.5488 16.3965 12.7832 16.6992 12.793C16.9727 12.793 17.1777 12.5488 17.1777 12.2754L17.1875 10.918L18.4961 11.6895C18.7891 11.8555 19.1113 11.8164 19.2773 11.5332C19.4434 11.25 19.3164 10.9375 19.0234 10.7812Z"
/>
<path
d="M6.25 23.9746C9.6875 23.9746 12.4805 21.1719 12.4805 17.7344C12.4805 15.9863 11.7773 14.4336 10.4492 13.1836L10.459 4.47266C10.459 1.875 8.71094 0 6.25 0C3.76953 0 2.02148 1.875 2.02148 4.47266L2.03125 13.1836C0.703125 14.4336 0 15.9863 0 17.7344C0 21.1719 2.79297 23.9746 6.25 23.9746Z"
fill="#05B4EC"
/>
<path
d="M6.25 22.832C9.0625 22.832 11.3379 20.5469 11.3379 17.7344C11.3379 16.25 10.7324 14.9512 9.56055 13.8965C9.35547 13.7109 9.30664 13.5938 9.30664 13.3008L9.31641 4.47266C9.31641 2.49023 8.06641 1.13281 6.25 1.13281C4.41406 1.13281 3.1543 2.49023 3.1543 4.47266L3.16406 13.3008C3.16406 13.5938 3.125 13.7109 2.91016 13.8965C1.74805 14.9512 1.13281 16.25 1.13281 17.7344C1.13281 20.5469 3.41797 22.832 6.25 22.832ZM6.25 21.416C4.20898 21.416 2.56836 19.7559 2.56836 17.7344C2.56836 16.5137 3.14453 15.4102 4.17969 14.7168C4.48242 14.5117 4.59961 14.3262 4.59961 13.9258L4.59961 4.53125C4.59961 3.35938 5.27344 2.56836 6.25 2.56836C7.20703 2.56836 7.88086 3.35938 7.88086 4.53125L7.88086 13.9258C7.88086 14.3262 7.99805 14.5117 8.30078 14.7168C9.33594 15.4102 9.91211 16.5137 9.91211 17.7344C9.91211 19.7559 8.26172 21.416 6.25 21.416Z"
/>
<path
d="M6.24023 20.0977C7.54883 20.0977 8.60352 19.043 8.60352 17.7246C8.60352 16.8066 8.08594 16.0547 7.33398 15.6445C7.02148 15.4785 6.91406 15.3613 6.91406 14.8828L6.91406 12.9297C6.91406 12.4609 6.61133 12.1582 6.24023 12.1582C5.85938 12.1582 5.56641 12.4609 5.56641 12.9297L5.56641 14.8828C5.56641 15.3613 5.45898 15.4785 5.14648 15.6445C4.39453 16.0547 3.87695 16.8066 3.87695 17.7246C3.87695 19.043 4.93164 20.0977 6.24023 20.0977Z"
/>
</g>
</svg>

34
src/lib/icons/thermometerHot.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
export let fill = '#F93131';
export let fill = '#F93131';
</script>
<!--
<g>
@@ -11,11 +12,28 @@
</svg>
-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 20.1855 28.623" {fill}>
<g>
<path d="M10.0977 14.9609C12.7832 14.9609 14.9219 12.8125 14.9219 10.127C14.9219 7.43164 12.7832 5.2832 10.0977 5.2832C7.41211 5.2832 5.26367 7.43164 5.26367 10.127C5.26367 12.8125 7.41211 14.9609 10.0977 14.9609ZM10.0977 13.5254C8.19336 13.5254 6.69922 12.041 6.69922 10.127C6.69922 8.20312 8.19336 6.71875 10.0977 6.71875C12.002 6.71875 13.4863 8.20312 13.4863 10.127C13.4863 12.041 12.002 13.5254 10.0977 13.5254ZM10.0977 3.73047C10.5469 3.73047 10.9082 3.35938 10.9082 2.91992L10.9082 0.810547C10.9082 0.361328 10.5469 0 10.0977 0C9.64844 0 9.28711 0.361328 9.28711 0.810547L9.28711 2.91992C9.28711 3.35938 9.64844 3.73047 10.0977 3.73047ZM14.6094 5.61523C14.9121 5.92773 15.4395 5.9375 15.7617 5.61523L17.2461 4.11133C17.5684 3.79883 17.5586 3.28125 17.2461 2.96875C16.9434 2.65625 16.4355 2.65625 16.1133 2.96875L14.6094 4.48242C14.2969 4.79492 14.3066 5.30273 14.6094 5.61523ZM16.4648 10.127C16.4648 10.5664 16.8359 10.9375 17.2754 10.9375L19.3848 10.9375C19.8242 10.9375 20.1855 10.5664 20.1855 10.127C20.1855 9.67773 19.8242 9.31641 19.3848 9.31641L17.2754 9.31641C16.8359 9.31641 16.4648 9.67773 16.4648 10.127ZM14.6094 14.6484C14.2969 14.9609 14.2969 15.4785 14.6094 15.791L16.1133 17.2949C16.4355 17.6074 16.9434 17.5977 17.2461 17.2852C17.5586 16.9727 17.5684 16.4551 17.2461 16.1523L15.7422 14.6484C15.4297 14.3457 14.9219 14.3359 14.6094 14.6484ZM5.58594 14.6484C5.27344 14.3359 4.76562 14.3457 4.45312 14.6484L2.93945 16.1523C2.62695 16.4551 2.62695 16.9727 2.93945 17.2852C3.25195 17.5977 3.75977 17.6074 4.07227 17.2949L5.58594 15.791C5.89844 15.4785 5.89844 14.9609 5.58594 14.6484Z" />
<path d="M5.44922 25.1562C8.26172 25.1562 10.5371 22.8711 10.5371 20.0586C10.5371 18.5742 9.93164 17.2754 8.75977 16.2207C8.55469 16.0254 8.50586 15.918 8.50586 15.625L8.51562 6.79688C8.51562 4.81445 7.26562 3.45703 5.44922 3.45703C3.61328 3.45703 2.35352 4.81445 2.35352 6.79688L2.36328 15.625C2.36328 15.918 2.32422 16.0254 2.10938 16.2207C0.947266 17.2754 0.332031 18.5742 0.332031 20.0586C0.332031 22.8711 2.61719 25.1562 5.44922 25.1562Z" fill="#F93131"/>
<path d="M5.44922 25.1562C8.26172 25.1562 10.5371 22.8711 10.5371 20.0586C10.5371 18.5742 9.93164 17.2754 8.75977 16.2207C8.55469 16.0254 8.50586 15.918 8.50586 15.625L8.51562 6.79688C8.51562 4.81445 7.26562 3.45703 5.44922 3.45703C3.61328 3.45703 2.35352 4.81445 2.35352 6.79688L2.36328 15.625C2.36328 15.918 2.32422 16.0254 2.10938 16.2207C0.947266 17.2754 0.332031 18.5742 0.332031 20.0586C0.332031 22.8711 2.61719 25.1562 5.44922 25.1562ZM5.44922 23.7402C3.4082 23.7402 1.76758 22.0801 1.76758 20.0586C1.76758 18.8379 2.34375 17.7344 3.37891 17.041C3.68164 16.8359 3.79883 16.6504 3.79883 16.25L3.79883 6.85547C3.79883 5.68359 4.47266 4.89258 5.44922 4.89258C6.40625 4.89258 7.08008 5.68359 7.08008 6.85547L7.08008 16.25C7.08008 16.6504 7.19727 16.8359 7.5 17.041C8.53516 17.7344 9.11133 18.8379 9.11133 20.0586C9.11133 22.0801 7.46094 23.7402 5.44922 23.7402Z" />
<path d="M5.43945 22.4219C6.74805 22.4219 7.80273 21.3574 7.80273 20.0488C7.80273 19.1309 7.28516 18.3789 6.5332 17.9688C6.2207 17.8027 6.11328 17.6855 6.11328 17.207L6.11328 7.68555C6.11328 7.2168 5.81055 6.91406 5.43945 6.91406C5.05859 6.91406 4.76562 7.2168 4.76562 7.68555L4.76562 17.207C4.76562 17.6855 4.6582 17.8027 4.3457 17.9688C3.59375 18.3789 3.07617 19.1309 3.07617 20.0488C3.07617 21.3672 4.13086 22.4219 5.43945 22.4219Z" />
</g>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%"
height="100%"
viewBox="0 0 20.1855 28.623"
{fill}
>
<g>
<path
d="M10.0977 14.9609C12.7832 14.9609 14.9219 12.8125 14.9219 10.127C14.9219 7.43164 12.7832 5.2832 10.0977 5.2832C7.41211 5.2832 5.26367 7.43164 5.26367 10.127C5.26367 12.8125 7.41211 14.9609 10.0977 14.9609ZM10.0977 13.5254C8.19336 13.5254 6.69922 12.041 6.69922 10.127C6.69922 8.20312 8.19336 6.71875 10.0977 6.71875C12.002 6.71875 13.4863 8.20312 13.4863 10.127C13.4863 12.041 12.002 13.5254 10.0977 13.5254ZM10.0977 3.73047C10.5469 3.73047 10.9082 3.35938 10.9082 2.91992L10.9082 0.810547C10.9082 0.361328 10.5469 0 10.0977 0C9.64844 0 9.28711 0.361328 9.28711 0.810547L9.28711 2.91992C9.28711 3.35938 9.64844 3.73047 10.0977 3.73047ZM14.6094 5.61523C14.9121 5.92773 15.4395 5.9375 15.7617 5.61523L17.2461 4.11133C17.5684 3.79883 17.5586 3.28125 17.2461 2.96875C16.9434 2.65625 16.4355 2.65625 16.1133 2.96875L14.6094 4.48242C14.2969 4.79492 14.3066 5.30273 14.6094 5.61523ZM16.4648 10.127C16.4648 10.5664 16.8359 10.9375 17.2754 10.9375L19.3848 10.9375C19.8242 10.9375 20.1855 10.5664 20.1855 10.127C20.1855 9.67773 19.8242 9.31641 19.3848 9.31641L17.2754 9.31641C16.8359 9.31641 16.4648 9.67773 16.4648 10.127ZM14.6094 14.6484C14.2969 14.9609 14.2969 15.4785 14.6094 15.791L16.1133 17.2949C16.4355 17.6074 16.9434 17.5977 17.2461 17.2852C17.5586 16.9727 17.5684 16.4551 17.2461 16.1523L15.7422 14.6484C15.4297 14.3457 14.9219 14.3359 14.6094 14.6484ZM5.58594 14.6484C5.27344 14.3359 4.76562 14.3457 4.45312 14.6484L2.93945 16.1523C2.62695 16.4551 2.62695 16.9727 2.93945 17.2852C3.25195 17.5977 3.75977 17.6074 4.07227 17.2949L5.58594 15.791C5.89844 15.4785 5.89844 14.9609 5.58594 14.6484Z"
/>
<path
d="M5.44922 25.1562C8.26172 25.1562 10.5371 22.8711 10.5371 20.0586C10.5371 18.5742 9.93164 17.2754 8.75977 16.2207C8.55469 16.0254 8.50586 15.918 8.50586 15.625L8.51562 6.79688C8.51562 4.81445 7.26562 3.45703 5.44922 3.45703C3.61328 3.45703 2.35352 4.81445 2.35352 6.79688L2.36328 15.625C2.36328 15.918 2.32422 16.0254 2.10938 16.2207C0.947266 17.2754 0.332031 18.5742 0.332031 20.0586C0.332031 22.8711 2.61719 25.1562 5.44922 25.1562Z"
fill="#F93131"
/>
<path
d="M5.44922 25.1562C8.26172 25.1562 10.5371 22.8711 10.5371 20.0586C10.5371 18.5742 9.93164 17.2754 8.75977 16.2207C8.55469 16.0254 8.50586 15.918 8.50586 15.625L8.51562 6.79688C8.51562 4.81445 7.26562 3.45703 5.44922 3.45703C3.61328 3.45703 2.35352 4.81445 2.35352 6.79688L2.36328 15.625C2.36328 15.918 2.32422 16.0254 2.10938 16.2207C0.947266 17.2754 0.332031 18.5742 0.332031 20.0586C0.332031 22.8711 2.61719 25.1562 5.44922 25.1562ZM5.44922 23.7402C3.4082 23.7402 1.76758 22.0801 1.76758 20.0586C1.76758 18.8379 2.34375 17.7344 3.37891 17.041C3.68164 16.8359 3.79883 16.6504 3.79883 16.25L3.79883 6.85547C3.79883 5.68359 4.47266 4.89258 5.44922 4.89258C6.40625 4.89258 7.08008 5.68359 7.08008 6.85547L7.08008 16.25C7.08008 16.6504 7.19727 16.8359 7.5 17.041C8.53516 17.7344 9.11133 18.8379 9.11133 20.0586C9.11133 22.0801 7.46094 23.7402 5.44922 23.7402Z"
/>
<path
d="M5.43945 22.4219C6.74805 22.4219 7.80273 21.3574 7.80273 20.0488C7.80273 19.1309 7.28516 18.3789 6.5332 17.9688C6.2207 17.8027 6.11328 17.6855 6.11328 17.207L6.11328 7.68555C6.11328 7.2168 5.81055 6.91406 5.43945 6.91406C5.05859 6.91406 4.76562 7.2168 4.76562 7.68555L4.76562 17.207C4.76562 17.6855 4.6582 17.8027 4.3457 17.9688C3.59375 18.3789 3.07617 19.1309 3.07617 20.0488C3.07617 21.3672 4.13086 22.4219 5.43945 22.4219Z"
/>
</g>
</svg>

22
src/lib/icons/weight.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
export let fill: string = 'var(--color)'
export let fill = 'var(--color)';
</script>
<!--
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 768 768" {fill}>
<path d="M480 192c0-52.9-43.1-96-96-96s-96 43.1-96 96 43.1 96 96 96 96-43.1 96-96zM320 192c0-35.3 28.7-64 64-64s64 28.7 64 64-28.7 64-64 64c-35.3 0-64-28.7-64-64z"></path>
@@ -8,9 +9,18 @@
</svg>
-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 19.3098 20.6543" {fill}>
<g>
<rect height="20.6543" opacity="0" width="19.3098" x="0" y="0"/>
<path d="M0.143198 17.4316C-0.364614 19.4629 0.494761 20.6348 2.45765 20.6348L16.8522 20.6348C18.8151 20.6348 19.6744 19.4629 19.1666 17.4316L17.0084 8.71094C16.6471 7.27539 15.6119 6.44531 14.1569 6.44531L5.15296 6.44531C3.69789 6.44531 2.65296 7.27539 2.3014 8.71094ZM1.66664 17.5293L3.76624 9.25781C3.98109 8.41797 4.4596 8.01758 5.27015 8.01758L14.0397 8.01758C14.8502 8.01758 15.3287 8.41797 15.5436 9.25781L17.6432 17.5293C17.9069 18.5352 17.5162 19.0625 16.6471 19.0625L2.65296 19.0625C1.79359 19.0625 1.40296 18.5352 1.66664 17.5293ZM8.8639 7.58789L10.4362 7.58789L10.4362 4.80469L8.8639 4.80469ZM9.65492 5.56641C11.1686 5.56641 12.4479 4.30664 12.4479 2.79297C12.4479 1.26953 11.1686 0 9.65492 0C8.13148 0 6.86195 1.26953 6.86195 2.79297C6.86195 4.31641 8.14124 5.56641 9.65492 5.56641ZM9.65492 4.20898C8.88343 4.20898 8.22914 3.56445 8.22914 2.79297C8.22914 2.02148 8.87367 1.35742 9.65492 1.35742C10.4264 1.35742 11.0807 2.02148 11.0807 2.79297C11.0807 3.56445 10.4362 4.20898 9.65492 4.20898Z"/>
</g>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 19.3098 20.6543"
{fill}
>
<g>
<rect height="20.6543" opacity="0" width="19.3098" x="0" y="0" />
<path
d="M0.143198 17.4316C-0.364614 19.4629 0.494761 20.6348 2.45765 20.6348L16.8522 20.6348C18.8151 20.6348 19.6744 19.4629 19.1666 17.4316L17.0084 8.71094C16.6471 7.27539 15.6119 6.44531 14.1569 6.44531L5.15296 6.44531C3.69789 6.44531 2.65296 7.27539 2.3014 8.71094ZM1.66664 17.5293L3.76624 9.25781C3.98109 8.41797 4.4596 8.01758 5.27015 8.01758L14.0397 8.01758C14.8502 8.01758 15.3287 8.41797 15.5436 9.25781L17.6432 17.5293C17.9069 18.5352 17.5162 19.0625 16.6471 19.0625L2.65296 19.0625C1.79359 19.0625 1.40296 18.5352 1.66664 17.5293ZM8.8639 7.58789L10.4362 7.58789L10.4362 4.80469L8.8639 4.80469ZM9.65492 5.56641C11.1686 5.56641 12.4479 4.30664 12.4479 2.79297C12.4479 1.26953 11.1686 0 9.65492 0C8.13148 0 6.86195 1.26953 6.86195 2.79297C6.86195 4.31641 8.14124 5.56641 9.65492 5.56641ZM9.65492 4.20898C8.88343 4.20898 8.22914 3.56445 8.22914 2.79297C8.22914 2.02148 8.87367 1.35742 9.65492 1.35742C10.4264 1.35742 11.0807 2.02148 11.0807 2.79297C11.0807 3.56445 10.4362 4.20898 9.65492 4.20898Z"
/>
</g>
</svg>

6
src/lib/interfaces/IModal.ts
View File

@@ -1,4 +1,4 @@
export default interface IModal {
opens: any
data: any
}
opens: any; // eslint-disable-line
data: any; // eslint-disable-line
}

24
src/lib/interfaces/ITelemetry.ts
View File

@@ -1,17 +1,17 @@
export interface IGatewayTelemetry {
gateway_name: string;
t: string;
temperature: string;
battery_level?: string;
last_sync?: string;
gateway_name: string;
t: string;
temperature: string;
battery_level?: string;
last_sync?: string;
}
export interface IHiveTelemetry {
hive_name: string;
t: string;
temperature: string;
humidity?: string;
pressure?: string;
weight?: string;
battery_level?: string;
hive_name: string;
t: string;
temperature: string;
humidity?: string;
pressure?: string;
weight?: string;
battery_level?: string;
}

101
src/lib/mqttClient.ts
View File

@@ -1,60 +1,73 @@
// NB! mqtt package is imported in <head> from CDN
import { addHiveMessage, addGatewayMessageQueue } from './store';
import { env } from '$env/dynamic/public';
import type { IClientOptions, MqttClient } from 'mqtt';
import type { IGatewayTelemetry, IHiveTelemetry } from './interfaces/ITelemetry';
const options: IClientOptions = {
port: 80,
protocolVersion: 5,
keepalive: 60,
clean: true,
reconnectPeriod: 1000,
connectTimeout: 30 * 1000,
properties: {
requestResponseInformation: true,
requestProblemInformation: true
}
};
const fallbackMQTTBroker = 'ws://test.mosquitto.org:8080';
function setupMQTTClient(host: string) {
const mqttClient: MqttClient = mqtt.connect(host, options);
function buildOptions() {
const url = env?.PUBLIC_MQTT_BROKER_WS_URL || fallbackMQTTBroker;
mqttClient.on('connect', () => {
console.log(`connected to mqtt ${new Date()}`);
mqttClient.subscribe('telemetry/hive/+', { qos: 0 });
mqttClient.subscribe('telemetry/gateway/+', { qos: 0 });
});
const options: IClientOptions = {
protocolVersion: 5,
keepalive: 60,
clean: true,
reconnectPeriod: 1000,
connectTimeout: 30 * 1000,
properties: {
requestResponseInformation: true,
requestProblemInformation: true
}
};
mqttClient.on('error', (err) => {
console.log(err);
});
return { host: url, options };
}
// For every message received, check if topic matches any of the message queues
mqttClient.on('message', (topic: string, message: string) => {
if (topic.includes('/hive/')) {
const json = parseJSONMessage(message);
if (!json) return;
addHiveMessage(json as IHiveTelemetry);
} else if (topic.includes('/gateway/')) {
const json = parseJSONMessage(message);
if (!json) return;
addGatewayMessageQueue(json as IGatewayTelemetry);
} else {
console.warn('got message for unexpected topic:', topic);
console.warn('unexpected message:', message);
}
});
function messageForwarder(topic: string) {
if (topic.includes('/hive/')) {
return (d: object) => addHiveMessage(d as IHiveTelemetry);
} else if (topic.includes('/gateway/')) {
return (d: object) => addGatewayMessageQueue(d as IGatewayTelemetry);
}
return () => console.log('WARN! No handler for topic:', topic);
}
function setupMQTTClient() {
const { host, options } = buildOptions();
const mqttClient: MqttClient = mqtt.connect(host, options);
mqttClient.on('connect', () => {
console.log(`connected to mqtt ${new Date()}`);
mqttClient.subscribe('telemetry/hive/+', { qos: 0 });
mqttClient.subscribe('telemetry/gateway/+', { qos: 0 });
});
mqttClient.on('error', (err) => {
console.log('mqtt client error:');
console.log(err);
});
// For every message received, check if topic matches any of the message queues
mqttClient.on('message', (topic: string, message: string) => {
const func = messageForwarder(topic);
const json = parseJSONMessage(message);
if (!json) return;
func(json);
});
}
function parseJSONMessage(message: string): IHiveTelemetry | IGatewayTelemetry | null {
try {
return JSON.parse(message);
} catch (error) {
console.error('Unable to parse mqtt message:');
console.error(error);
return null;
}
try {
return JSON.parse(message);
} catch (error) {
console.error('Unable to parse mqtt message:');
console.error(error);
return null;
}
}
export default setupMQTTClient;

20
src/lib/telemetryFormatters.ts
View File

@@ -1,24 +1,24 @@
export function formatWeight(weight: string | undefined) {
return weight || 24
return weight || 24;
}
export function formatTemperature(temp: string | undefined) {
return temp ? temp.replace(".00", "") : '-'
return temp ? temp.replace('.00', '') : '-';
}
export function formatHumidity(humidity: string | undefined) {
return humidity ? humidity.replace(".00", "") : '-'
return humidity ? humidity.replace('.00', '') : '-';
}
export function formatBattery(batteryLevel: string | undefined) {
return batteryLevel || 89
return batteryLevel || 89;
}
export function diffTime(date: Date | string | undefined): number {
if (!date) return new Date().getTime()
if (typeof date === 'string') date = new Date(date)
if (!date) return new Date().getTime();
if (typeof date === 'string') date = new Date(date);
const seconds = (new Date().getTime() - date.getTime()) / 1000
return Math.floor(seconds)
// return Math.round(seconds / 10) * 10
}
const seconds = (new Date().getTime() - date.getTime()) / 1000;
return Math.floor(seconds);
// return Math.round(seconds / 10) * 10
}

3
src/routes/+layout.svelte
View File

@@ -1,11 +1,10 @@
<script lang="ts">
import { onMount } from 'svelte';
import { PUBLIC_MQTT_BROKER_WS_URL } from '$env/static/public';
import FooterNavigation from '$lib/components/FooterNavigation.svelte';
import Modal from '$lib/components/Modal.svelte';
import setupMQTTClient from '$lib/mqttClient';
onMount(() => setupMQTTClient(PUBLIC_MQTT_BROKER_WS_URL));
onMount(setupMQTTClient);
</script>
<div id="app">

31
src/routes/+page.svelte
View File

@@ -6,13 +6,22 @@
import LowBattery from '$lib/components/cards/LowBattery.svelte';
import NoData from '$lib/components/cards/NoData.svelte';
import WeightChanged from '$lib/components/cards/WeightChanged.svelte';
import Graph from '$lib/components/Graph.svelte';
</script>
<main>
<h1>Hive monitor</h1>
<span class="header">Hives</span>
<HiveSummary />
<div class="hive-container">
<HiveSummary />
</div>
<span class="header">Graphs</span>
<div class="graph-container">
<Graph />
<Graph />
</div>
<span class="header">Gateways</span>
<GatewaySummary />
@@ -26,4 +35,24 @@
</main>
<style lang="scss">
.graph-container {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
@media only screen and (min-width: 768px) {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
}
.hive-container {
display: grid;
grid-template-columns: 1fr;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1rem;
@media only screen and (min-width: 768px) {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
}
</style>

31
src/routes/alarms/+page.svelte
View File

@@ -1,27 +1,22 @@
<script lang="ts">
import HighTemperature from '$lib/components/cards/HighTemperature.svelte';
import LowTemperature from '$lib/components/cards/LowTemperature.svelte';
import LowBattery from '$lib/components/cards/LowBattery.svelte';
import NoData from '$lib/components/cards/NoData.svelte';
import WeightChanged from '$lib/components/cards/WeightChanged.svelte';
import HighTemperature from '$lib/components/cards/HighTemperature.svelte';
import LowTemperature from '$lib/components/cards/LowTemperature.svelte';
import LowBattery from '$lib/components/cards/LowBattery.svelte';
import NoData from '$lib/components/cards/NoData.svelte';
import WeightChanged from '$lib/components/cards/WeightChanged.svelte';
</script>
<main>
<h1>Alarms</h1>
<h1>Alarms</h1>
<span class="header">Alerts</span>
<HighTemperature temperature="32" />
<LowTemperature temperature="10" />
<LowBattery battery="19" />
<NoData time="1" />
<WeightChanged from="21" to="22" />
<p class="read-the-docs">
Click on the Vite and Svelte logos to learn more
</p>
<span class="header">Alerts</span>
<HighTemperature temperature="32" />
<LowTemperature temperature="10" />
<LowBattery battery="19" />
<NoData time="1" />
<WeightChanged from="21" to="22" />
<p class="read-the-docs">Click on the Vite and Svelte logos to learn more</p>
</main>
<style lang="scss">

84
src/routes/dashboard/+page.svelte
View File

@@ -1,13 +1,89 @@
<script lang="ts">
import GatewaySummary from '$lib/components/GatewaySummary.svelte';
import GatewaySummary from '$lib/components/GatewaySummary.svelte';
import Badge from '$lib/components/Badge.svelte';
import Graph from '$lib/components/Graph.svelte';
import Calendar from '$lib/components/Calendar.svelte';
import Slider from '$lib/components/Slider.svelte';
import Dropdown from '$lib/components/Dropdown.svelte';
let selectedDate = 'All time';
const updateDate = (event: CustomEvent) => {
event.preventDefault();
selectedDate = event.detail;
};
</script>
<main>
<h1>Dashboard</h1>
<h1>Dashboard</h1>
<span class="header">Gateways</span>
<GatewaySummary />
<span class="header">Calendar</span>
<div class="calendars">
<Calendar offset={0} />
<Calendar offset={1} />
</div>
<span class="header">Health</span>
<div class="slider">
<Slider />
</div>
<span class="header">Updates</span>
<div class="badges">
<Badge />
<Badge />
<Badge />
<Badge />
</div>
<span class="header">Activity</span>
<Dropdown selected={selectedDate} on:date={updateDate} />
<div class="graphs">
<Graph date={selectedDate} />
<Graph date={selectedDate} />
<Graph date={selectedDate} />
<Graph date={selectedDate} />
<Graph date={selectedDate} />
<Graph date={selectedDate} />
</div>
<span class="header">Gateways</span>
<GatewaySummary />
</main>
<style lang="scss">
@mixin common-grid {
display: grid;
gap: 1rem;
margin-bottom: 2rem;
}
.calendars {
@include common-grid;
grid-template-columns: 1fr;
@media only screen and (min-width: 768px) {
grid-template-columns: repeat(auto-fit, minmax(250px, 350px));
}
}
.slider {
@media only screen and (min-width: 768px) {
max-width: 800px;
}
}
.badges {
@include common-grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.graphs {
@include common-grid;
grid-template-columns: 1fr;
@media only screen and (min-width: 768px) {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
}
</style>

12
src/routes/settings/+page.svelte
View File

@@ -2,17 +2,15 @@
</script>
<main>
<h1>Settings</h1>
<h1>Settings</h1>
</main>
<style lang="scss">
</style>
<!--
from machine import ADC, Pin
adc = ADC(Pin(35))
(adc.read() / 4095) * 2 * 3.3 * 1.1
let battery_voltage = (ADC.read(battery)/4095)*2*3.3*1.1; -->
let battery_voltage = (ADC.read(battery)/4095)*2*3.3*1.1; -->
<style lang="scss">
</style>

147
static/app.css
View File

@@ -1,113 +1,118 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
--color: rgba(255, 255, 255, 0.9);
--color-dim: rgba(255, 255, 255, 0.7);
--background: #242424;
--highlight: #101010;
--background: black;
--highlight: #242424;
--brand: #F6B138;
color-scheme: light dark;
--color: rgba(255, 255, 255, 1);
--color-dim: rgba(255, 255, 255, 0.7);
--background: #242424;
--highlight: #101010;
--background: #000000;
--background-60: #00000060;
--highlight: #242424;
--brand: #f6b138;
color: var(--color);
background-color: var(--background);
color: var(--color);
background-color: var(--background);
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
color: #535bf2;
}
body {
margin:0;
margin: 0;
}
.no-scroll {
overflow: hidden;
overflow: hidden;
}
#app {
display: flex;
min-width: 320px;
min-height: 100vh;
display: flex;
min-width: 320px;
min-height: 100vh;
}
main {
max-width: 550px;
margin: 0 auto 68px;
padding: 1rem;
display: flex;
flex-grow: 1;
flex-direction: column;
margin: 0 auto 68px;
padding: 1rem;
display: flex;
flex-grow: 1;
flex-direction: column;
@media only screen and (min-width: 768px) {
max-width: 80vw;
}
}
main h1 {
margin: 0 0 2rem;
text-align: center;
margin: 0 0 2rem;
text-align: center;
}
main .header {
font-size: 1.2rem;
margin-bottom: 0.5rem;
margin-left: 0.5rem;
display: block;
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 0.5rem;
margin-left: 0.5rem;
display: block;
font-weight: bold;
&:not(:first-of-type) {
margin-top: 2rem;
}
&:not(:first-of-type) {
margin-top: 2rem;
}
}
h1 {
font-size: 3.2em;
line-height: 1;
font-size: 3.2em;
line-height: 1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
--color: rgba(33, 53, 71, 1);
--color-dim: rgba(33, 53, 71, 0.7);
--background: #F3F3F3;
--highlight: white;
--background: white;
--highlight: #F3F3F3;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
:root {
--color: rgba(33, 53, 71, 1);
--color-dim: rgba(33, 53, 71, 0.7);
--background: #f3f3f3;
--highlight: white;
--background: #ffffff;
--background-60: #ffffff60;
--highlight: #f3f3f3;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

12
yarn.lock
View File

@@ -213,6 +213,11 @@
"@jridgewell/resolve-uri" "3.1.0"
"@jridgewell/sourcemap-codec" "1.4.14"
"@kurkle/color@^0.3.0":
version "0.3.4"
resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.4.tgz#4d4ff677e1609214fc71c580125ddddd86abcabf"
integrity sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==
"@nodelib/fs.scandir@2.1.5":
version "2.1.5"
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -553,6 +558,13 @@ chalk@^4.0.0:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
chart.js@^4.4.7:
version "4.4.7"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.7.tgz#7a01ee0b4dac3c03f2ab0589af888db296d896fa"
integrity sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==
dependencies:
"@kurkle/color" "^0.3.0"
"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1:
version "3.5.3"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"