You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
potato-launcher/src/js/views/apps.riot

143 lines
4.5 KiB

<potato-apps-view>
<div class="views">
<header class="header m-bottom-3">
<div class="display-flex justify-content-space-between m-top-3">
<div>
<button class="button button--icon m-bottom-0">
<svg class="icon icon--big">
<use xlink:href="symbol-defs.svg#icon-filter" />
</svg>
</button>
</div>
<div>
<potato-apps-form-button></potato-apps-form-button>
<potato-close-button></potato-close-button>
</div>
</div>
</header>
<div class="apps">
<div class="grid">
<div class="col-12 col-md-3 col-lg-2" each={ app in state.apps }>
<div class="apps__item" onclick={ (event) => { handleClick(event, app) }} style="{ addBackgroundStyles(app) }">
<div class="apps__header p-4 right">
<button class="button button--transparent p-2" onclick={ (event) => { handleEdit(event, app) }}>
<svg class="icon">
<use xlink:href="symbol-defs.svg#icon-settings" />
</svg>
</button>
</div>
<div class="apps__item-panel p-4">
<h3 class="m-bottom-0">
{ app.name }
</h3>
<div if={ app.description } class="content m-top-3 m-bottom-last-child-0">
{ app.description }
</div>
<div if={ app.tags && app.tags.length > 0 } class="m-top-3">
<span class="badge m-right-3" each={ tag in app.tags }>{ tag }</span>
</div>
</div>
</div>
</div>
</div>
</diV>
<potato-apps-form></potato-apps-form>
</div>
<script>
import * as riot from 'riot'
import potatoAppsForm from './../forms/apps.riot'
import potatoAppsFormButton from './../components/appsFormButton.riot'
import appsStore from './../stores/apps.js'
// let it rain
riot.register('potato-apps-form', potatoAppsForm)
riot.mount('potato-apps-form')
riot.register('potato-apps-form-button', potatoAppsFormButton)
riot.mount('potato-apps-form-buttons')
/**
*
*
* @author Björn Hase
* @license hhttps://www.gnu.org/licenses/gpl-3.0.en.html GPL-3
* @link https://gitea.node001.net/HerrHase/potato-launcher.git
*
*/
export default {
/**
*
*
*/
state: {
apps: []
},
/**
*
*
*/
onMounted() {
// add event to receive data from pouchdb
Neutralino.events.on('pouchdb.apps.ready', (event) => {
this.state.apps = event.detail
this.update()
})
// send event to get all after
appsStore.on('updated', () => {
Neutralino.extensions.dispatch('js.neutralino.database', 'pouchdb.apps.find')
})
// trigger event to get all apps
appsStore.trigger('updated')
},
/**
* start app
*
* @param {object} event
* @param {object} app
*
*/
handleClick(event, app) {
Neutralino.os.execCommand(app.command).catch((error) => {
console.log(error)
})
},
/**
* start app
*
* @param {object} event
* @param {object} app
*
*/
handleEdit(event, app) {
console.log(app)
},
addBackgroundStyles(app) {
let styles = ''
if (app.media) {
styles = "background-image: url('data:image/jpg;base64," + app.media + "')"
}
return styles
}
}
</script>
</potato-apps-view>