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

<potato-apps-form>
    <div class={ getCssClasses() }>
        <div class="sidebar__inner">

            <!-- header -->
            <tiny-sidebar-form-header title="New" close={ (event) => { handleClose(event) }}></tiny-sidebar-form-header>

            <div class="sidebar__form">

            <!-- body -->
            <form class="form" novalidate method="post" onsubmit={ (event) => ( state.validator.submit(event) ) }>
                <div class="sidebar__body">

                    <input type="hidden" if={ state.current._id } name="_id" value="{ state.current._id }" />
                    <input type="hidden" if={ state.current._rev } name="_rev" value="{ state.current._rev }" />

                    <!-- name -->
                    <div class="field-group">
                        <label class="field-label">
                            name*
                            <input type="text" class="field-text" name="name" value="{ state.current.name ? state.current.name : '' }" />
                        </label>
                    </div>

                    <!-- command -->
                    <div class="field-group">
                        <label class="field-label">
                            command*
                            <div class="field-input-group">
                                <input class="field-text" type="text" name="command" value="{ state.current.command ? state.current.command : '' }" />
                                <button class="button button--hover-icon-contrast m-bottom-0" type="button" onclick={ handleSelectProgram }>
                                    <svg class="icon">
                                        <use xlink:href="symbol-defs.svg#icon-folder" />
                                    </svg>
                                </button>
                            </div>
                        </label>
                        <input id="apps-form-select-program" class="hidden-xxs hidden-xs-up" type="file" onchange={ (event) => { handleSelectCommand(event) }} />
                        <field-error name="command"></field-error>
                    </div>

                    <!-- tags -->
                    <div class="field-group">
                        <label class="field-label">
                            tags
                            <potato-field-tags name="tags"></potato-field-tags>
                        </label>
                        <field-error name="tags[]"></field-error>
                    </div>

                    <!-- description -->
                    <div class="field-group">
                        <label class="field-label">
                            description
                            <textarea class="field-text" name="description" value="{ state.current.description ? state.current.description : '' }"></textarea>
                        </label>
                    </div>

                    <!-- media -->
                    <div class="field-group">
                        <label class="field-label">
                            Thumbnail<br />
                            <button class="button button--hover-icon-contrast m-top-3" type="button" onclick={ (event) => { handleSelectThumbnail(event) }}>
                                <svg class="icon">
                                    <use xlink:href="symbol-defs.svg#icon-image" />
                                </svg>
                            </button>
                        </label>
                        <div class="field-media" if={ state.current.thumbnail }>
                            <div class="field-media__img">
                                <button class="button button--hover-icon-contrast" type="button" onclick={ (event) => { handleRemoveThumbnail(event) }}>
                                    <svg class="icon">
                                        <use xlink:href="symbol-defs.svg#icon-delete" />
                                    </svg>
                                </button>
                                <img class="w-100" src={ toImage(state.current.thumbnail) } />
                            </div>
                        </div>
                        <field-error name="thumbnail"></field-error>
                    </div>

                    <tiny-loading active={ state.loading }></tiny-loading>
                 </div>

                 <!-- footer -->
                 <tiny-sidebar-form-footer id={ state.current.id ? state.current.id : false } loading={ state.loading }></tiny-sidebar-form-footer>
            </form>
            </div>

        </div>
    </div>

    <script>

        import * as riot from 'riot'

        // mixins
        import sidebarMixin from './../mixins/sidebarForm.js'

        // store for sidebar
        import formStore from './../stores/form.js'

        // store for sidebar
        import appsStore from './../stores/apps.js'

        // store for tags
        import tagsStore from './../stores/tags.js'

        // validator
        import FormValidator from '@tiny-components/validator/src/formValidator.js'

        /**
         *  handler for apps
         *
         *  @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 () => {
             return {

                 ...sidebarMixin,  // adding basic funtion for sidebar

                 /**
                  *
                  *
                  */
                 onMounted() {

                     // adding event for open sidebar
                     formStore.on('open', (id) =>  {

                        // if id is send, load apps from pouchdb
                        if (id) {
                             Neutralino.extensions.dispatch('js.neutralino.pouchdb', 'pouchdb.apps.findOne', {
                                 'id': id
                             })
                        }

                        this.state.open = true
                        this.update()
                     })

                     // creating formValidator
                     this.state.validator = new FormValidator(this.$('.form'), {
                         'name': {
                             'presence': true
                         },
                         'command': {
                             'presence': true
                         },
                         'tags': {

                         }
                     })

                     // adding on success
                     this.state.validator.onSuccess((event, data) => {
                         this.handleSuccess(event, data)
                     })

                     // receive from extensions database
                     Neutralino.events.on('pouchdb.apps.success', (event) => {

                         appsStore.trigger('updated')

                         // stop loading
                         this.state.loading = false
                         this.update()
                     })

                     // receive from extensions database
                     Neutralino.events.on('pouchdb.apps.readyOne', (event) => {

                         this.reset()

                         this.state.current = event.detail
                         tagsStore.trigger('update', this.state.current.tags)

                         // stop loading
                         this.state.loading = false
                         this.update()
                     })

                 },


                /**
                 *
                 *
                 *
                 */
                async handleSelectProgram(event) {
                   event.preventDefault()

                   let entry = await Neutralino.os.showOpenDialog('', {
                       'multiSelections': false,
                       'defaultPath': '/home/'
                   })

                   this.state.current.command = entry
                   this.update()
                },

                /**
                 *
                 *
                 *
                 */
                handleRemoveThumbnail(event) {
                   event.preventDefault()

                   this.state.current.thumbnail = null
                   this.update()
                },

                /**
                 *
                 *
                 *  @param  {object} event
                 *
                 */
                handleSuccess(event, data) {
                     event.preventDefault()

                     this.state.loading = true
                     this.update()

                     // adding thumbnail
                     data.thumbnail = this.state.current.thumbnail

                     // send to extensions database
                     if (data._id) {
                         Neutralino.extensions.dispatch('js.neutralino.pouchdb', 'pouchdb.apps.create', data)
                     } else {
                         Neutralino.extensions.dispatch('js.neutralino.pouchdb', 'pouchdb.apps.update', data)
                     }
                 },

                 /**
                  *
                  *
                  *  @param  object event
                  *
                  */
                 async handleSelectThumbnail(event)
                 {
                     const entry = await Neutralino.os.showOpenDialog('', {
                         'multiSelections': false,
                         'defaultPath': '/home/',
                         'filters': [{
                             'name': 'Images',
                             'extensions': ['jpg', 'png', 'jpeg', 'webp', 'gif', 'md']
                         }]
                     })

                     // getting data
                     const data = await Neutralino.filesystem.readBinaryFile(entry[0])

                     // adding as blob
                     this.state.current.thumbnail = _arrayBufferToBase64(data)

                     this.update()
                 },

                 /**
                  *
                  *
                  *  @param  {object} media
                  *
                  */
                 toImage(media) {
                     return 'data:image/png;base64,' + media
                 },

                 reset() {
                     this.state.current = {

                     }
                 }
             }
         }

    </script>
</potato-apps-form>