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.

120 lines
3.2 KiB

3 years ago
<app-tasks>
<div class="tasks">
<table class="table table--stripped">
<thead>
<tr>
<th class="table__th">
name
</th>
<th class="table__th">
url
</th>
<th class="table__th">
requestHandler
</th>
<th class="table__th">
actions
</th>
<th class="table__th">
cron
</th>
<th class="table__th"></th>
<tr>
</thead>
<tbody>
<tr if={ state.tasks.length > 0 } each={ task in state.tasks }>
<td class="table__td">
{ task.name }
</td>
<td class="table__td">
{ task.url }
</td>
<td class="table__td">
{ task.requestHandler }
</td>
<td class="table__td">
<virtual each={ action in task.actions }>
<span>
{ action.className }
</span>
<span if={ actions.options }>
{ JSON.stringify(action.options) }
</span>
</virtual>
</td>
<td class="table__td">
{ task.cron }
</td>
<td class="table__td">
<button class="button" onclick={ (event) => { handleEdit(event, task) } }>
Edit
</button>
<button class="button" onclick={ (event) => { handleDelete(event, task) } }>
Delete
</button>
</td>
</tr>
<tr if={ state.tasks.length === 0 }>
<td class="table__td center" colspan="6">
Nothing found
</td>
</tr>
</tbody>
</table>
</div>
<script>
/**
*
*
*
*/
export default
{
state: {
tasks: []
},
/**
*
*
*/
onMounted()
{
this.getTasks()
},
/**
*
*
*/
getTasks()
{
fetch('/api/task', (response) => {
this.state.tasks = response.data
})
},
/**
*
*
*/
handleDelete(event, action)
{
},
/**
*
*
*/
handleEdit(event, action)
{
}
}
</script>
</app-tasks>