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.
143 lines
4.4 KiB
143 lines
4.4 KiB
<shiny-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>
|
|
<shiny-apps-form-button></shiny-apps-form-button>
|
|
<shiny-close-button></shiny-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>
|
|
|
|
<shiny-apps-form></shiny-apps-form>
|
|
</div>
|
|
<script>
|
|
|
|
import * as riot from 'riot'
|
|
|
|
import ShinyAppsForm from './../forms/apps.riot'
|
|
import ShinyAppsFormButton from './../components/appsFormButton.riot'
|
|
import appsStore from './../stores/apps.js'
|
|
|
|
// let it rain
|
|
riot.register('shiny-apps-form', ShinyAppsForm)
|
|
riot.mount('shiny-apps-form')
|
|
|
|
riot.register('shiny-apps-form-button', ShinyAppsFormButton)
|
|
riot.mount('shiny-apps-form-buttons')
|
|
|
|
/**
|
|
* apps.riot
|
|
*
|
|
* @author Björn Hase
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
|
*
|
|
*
|
|
*/
|
|
|
|
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>
|
|
</shiny-apps-view> |