potato-launcher/src/js/views/apps.riot

<potato-apps-view>
    <div class="views">

        <header class="header m-bottom-3">
            <div class="display-flex justify-content-space-between m-top-3">
                <div class="display-flex">
                    <potato-sorting class="m-right-3"></potato-sorting>
                    <potato-filter></potata-filter>
                </div>
                <div>
                    <potato-apps-form-button class="m-right-3"></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) }}>
                        <img class="apps__item-background" if={ app.thumbnail } src="{ state.storagePath + '/' + app.thumbnail.path }" />
                        <div class="apps__item-inner">
                            <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>
        </diV>

        <potato-apps-form></potato-apps-form>
    </div>
    <script>
        import * as riot from 'riot'
        import dayjs from 'dayjs'

        import { spawn } from 'child_process'

        import potatoAppsForm from './../forms/apps.riot'
        import potatoAppsFormButton from './../components/appsFormButton.riot'
        import potatoFilter from './../components/filter.riot'
        import potatoSorting from './../components/sorting.riot'

        import appsStore from './../stores/apps.js'
        import formStore from './../stores/form.js'

        import notificationStore from '@tiny-components/notification/src/notificationStore.js'

        const { ipcRenderer } = require('electron')

        // 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')

        riot.register('potato-filter', potatoFilter)
        riot.mount('potato-filter')

        riot.register('potato-sorting', potatoSorting)
        riot.mount('potato-sorting')

        /**
         *
         *
         *  @author Björn Hase <me@herr-hase.wtf>
         *  @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: [],
                storagePath: undefined
            },

            /**
             *
             *
             */
            onMounted() {

                this.state.storagePath = ipcRenderer.sendSync('getPathUserData') + '/attachments'

                // 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) {

                const running = spawn(app.command)

                // send notification for starting
                running.on('spawn', (data) => {
                    notificationStore.success(app.name + ' is starting')

                    // adding current datetime for started app
                    app.date_started = dayjs()
                    appsStore.put(app)
                })

                // if app has a error
                running.on('error', (error) => {
                    notificationStore.danger(app.name + ' could be not started, check if command is correct')
                })

                // if app is closing
                running.on('close', (code) => {
                    if (code === 0) {
                        notificationStore.success(app.name + ' is closed')
                    }
                })
            },

            /**
             *  edit app
             *
             *  @param  {object} event
             *  @param  {object} app
             *
             */
            handleEdit(event, app) {
                event.stopPropagation()
                formStore.open(app._id)
            }
        }
    </script>
</potato-apps-view>