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/forms/apps.riot

287 lines
10 KiB

<potato-apps-form>
2 years ago
<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">
2 years ago
<!-- body -->
<form class="form" novalidate method="post" onsubmit={ (event) => ( state.validator.submit(event) ) }>
<div class="sidebar__body">
2 years ago
<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 }" />
2 years ago
<!-- 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 }>
2 years ago
<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>
2 years ago
</label>
<field-error name="tags[]"></field-error>
</div>
<!-- description -->
<div class="field-group">
<label class="field-label">
description
2 years ago
<textarea class="field-text" name="description" value="{ state.current.description ? state.current.description : '' }"></textarea>
2 years ago
</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">
2 years ago
<use xlink:href="symbol-defs.svg#icon-image" />
</svg>
</button>
</label>
<div class="field-media" if={ state.current.thumbnail }>
2 years ago
<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) } />
2 years ago
</div>
</div>
<field-error name="thumbnail"></field-error>
2 years ago
</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>
2 years ago
</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'
2 years ago
// validator
import FormValidator from '@tiny-components/validator/src/formValidator.js'
/**
* handler for apps
2 years ago
*
* @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
2 years ago
*
*/
export default () => {
return {
...sidebarMixin, // adding basic funtion for sidebar
/**
*
*
*/
onMounted() {
2 years ago
// 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()
2 years ago
})
// 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) => {
2 years ago
this.reset()
this.state.current = event.detail
tagsStore.trigger('update', this.state.current.tags)
// stop loading
this.state.loading = false
this.update()
})
2 years ago
},
/**
*
*
*
*/
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
2 years ago
this.update()
},
/**
*
*
* @param {object} event
*
*/
handleSuccess(event, data) {
event.preventDefault()
this.state.loading = true
this.update()
// adding thumbnail
data.thumbnail = this.state.current.thumbnail
2 years ago
// send to extensions database
2 years ago
if (data._id) {
Neutralino.extensions.dispatch('js.neutralino.pouchdb', 'pouchdb.apps.create', data)
} else {
Neutralino.extensions.dispatch('js.neutralino.pouchdb', 'pouchdb.apps.update', data)
}
2 years ago
},
/**
*
*
* @param object event
*
*/
2 years ago
async handleSelectThumbnail(event)
2 years ago
{
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
2 years ago
this.state.current.thumbnail = _arrayBufferToBase64(data)
2 years ago
this.update()
},
/**
*
*
* @param {object} media
*
2 years ago
*/
toImage(media) {
return 'data:image/png;base64,' + media
},
2 years ago
reset() {
this.state.current = {
2 years ago
}
2 years ago
}
}
}
</script>
</potato-apps-form>