From 8eeadbc98ffb554a40ad50d1cd6ae612e8e9a355 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Tue, 22 Jun 2021 14:34:41 +0100 Subject: [PATCH 1/4] :sparkles: Adds option for continious status checking --- docs/status-indicators.md | 11 +++++++++++ src/components/LinkItems/Item.vue | 5 +++++ src/components/LinkItems/ItemGroup.vue | 8 ++++++++ src/utils/ConfigSchema.json | 5 +++++ 4 files changed, 29 insertions(+) diff --git a/docs/status-indicators.md b/docs/status-indicators.md index e459c063e6..1e91af064e 100644 --- a/docs/status-indicators.md +++ b/docs/status-indicators.md @@ -37,6 +37,17 @@ sections: statusCheck: true ``` +## Continuous Checking +By default, with status indicators enabled Dashy will check an applications status on page load, and will not keep indicators updated. This is usually desirable behavior. However, if you do want the status indicators to continue to poll your running services, this can be enabled by setting the `statusCheckInterval` attribute. Here you define an interval in seconds, and Dashy will poll your apps every x seconds. Note that if this number is very low (below 5 seconds), you may notice the app running slightly slower. + +The following example, will instruct Dashy to continuously check the status of your services every 20 seconds + +``` +appConfig: + statusCheck: true + statusCheckInterval: 20 +``` + ## How it Works When Dashy is loaded, items with `statusCheck` enabled will make a request, to `https://[your-host-name]/ping?url=[address-or-servce]`, which in turn will ping that running service, and respond with a status code. Response time is calculated from the difference between start and end time of the request. diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue index 37c0733a3f..cf4aa1d76c 100644 --- a/src/components/LinkItems/Item.vue +++ b/src/components/LinkItems/Item.vue @@ -53,6 +53,7 @@ export default { }, itemSize: String, enableStatusCheck: Boolean, + statusCheckInterval: Number, }, data() { return { @@ -114,6 +115,7 @@ export default { } }, checkWebsiteStatus() { + this.statusResponse = undefined; const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin; const endpoint = `${baseUrl}/ping?url=${this.url}`; axios.get(endpoint) @@ -131,6 +133,9 @@ export default { mounted() { this.manageTitleEllipse(); if (this.enableStatusCheck) this.checkWebsiteStatus(); + if (this.statusCheckInterval > 0) { + setInterval(this.checkWebsiteStatus, this.statusCheckInterval * 1000); + } }, }; diff --git a/src/components/LinkItems/ItemGroup.vue b/src/components/LinkItems/ItemGroup.vue index e94a27940b..878050557c 100644 --- a/src/components/LinkItems/ItemGroup.vue +++ b/src/components/LinkItems/ItemGroup.vue @@ -29,6 +29,7 @@ :backgroundColor="item.backgroundColor" :itemSize="newItemSize" :enableStatusCheck="shouldEnableStatusCheck(item.statusCheck)" + :statusCheckInterval="getStatusCheckInterval()" @itemClicked="$emit('itemClicked')" @triggerModal="triggerModal" /> @@ -98,6 +99,13 @@ export default { const globalPreference = this.config.appConfig.statusCheck || false; return itemPreference !== undefined ? itemPreference : globalPreference; }, + getStatusCheckInterval() { + let interval = this.config.appConfig.statusCheckInterval; + if (!interval) return 0; + if (interval > 60) interval = 60; + if (interval < 1) interval = 0; + return interval; + }, }, }; diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json index edf2db4dbc..56bce83ba2 100644 --- a/src/utils/ConfigSchema.json +++ b/src/utils/ConfigSchema.json @@ -131,6 +131,11 @@ "default": false, "description": "Displays an online/ offline status for each of your services" }, + "statusCheckInterval": { + "type": "number", + "default": 0, + "description": "How often to recheck statuses. If set to 0, status will only be checked on page load" + }, "auth": { "type": "array", "description": "Usernames and hashed credentials for frontend authentication", From 2560f168949c65842262216762f87bc15fddecae Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Tue, 22 Jun 2021 14:34:41 +0100 Subject: [PATCH 2/4] :sparkles: Adds option for continious status checking Re #35 --- docs/status-indicators.md | 11 +++++++++++ src/components/LinkItems/Item.vue | 5 +++++ src/components/LinkItems/ItemGroup.vue | 8 ++++++++ src/utils/ConfigSchema.json | 5 +++++ 4 files changed, 29 insertions(+) diff --git a/docs/status-indicators.md b/docs/status-indicators.md index e459c063e6..1e91af064e 100644 --- a/docs/status-indicators.md +++ b/docs/status-indicators.md @@ -37,6 +37,17 @@ sections: statusCheck: true ``` +## Continuous Checking +By default, with status indicators enabled Dashy will check an applications status on page load, and will not keep indicators updated. This is usually desirable behavior. However, if you do want the status indicators to continue to poll your running services, this can be enabled by setting the `statusCheckInterval` attribute. Here you define an interval in seconds, and Dashy will poll your apps every x seconds. Note that if this number is very low (below 5 seconds), you may notice the app running slightly slower. + +The following example, will instruct Dashy to continuously check the status of your services every 20 seconds + +``` +appConfig: + statusCheck: true + statusCheckInterval: 20 +``` + ## How it Works When Dashy is loaded, items with `statusCheck` enabled will make a request, to `https://[your-host-name]/ping?url=[address-or-servce]`, which in turn will ping that running service, and respond with a status code. Response time is calculated from the difference between start and end time of the request. diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue index 37c0733a3f..cf4aa1d76c 100644 --- a/src/components/LinkItems/Item.vue +++ b/src/components/LinkItems/Item.vue @@ -53,6 +53,7 @@ export default { }, itemSize: String, enableStatusCheck: Boolean, + statusCheckInterval: Number, }, data() { return { @@ -114,6 +115,7 @@ export default { } }, checkWebsiteStatus() { + this.statusResponse = undefined; const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin; const endpoint = `${baseUrl}/ping?url=${this.url}`; axios.get(endpoint) @@ -131,6 +133,9 @@ export default { mounted() { this.manageTitleEllipse(); if (this.enableStatusCheck) this.checkWebsiteStatus(); + if (this.statusCheckInterval > 0) { + setInterval(this.checkWebsiteStatus, this.statusCheckInterval * 1000); + } }, }; diff --git a/src/components/LinkItems/ItemGroup.vue b/src/components/LinkItems/ItemGroup.vue index e94a27940b..878050557c 100644 --- a/src/components/LinkItems/ItemGroup.vue +++ b/src/components/LinkItems/ItemGroup.vue @@ -29,6 +29,7 @@ :backgroundColor="item.backgroundColor" :itemSize="newItemSize" :enableStatusCheck="shouldEnableStatusCheck(item.statusCheck)" + :statusCheckInterval="getStatusCheckInterval()" @itemClicked="$emit('itemClicked')" @triggerModal="triggerModal" /> @@ -98,6 +99,13 @@ export default { const globalPreference = this.config.appConfig.statusCheck || false; return itemPreference !== undefined ? itemPreference : globalPreference; }, + getStatusCheckInterval() { + let interval = this.config.appConfig.statusCheckInterval; + if (!interval) return 0; + if (interval > 60) interval = 60; + if (interval < 1) interval = 0; + return interval; + }, }, }; diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json index edf2db4dbc..56bce83ba2 100644 --- a/src/utils/ConfigSchema.json +++ b/src/utils/ConfigSchema.json @@ -131,6 +131,11 @@ "default": false, "description": "Displays an online/ offline status for each of your services" }, + "statusCheckInterval": { + "type": "number", + "default": 0, + "description": "How often to recheck statuses. If set to 0, status will only be checked on page load" + }, "auth": { "type": "array", "description": "Usernames and hashed credentials for frontend authentication", From be4621d76f299cf77b151c5a5b157acc2593e3fd Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Tue, 22 Jun 2021 14:41:17 +0100 Subject: [PATCH 3/4] :bug: Ammends color variables for login page, Re: #50 --- src/styles/color-themes.scss | 9 +++++++-- src/views/Login.vue | 13 +++++++------ 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss index 747f045824..a288ac556e 100644 --- a/src/styles/color-themes.scss +++ b/src/styles/color-themes.scss @@ -178,6 +178,7 @@ html[data-theme='material-original'] { --heading-text-color: #fff; --status-check-tooltip-background: #f2f2f2; --status-check-tooltip-color: #01579b; + --login-form-background: #fff; } html[data-theme='material-dark-original'] { @@ -250,7 +251,7 @@ html[data-theme='colorful'] { } } -html[data-theme='minimal-light'], html[data-theme='minimal-dark'] { +html[data-theme='minimal-light'], html[data-theme='minimal-dark'], html[data-theme='vaporware'] { --font-body: 'PTMono-Regular', 'Courier New', monospace; --font-headings: 'PTMono-Regular', 'Courier New', monospace; label.lbl-toggle h3 { @@ -443,6 +444,7 @@ html[data-theme='material'] { --search-container-background: #4285f4; --welcome-popup-text-color: #f5f5f5; --footer-text-color: #f5f5f5cc; + // --login-form-background-secondary: #f5f5f5cc; header { background: #4285f4; @@ -504,6 +506,8 @@ html[data-theme='material-dark'] { --scroll-bar-color: #08B0BB; --scroll-bar-background: #131a1f; --status-check-tooltip-color: #131a1f; + // --login-form-color: #131a1f; + --login-form-background-secondary: #131a1f; &::-webkit-scrollbar-thumb { border-left: 1px solid #131a1f; @@ -536,6 +540,7 @@ html[data-theme='minimal-light'] { --curve-factor-navbar: 8px; --status-check-tooltip-background: #f2f2f2; --status-check-tooltip-color: #000; + --login-form-color: #101931; section.filter-container { background: #fff; @@ -579,4 +584,4 @@ html[data-theme='minimal-dark'] { border: 1px solid #fff; } } -} \ No newline at end of file +} diff --git a/src/views/Login.vue b/src/views/Login.vue index 56af0979d4..3d16e0bbb3 100644 --- a/src/views/Login.vue +++ b/src/views/Login.vue @@ -93,19 +93,20 @@ export default { .login-field input { color: var(--login-form-color); - border-color: var(--login-form-background-secondary); - background: var(--login-form-background-secondary); + border-color: var(--login-form-color); + background: var(--login-form-background); &:focus { } } Button.login-button { - background: var(--login-form-background-secondary); - border-color: var(--login-form-background-secondary); + background: var(--login-form-color); + border-color: var(--login-form-background); + color: var(--login-form-background); &:hover { + color: var(--login-form-color); border-color: var(--login-form-color); - color: var(--login-form-background-secondary); - background: var(--login-form-color); + background: var(--login-form-background); } &:active, &:focus { box-shadow: 1px 1px 6px var(--login-form-color); From b051c399acfe3443555407895f15a6cf3162a953 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Tue, 22 Jun 2021 14:44:05 +0100 Subject: [PATCH 4/4] :nail_care: Adds new theme, Vapourwave. And fixes curve styling of nav --- src/components/Settings/SettingsContainer.vue | 1 + src/styles/color-themes.scss | 83 +++++++++++++++++++ src/utils/defaults.js | 1 + 3 files changed, 85 insertions(+) diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue index fdfb677e31..2067716a58 100644 --- a/src/components/Settings/SettingsContainer.vue +++ b/src/components/Settings/SettingsContainer.vue @@ -136,6 +136,7 @@ export default { position: relative; flex: 1; background: var(--settings-background); + border-radius: var(--curve-factor-navbar); } .options-container { display: flex; diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss index a288ac556e..4a0bc6f3f9 100644 --- a/src/styles/color-themes.scss +++ b/src/styles/color-themes.scss @@ -585,3 +585,86 @@ html[data-theme='minimal-dark'] { } } } + +html[data-theme='vaporware'] { + --primary: #09bfe6; + --background: #100e2c; + --background-darker: #6c27ea; + --background-darker: linear-gradient(0deg, rgba(108,39,234,1) 0%, rgba(132,76,235,1) 80%); + --settings-text-color: #6c27ea; + --item-group-outer-background: #096de6; + --item-group-outer-background: linear-gradient(45deg, rgba(9,109,230,1) 0%, rgba(9,147,230,1) 50%, rgba(9,109,230,1) 100%); + --item-group-background: #190e2c; + --item-group-heading-text-color: var(--white); + --item-group-heading-text-color-hover: #5118b9; + --item-text-color: #5118b9; + --item-background: #09bfe6; + --item-background-hover: #9967f6; + --footer-text-color: var(--white); + --item-shadow: none; + --curve-factor: 2px; + --curve-factor-navbar: 6px; + --login-form-color: #09bfe6; + + .home { + background: linear-gradient(180deg, rgba(16,14,44,1) 10%, rgba(27,24,79,1) 40%, rgba(16,14,44,1) 100%); + } + + div.item-group-container { + gap: 0.3rem; + margin: 1rem auto; + } + div.collapsable { + margin: 0.2rem; + padding: 0.2rem; + } + div.content-inner { + padding: 0 !important; + } + a.item { + margin: 0.1rem; + border: 0; + &.size-medium { + min-height: 80px; + } + } + section.filter-container { + background: linear-gradient(0deg, var(--background) 25%, #6c27ea 100%); + form { + background: #6c27ea; + height: 2.5rem; + } + form label, i.clear-search { + color: #100e2c; + border-color: #100e2c; + font-weight: bold; + } + } + .tile-title span.text { + font-weight: normal; + } + label.lbl-toggle h3 { + font-size: 1.4rem; + } + footer { + color: var(--white); + } + a.item { + background: linear-gradient(45deg, rgba(9,191,230,1) 0%, rgba(9,191,230,1) 80%, rgba(9,203,230,1) 100%); + &:hover { + background: #844ceb; + color: #09bfe6; + } + .tile-title span.text { transition: none; } + } + + div.login-page { + background: url('https://i.ibb.co/JqcJcGK/vaporwave-sunset-wallpaper.jpg'); + background-size: cover; + } + // body { + // background: url('https://i.ibb.co/JqcJcGK/vaporwave-sunset-wallpaper.jpg'); + // background-size: cover; + // div.home { background: none; } + // } +} \ No newline at end of file diff --git a/src/utils/defaults.js b/src/utils/defaults.js index b2fcb00cb4..e8a105ab04 100644 --- a/src/utils/defaults.js +++ b/src/utils/defaults.js @@ -33,6 +33,7 @@ module.exports = { 'tiger', 'material-original', 'material-dark-original', + 'vaporware', 'high-contrast-dark', 'high-contrast-light', ],