Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

initial commit of the custom search widget #1212

Merged
merged 1 commit into from
Jun 4, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 52 additions & 1 deletion docs/widgets.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
- [Healthchecks Status](#healthchecks-status)
- [Mvg Departure](#mvg-departure)
- [Mvg Connection](#mvg-connection)
- [Custom search](#custom-search)
- **[Self-Hosted Services Widgets](#self-hosted-services-widgets)**
- [System Info](#system-info)
- [Cron Monitoring](#cron-monitoring-health-checks)
Expand Down Expand Up @@ -1263,11 +1264,61 @@ In other words: Private, noncomercial, moderate use of the API is tolerated. The

---

### Custom search

Allows web search using multiple user-defined search engines and other websites.

#### Options

**Field** | **Type** | **Required** | **Description**
--- | --- | --- | ---
**`engines`** | `array` | required | An array of search engine objects. Each search engine object should have two required properties: **title** and **url**. See the example below.
**`placeholder`** | `string` | optional | Placeholder text in the search box.

#### Notes
- The first search engine in the engines array will be treated as the default search engine, and used when the user presses `Enter` in the search box.
- Popup blockers can interfere with opening a new search window.

#### Example

This widget allows searching multiple search engines from dashy.
```yaml
- type: 'custom-search'
options:
placeholder: Search for something using the buttons below
engines:
- title: SearXNG
url: https://searx.lan/?q=
- title: Quant
url: https://www.qwant.com/?q=
- title: Bing Web
url: http://www.bing.com/search?q=
- title: Bing Images
url: http://www.bing.com/images/search?q=
- title: Bing Maps
url: http://www.bing.com/maps/search?q=
- title: Yandex
url: https://www.yandex.com/search/?text=
- title: Passmark
url: https://www.passmark.com/search/zoomsearch.php?zoom_query=
- title: IMDB
url: http://www.imdb.com/find?q=
```
#### Info

- **CORS**: 🟢 Not needed
- **Auth**: 🟢 Not Required
- **Price**: 🟢 Free
- **Host**: user defined
- **Privacy**: depends on the user defined search engines.

---


## Self-Hosted Services Widgets

### System Info

_See [MVG Datenschutz](https://www.mvg.de/datenschutz-mvg.html)_
Displays info about the server which Dashy is hosted on. Includes user + host, operating system, uptime and basic memory & load data.

<p align="center"><img width="400" src="https://i.ibb.co/rvDPBDF/system-info.png" /></p>
Expand Down
74 changes: 74 additions & 0 deletions src/components/Widgets/CustomSearch.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<template>
<div class="custom-search">
<input type="text" v-model="query"
@keyup.enter="search(defaultEngine)"
@keyup.stop @keydown.stop
:placeholder="placeholder">
<div class="buttons">
<button
v-for="(engine, key) in engines" :key="key"
v-on:click="search(engine)">
{{ engine.title }}
</button>
</div>
</div>
</template>

<script>
import WidgetMixin from '@/mixins/WidgetMixin';

export default {
mixins: [WidgetMixin],
components: {},
data() {
return {
query: '',
};
},
computed: {
placeholder() {
return this.options.placeholder || '';
},
engines() {
return this.options.engines || [];
},
defaultEngine() {
return this.engines[0];
},
},
methods: {
search(engine) {
if (engine !== undefined && this.query !== '') {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can probably just be shortened to

if (engine && this.query) { ... }

window.open(engine.url + this.query, '_blank');
}
},
},
};

</script>

<style scoped lang="scss">

.custom-search {
font-size: 1.2rem;
input {
width: 80%;
margin: 1rem 10%;
padding: 0.5rem;
font-size: 1.2rem;
}
.buttons {
text-align:center;
button{
margin: 0.5rem;
padding: 0.5rem;
border: none;
color: var(--item-text-color);
background: var(--item-background);
font-size: 1.2rem;
}

}

}
</style>
1 change: 1 addition & 0 deletions src/components/Widgets/WidgetBase.vue
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const COMPAT = {
clock: 'Clock',
'crypto-price-chart': 'CryptoPriceChart',
'crypto-watch-list': 'CryptoWatchList',
'custom-search': 'CustomSearch',
'cve-vulnerabilities': 'CveVulnerabilities',
'domain-monitor': 'DomainMonitor',
'code-stats': 'CodeStats',
Expand Down