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.
170 lines
5.3 KiB
170 lines
5.3 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 button--hover-icon-contrast 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--icon button--hover-icon-contrast" 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 { spawn } from 'child_process'
|
|
|
|
import potatoAppsForm from './../forms/apps.riot'
|
|
import potatoAppsFormButton from './../components/appsFormButton.riot'
|
|
import appsStore from './../stores/apps.js'
|
|
import formStore from './../stores/form.js'
|
|
|
|
import notificationStore from '@tiny-components/notification/src/notificationStore.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
|
|
appsStore.on('ready', (data) => {
|
|
this.state.apps = data
|
|
this.update()
|
|
})
|
|
|
|
// send event to get all after
|
|
appsStore.on('update', () => {
|
|
appsStore.get()
|
|
})
|
|
|
|
// trigger event to get all apps
|
|
appsStore.trigger('update')
|
|
|
|
},
|
|
|
|
/**
|
|
* start app
|
|
*
|
|
* @param {object} event
|
|
* @param {object} app
|
|
*
|
|
*/
|
|
async handleClick(event, app) {
|
|
try {
|
|
const running = spawn(app.command)
|
|
|
|
running.stdout.on('data', (data) => {
|
|
console.log(data)
|
|
})
|
|
|
|
running.stderr.on('data', (data) => {
|
|
console.log(data)
|
|
})
|
|
|
|
running.on('error', (error) => {
|
|
console.log(error)
|
|
})
|
|
|
|
running.on('close', (code) => {
|
|
console.log(code)
|
|
})
|
|
} catch(error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* start app
|
|
*
|
|
* @param {object} event
|
|
* @param {object} app
|
|
*
|
|
*/
|
|
handleEdit(event, app) {
|
|
event.stopPropagation()
|
|
formStore.open(app._id)
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
addBackgroundStyles(app) {
|
|
|
|
let styles = false
|
|
|
|
if (app.thumbnail) {
|
|
styles = "background-image: url('data:image/jpg;base64," + app.thumbnail + "')"
|
|
}
|
|
|
|
return styles
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
</potato-apps-view> |