<template>

<section class="form-simple" >

      <mdb-container>

        <h3 class="my-2 text-center">&nbsp;</h3>

        <mdb-row name="master-row">

          <mdb-col md="8" offset="2" name="master-col">

            <mdb-card>

                <mdb-card-body>

                  <h4 class="text-center font-weight-bold pt-1 pb-3"><strong>Manage IC List</strong></h4>

​

                  <p>Select the IC from the dropdown or add a new IC to the IC list.</p>

                  <hr color="black"/>

​

                  <!--

                  <h4 v-show="errorExists == true" class="font-weight-bold pl-0 my-2 text-center danger-color-dark text-white"><strong>Validation Failed</strong></h4>

                  <hr v-show="errorExists == true"/>

                  -->

​

                  <h5 v-if="submissionCompleted == true" class="font-weight-bold pl-0 my-2 text-center success-color-dark text-white"><strong>Submission Completed Successfully</strong></h5>

​

                  <mdb-row name="ic-row1" class="my-0">

                    <mdb-col name="ic-col" class="my-0" md="6">

                        <label class="font-weight-bold my-0">Incident Commander</label>

                        <mdb-select class="my-0" ref="ic" name="ic" id="ic" v-model="ic_list" color="primary" @getValue="getICDetail($event)">

                        </mdb-select>

                    </mdb-col>

                  </mdb-row>

                  <mdb-row name="ic-row2" class="my-0">

                    <mdb-col name="ic-col1" class="my-0" md="5">

                        <label class="font-weight-bold my-0">Current Rating</label>

                        <mdb-select class="my-0" v-model="ic_types" color="primary">

                        </mdb-select>

                    </mdb-col>

                    <mdb-col name="ic-col3" class="my-0 text-right" md="1">

                        <label class="font-weight-bold my-0">Trainee</label>

                        <mdb-input type="checkbox" ref="trainee" id="trainee" class="my-0 align-bottom" v-model="ic_record.trainee" color="primary" @click.native="ic_record.trainee = !(ic_record.trainee != false)" filled/>

                    </mdb-col>

                  </mdb-row>

                  <mdb-row name="ic-row3" class="my-0">

                    <mdb-col name="ic-col2" class="my-0" md="6">

                        <label class="font-weight-bold my-0">CAPID</label>

                        <mdb-input type="text" ref="capid" class="my-0 align-bottom" v-model="ic_capid" color="primary"/>{{ ic_record }}

                    </mdb-col>

                  </mdb-row>

​

                  <mdb-btn v-show="submissionCompleted != true" size="sm" class="md-primary md-raised float-right" color="primary" rounded @click="addCapids" ref="addCapids">Add CAP ID's</mdb-btn>

                  <mdb-btn v-show="submissionCompleted == true" size="sm" class="md-primary md-raised float-right" color="primary" rounded @click="goHome" ref="homeButton">Close</mdb-btn>

                  <mdb-btn v-show="submissionCompleted != true" size="sm" class="md-primary md-raised float-right" color="primary" rounded @click="goHome" ref="cancelButton">Cancel</mdb-btn>

​

                </mdb-card-body>

            </mdb-card>

          </mdb-col>

        </mdb-row>

      </mdb-container>

  </section>

</template>  

​

  import { mdbRow, mdbCol, mdbCard, mdbCardBody, mdbInput, mdbBtn, mdbIcon, mdbContainer, mdbSelect} from 'mdbvue';

  import {APIVars} from '../../src/config.js';

  import axios from 'axios';

​

  export default {

    name: 'ManageICListPage',

    components: {

      mdbRow,

      mdbCol,

      mdbCard,

      mdbCardBody,

      mdbInput,

      mdbBtn,

      mdbIcon,

      mdbContainer,

      mdbSelect

    },

    data() {

      return {

        ic_record: {

          alwaysavailable: null,

          area: '',

          areasort: null,

          capid: '',

          cellphone: null,

          email: '',

          homephone: null,

          ictype: '',

          ictypeweight: null,

          id: null,

          membersort: null,

          mentor: '',

          name: '',

          radio: '',

          sortpriority: null,

          trainee: false,

          workphone: null

        },

        ic_list: [],

        ic_types: [

          { text: '', value: null, disabled: true, selected: true },

          { text: 'IC1', value: 'IC1' },

          { text: 'IC2', value: 'IC2' },

          { text: 'IC3', value: 'IC3' }

        ],

        ic_trainee_status: false,

        ic_capid: '',

        submissionCompleted: false

      };

    },

    created() {

      // this.ic_record.alwaysavailable = null;

      // this.ic_record.area = '';

      // this.ic_record.areasort = null;

      // this.ic_record.capid = '';

      // this.ic_record.cellphone = null;

      // this.ic_record.email = '';

      // this.ic_record.homephone = null;

      // this.ic_record.ictype = '';

      // this.ic_record.ictypeweight = null;

      // this.ic_record.id = null;

      // this.ic_record.membersort = null;

      // this.ic_record.mentor = '';

      // this.ic_record.name = '';

      // this.ic_record.radio = '';

      // this.ic_record.sortpriority = null;

      // this.ic_record.trainee = false;

      // this.ic_record.workphone = null;

​

      if (this.$adal.isAuthenticated() == false)

      {

        //this.$router.replace('HomePage');

      }

      else

      {

        //Create Axious Config Entry which contains headers and responseType

        var config = {

          headers: { 'Content-Type': 'application/json' },

          responseType: 'text'

        };

​

        //Make the HTTP Post to validate the member

        axios.post(APIVars.AdminToolsAPIBaseUrl + APIVars.GetICListRoute + '?wing=' + this.$parent.Wing + '&basic=1', config)

          .then(response => {

            console.log(response.data);

            response.data.push({ text: '', value: null, disabled: true, selected: true });

            this.ic_list = response.data;

          })

          .catch(e => {

            // this.errors.push(e);

            // console.log(e);

            this.loading=0;

          });

      }

    },

​

    methods: {

      getICDetail (event) {

        //Create Axious Config Entry which contains headers and responseType

        var config = {

          headers: { 'Content-Type': 'application/json' },

          responseType: 'text'

        };

​

        //Make the HTTP Post to validate the member

        axios.post(APIVars.AdminToolsAPIBaseUrl + APIVars.GetICDetails + '?wing=' + this.$parent.Wing + '&capid=' + event, config)

          .then(response => {

            var json = response.data[0];

            console.log(json);

            this.ic_record = json;

            this.ic_capid = json.capid;

            this.selectICTypeOption(json.ictype);

            this.ic_trainee_status = json.trainee;

          })

          .catch(e => {

            // this.errors.push(e);

            // console.log(e);

          });

      },

      addCapids() {

        //

      },

      goHome () {

        this.$router.push({ name: "HomePage"});

      },

      selectICTypeOption(key) {

        this.ic_types.forEach(option => {

​

          if (option.value == key)

          {

            option.selected = true;

          }

          else

          {

            option.selected = false;

          }

​

        });

        this.ic_types.sort();

      },

      setTraineeStatus(event) {

        console.log(event);

      }

    }

  };

​

​