// Copyright (c) 2019, Livio, Inc.

export default {
    props: {
        createJob: Function,
        createWebSocket: Function,
    },
    data: function () {
        return {
            genericJob: {
                id: '1',
                core: {
                    version: '5.1.3',
                    build: 'default'
                },
                hmi: {
                    type: 'generic',
                    version: 'minimal-0.6.1'
                }
            },
            jobText: '',
            manticoreResponse: null,
            responseTime: '',
            errorMessage: null            
        }
    },
    created: function () {
        this.jobText = JSON.stringify(this.genericJob, null, 2);
    },
    methods: {
        submitJob: function () {
            let job;
            try {
                job = JSON.parse(this.jobText);
                this.errorMessage = null;
            } catch(e) {
                this.errorMessage = e.message;
                this.manticoreResponse = null;
                return;
            }

            axios.post('/api/v2/job', job)
                .then((response) => {
                    this.manticoreResponse = response.data;
                    this.responseTime = new Date().toTimeString();
                    this.createJob(job.id, response.data.passcode, response.request.responseURL);
                    this.createWebSocket(job.id, response.data);
                })
                .catch((error) => {
                    console.log(error);
                    this.errorMessage = error.response.data;
                    this.manticoreResponse = null;
                });
        }
    },
    template: `
    <div class="action-container">
        <h2 class="action-title">Create Job</h2>
        <div v-if="errorMessage != null" class="error-container">
            <p class="action-text">Error: {{ errorMessage }}</p>
        </div>
        <label class="action-label">Job Object: </label>
        <textarea v-model="jobText" class="action-text-area"></textarea>
        <button v-on:click="submitJob" class="action-button">Create</button>
        <div v-if="manticoreResponse != null" class="response-container">
            <p class="action-text">Response [{{ responseTime }}] : {{ manticoreResponse }}</p>
        </div>
    </div>
    `,
};
@@ -280,13 +280,13 @@
 n: '
-5.1.3
+0.0.0
 ',%0A 
@@ -444,11 +444,11 @@
 l-0.
-6.1
+0.0
 '%0A  
@@ -649,32 +649,32 @@
 : function () %7B%0A
-
         this.job
@@ -722,16 +722,525 @@
 ll, 2);%0A
+        const data = this;%0A        axios.get('/api/v2/job')%0A            .then(response =%3E %7B%0A                const jobData = response.data;%0A                data.genericJob.core.version = jobData.core.versions%5B0%5D;%0A                data.genericJob.core.build = jobData.core.builds%5B0%5D;%0A                data.genericJob.hmi.type = jobData.hmis%5B0%5D.type;%0A                data.genericJob.hmi.version = jobData.hmis%5B0%5D.versions%5B0%5D;%0A                data.jobText = JSON.stringify(this.genericJob, null, 2);%0A            %7D)%0A
     %7D,%0A 

Generate the webpage job post object from the API