@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