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.

216 lines
7.5 KiB

3 years ago
<app-task-form>
3 years ago
<app-sidebar form-id="app-task-form" open={ state.isOpen } close={ () => { handleClose() } } loading={ state.isLoading }>
3 years ago
3 years ago
<!-- slot:title -->
3 years ago
<span slot="title">
<virtual if={ state.current.id }>
3 years ago
Edit Task { state.current.name }
</virtual>
<virtual if={ !state.current.id }>
3 years ago
New Task
</virtual>
</span>
3 years ago
<!-- slot:header -->
3 years ago
<form id="app-task-form" class="form" slot="form" onsubmit={ (event) => { state.isLoading = true; update(); state.validator.submit(event) } }>
3 years ago
<div class="field-group">
<label class="field-label">
name
3 years ago
<input class="field-text" name="name" type="text" value="{ state.current.name }" />
3 years ago
<field-error name="name"></field-error>
</label>
</div>
<div class="field-group">
<label class="field-label">
url
3 years ago
<input class="field-text" name="url" type="text" value="{ state.current.url }" />
3 years ago
<field-error name="url"></field-error>
</label>
</div>
<div class="field-group">
<label class="field-label">
requestHandlers
3 years ago
<select class="field-choice" name="requestHandler">
3 years ago
<option></option>
<option value="{ requestHandler.file }" each={ requestHandler in state.requestHandlers } selected={ action === state.current.requestHandler }>
{ requestHandler.name }
</option>
3 years ago
</select>
<field-error name="requestHandlers"></field-error>
3 years ago
</label>
</div>
<div class="field-group">
<label class="field-label">
actionHandlers
3 years ago
<select class="field-choice" name="action">
<option></option>
<option value="{ actionHandler.file }" each={ actionHandler in state.actionHandlers } selected={ action === state.current.actionHandler }>
{ actionHandler.name }
</option>
3 years ago
</select>
<field-error name="actionHandlers"></field-error>
3 years ago
</label>
</div>
3 years ago
<div class="field-group">
<label class="field-label">
options
<input type="text" name="options" class="field-text" value="{ JSON.stringify(state.current.options) }" />
<field-error name="options"></field-error>
</label>
</div>
<div class="field-group">
<label class="field-label">
timer
<input type="text" name="timer" class="field-text" value="{ state.current.timer }" />
<field-error name="timer"></field-error>
</label>
</div>
3 years ago
</form>
</app-sidebar>
<script>
3 years ago
import * as riot from 'riot'
3 years ago
import FormValidator from '@tiny-components/validator/src/formValidator.js'
3 years ago
// stores
3 years ago
import taskFormStore from './../stores/taskForm.js'
3 years ago
import notificationStore from './../stores/notification'
// mixins
3 years ago
import sidebar from './../mixins/sidebar.js'
3 years ago
3 years ago
import FieldError from '@tiny-components/validator/src/fieldError.riot'
3 years ago
riot.register('field-error', FieldError)
/**
*
*
*/
export default () => {
return {
...sidebar, // adding basic funtion for sidebar
state: {
requestHandlers: [],
validator: undefined,
current: {
name: '',
url: '',
requestHandlers: '',
actionHandlers: '',
options: {
},
timer: ''
}
},
/**
*
*
*/
onMounted()
{
// creating formValidator
this.state.validator = new FormValidator(this.$('.form'), {
'name': {
'presence': true
},
'url': {
'presence': true
},
'requestHandler': {
'presence': true
},
'action': {
'presence': true
},
'timer': {
}
})
// adding on success
this.state.validator.onSuccess((event, data) => {
this.handleSuccess(event, data)
})
// adding on success
this.state.validator.onError((event, data) => {
this.state.isLoading = false
// add notification
notificationStore.danger('Error! Check your input!')
this.update()
})
//
taskFormStore.on('open', (data) => {
this.state.isOpen = true
this.update()
})
this.getRequestHandlers()
this.getActionHandlers()
},
3 years ago
getRequestHandlers()
{
fetch('/api/v1/handler/request', {
'method': 'GET'
})
.then((response) => response.json())
.then((response) => {
this.state.requestHandlers = response.data
this.update()
})
3 years ago
},
getActionHandlers()
3 years ago
{
fetch('/api/v1/handler/action', {
'method': 'GET'
})
.then((response) => response.json())
.then((response) => {
this.state.actionHandlers = response.data
this.update()
})
3 years ago
},
/**
*
*
*
*/
handleSuccess(event, data)
{
event.preventDefault()
fetch('/api/v1/task', {
'method': 'POST',
'body': JSON.stringify(data)
})
.then((response) => response.json())
.then((response) => {
// stop loading
this.state.isLoading = false
// add id to current
this.state.current.id = response.data.id
this.update()
})
3 years ago
}
}
3 years ago
}
</script>
</app-task-form>