Jobs setup

ui/resources/views/jobs/base.blade.php

@@ -0,0 +1,14 @@
+@extends('layout.base')
+
+@section('page_title')
+    Jobs
+    @hasSection('jobs_title')
+        -
+        @yield('jobs_title')
+    @endif
+@endsection
+
+@section('page_content')
+    <h1>Jobs</h1>
+    @yield('jobs_content')
+@endsection

ui/resources/views/jobs/list.blade.php

@@ -0,0 +1,165 @@
+@extends('jobs.base')
+
+@section('jobs_content')
+    <div id="jobs" class="ui basic segment"></div>
+@endsection
+
+@push('page_styles')
+    <link rel="stylesheet" href="//cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
+@endpush
+
+@push('page_scripts')
+    <script type="text/javascript" src="//cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+    <script type="text/javascript">
+        class Job
+        {
+            id
+            command
+            arguments
+            states
+
+            constructor(props)
+            {
+                this.id = props.id
+                this.command = props.command
+                this.arguments = props.arguments
+                this.states = props.states
+            }
+            lastState()
+            {
+                return this.states.sort((a, b) => {
+                    const d1 = new Date(a.date.date)
+                    const d2 = new Date(b.date.date)
+                    return d1 - d2
+                }).at(-1)
+            }
+            isPending()
+            {
+                return this.lastState().status === 1
+            }
+            draw()
+            {
+                return {
+                    row: () => {
+                        const status = this.isPending() ? 'yellow clock' : 'green check'
+                        const formatter = new Intl.DateTimeFormat('es-CL', {dateStyle: 'full', timeStyle: 'long'})
+                        const d = new Date(this.lastState().date.date)
+                        return $('<tr></tr>').attr('data-id', this.id).append(
+                            $('<td></td>').html(this.id)
+                        ).append(
+                            $('<td></td>').html(this.command)
+                        ).append(
+                            $('<td></td>').html(this.arguments)
+                        ).append(
+                            $('<td></td>').append(
+                                $('<i></i>').addClass('ui icon ' + status)
+                            )
+                        ).append(
+                            $('<td></td>').html(formatter.format(d))
+                        )
+                    }
+                }
+            }
+            execute()
+            {
+                const uri = '/job/' + this.id + '/execute'
+                Send.get(uri).then((response, status, jqXHR) => {
+                    console.debug(jqXHR.status)
+                    console.debug(response)
+                })
+            }
+        }
+        const jobs = {
+            id: '',
+            data: [],
+            get: function() {
+                return {
+                    jobs: () => {
+                        this.draw().loader()
+                        const uri = '/jobs'
+                        return Send.get(uri).then((response, status, jqXHR) => {
+                            if (parseInt(jqXHR.status/100) !== 2 || jqXHR.status === 204) {
+                                $(this.id).html('').append(
+                                    this.draw().empty()
+                                )
+                                return
+                            }
+                            if (response.jobs.length === 0) {
+                                $(this.id).html('').append(
+                                    this.draw().empty()
+                                )
+                                return
+                            }
+                            this.data = response.jobs.map(job => {
+                                return new Job(job)
+                            })
+                            this.draw().jobs()
+                        })
+                    }
+                }
+            },
+            draw: function() {
+                return {
+                    loader: () => {
+                        $(this.id).html('').append(
+                            $('<div></div>').addClass('ui segment').append(
+                                $('<p></p>').html('&nbsp;')
+                            ).append(
+                                $('<div></div>').addClass('ui active dimmer').append(
+                                    $('<div></div>').addClass('ui indeterminate elastic loader')
+                                )
+                            ).append(
+                                $('<p></p>').html('&nbsp;')
+                            )
+                        )
+                    },
+                    empty: () => {
+                        return $('<div></div>').addClass('ui message').html('No messages found.')
+                    },
+                    jobs: () => {
+                        $(this.id).html('')
+                        const table = $('<table></table>').addClass('ui table').attr('id', 'jobs_table')
+                        table.append(
+                            this.draw().head()
+                        ).append(
+                            this.draw().body()
+                        )
+                        $(this.id).append(table)
+                        const t = new DataTable('#jobs_table', {
+                            order: [[4, 'desc']]
+                        })
+                    },
+                    head: () => {
+                        return $('<thead></thead>').append(
+                            $('<tr></tr>').append(
+                                $('<th></th>').html('ID')
+                            ).append(
+                                $('<th></th>').html('Command')
+                            ).append(
+                                $('<th></th>').html('Arguments')
+                            ).append(
+                                $('<th></th>').html('Status')
+                            ).append(
+                                $('<th></th>').html('Date')
+                            )
+                        )
+                    },
+                    body: () => {
+                        const body = $('<tbody></tbody>')
+                        this.data.forEach(job => {
+                            body.append(job.draw().row())
+                        })
+                        return body
+                    }
+                }
+            },
+            setup: function() {
+                this.get().jobs()
+            }
+        }
+        $().ready(() => {
+            jobs.id = '#jobs'
+            jobs.setup()
+        })
+    </script>
+@endpush