Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-12-25 18:05:47 +03:00
Code Issues Packages Projects Releases Wiki Activity

wip: initial widget

Browse Source
This commit is contained in:
Jimmeh 2024-03-03 22:10:46 +00:00
parent 02923fa64c
commit 777b2a1319
2 changed files with 166 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
src/components/Widgets/UptimeKuma.vue Normal file
View File

@ -0,0 +1,145 @@
<template>
<div class="example-wrapper">
<template v-if="monitors">
<div v-for="(monitor, index) in monitors" :key="index" class="">
<p>{{monitor.name}}</p>
<p>{{monitor.status }}</p>
<p>{{monitor.responseTime }}</p>
</div>
</template>
</div>
</template>
<script>
/**
* A simple example which you can use as a template for creating your own widget.
* Takes two optional parameters (`text` and `count`), and fetches a list of images
* from dummyapis.com, then renders the results to the UI.
*/
import axios from "axios";
import WidgetMixin from "@/mixins/WidgetMixin";
export default {
mixins: [WidgetMixin],
components: {},
data() {
return {
monitors: null, // Will store our results from the API
};
},
mounted() {
this.fetchData();
},
computed: {
/* Get the users chosen number of results, from this.options.count
* If not present, or not a number, then return the default (5)
*/
apiKey() {
const apiKey = this.options.apiKey;
if (!apiKey) throw "No API key set";
return apiKey;
},
/* Get users desired image text, or return `Dashy` */
url() {
const apiUrl = this.options.url;
if (!apiUrl) throw "No URL set";
return apiUrl;
},
authHeaders() {
if (!this.options.apiKey) {
return {};
}
const encoded = window.btoa(`:${this.options.apiKey}`);
return { Authorization: `Basic ${encoded}` };
},
},
methods: {
/* The update() method extends mixin, used to update the data.
* It's called by parent component, when the user presses update
*/
update() {
this.startLoading();
this.fetchData();
},
/* Make the data request to the computed API endpoint */
fetchData() {
this.makeRequest(this.url, this.authHeaders)
.then(this.processData);
},
/* Convert API response data into a format to be consumed by the UI */
processData(response) {
const rows = response.split('\n').filter(row => row.startsWith("monitor_"));
const monitors = new Map();
const regex = /monitor_name="([^"]+)"/;
const getValue = (row) => row.match(/\b\d+\b$/);
for (const row of rows) {
const key = row.match(/^(.*?)\{/);
const monitorName = row.match(regex);
if (!monitors.has(monitorName)) {
monitors.set(monitorName, {name: monitorName});
}
const existingMonitor = monitors.get(monitorName);
const value = getValue(row);
switch (key) {
case "monitor_cert_days_remaining": {
existingMonitor.certDaysRemaining = value;
break;
}
case "monitor_cert_is_valid": {
existingMonitor.certValid = value;
break;
}
case "monitor_response_time": {
existingMonitor.responseTime = value;
break;
}
case "monitor_status": {
existingMonitor.status= value;
break;
}
default:
console.log("not matched", key);
break;
}
}
console.log(monitors);
this.monitors = Array.from(monitors.values());
},
},
};
</script>
<style scoped lang="scss">
.example-wrapper {
.image-row {
display: flex;
align-items: center;
justify-content: space-around;
p.picture-title {
font-size: 1.2rem;
color: var(--widget-text-color);
}
img.picture-result {
width: 4rem;
margin: 0.5rem 0;
border-radius: var(--curve-factor);
}
&:not(:last-child) {
border-bottom: 1px dashed var(--widget-text-color);
}
}
}
</style>

31
src/components/Widgets/WidgetBase.vue
View File

@ -1,11 +1,18 @@
<template>
<div :class="`widget-base ${ loading ? 'is-loading' : '' }`">
<div :class="`widget-base ${loading ? 'is-loading' : ''}`">
<!-- Update and Full-Page Action Buttons -->
<Button :click="update" class="action-btn update-btn" v-if="!hideControls && !loading">
<Button
:click="update"
class="action-btn update-btn"
v-if="!hideControls && !loading"
>
<UpdateIcon />
</Button>
<Button :click="fullScreenWidget"
class="action-btn open-btn" v-if="!hideControls && !error && !loading">
<Button
:click="fullScreenWidget"
class="action-btn open-btn"
v-if="!hideControls && !error && !loading"
>
<OpenIcon />
</Button>
<!-- Loading Spinner -->
@ -19,9 +26,11 @@
<p class="retry-link" @click="update">Retry</p>
</div>
<!-- Widget Label -->
<div class="widget-label" v-if="widgetOptions.label">{{ widgetOptions.label }}</div>
<div class="widget-label" v-if="widgetOptions.label">
{{ widgetOptions.label }}
</div>
<!-- Widget -->
<div :class="`widget-wrap ${ error ? 'has-error' : '' }`">
<div :class="`widget-wrap ${error ? 'has-error' : ''}`">
<component
v-bind:is="component"
:options="widgetOptions"
@ -115,6 +124,7 @@ const COMPAT = {
'synology-download': 'SynologyDownload',
'system-info': 'SystemInfo',
'tfl-status': 'TflStatus',
'uptime-kuma':'UptimeKuma',
'wallet-balance': 'WalletBalance',
weather: 'Weather',
'weather-forecast': 'WeatherForecast',
@ -205,14 +215,14 @@ export default {
</script>
<style scoped lang="scss">
@import '@/styles/media-queries.scss';
@import "@/styles/media-queries.scss";
.widget-base {
position: relative;
padding: 0.75rem 0.5rem 0.5rem 0.5rem;
background: var(--widget-base-background);
box-shadow: var(--widget-base-shadow, none);
// Refresh and full-page action buttons
button.action-btn {
button.action-btn {
height: 1rem;
min-width: auto;
width: 1.75rem;
@ -245,7 +255,9 @@ export default {
opacity: 0.5;
border-radius: var(--curve-factor);
background: #ffff0040;
&:hover { background: none; }
&:hover {
background: none;
}
}
}
// Error message output
@ -285,5 +297,4 @@ export default {
}
}
}
</style>