{% extends "base.html" %} {% block content %} {% load static %} {% load wx_filters %}
<div class="srf-container">
  <div id="app" v-cloak>
    <v-app>

      <v-alert v-model="request_error" dismissible type="error">
        [[ request_error_message ]]
      </v-alert>

      <v-overlay :value="loading">
        <v-progress-circular
          indeterminate
          size="64"
        ></v-progress-circular>
      </v-overlay>

      <v-dialog v-model="dialog_new" width="50%">
        <v-card>
          <v-card-title v-if="is_new_equipment" class="text-h5">
            Creating a new equipment
          </v-card-title>
          <v-card-title v-if="!is_new_equipment" class="text-h5">
            Updating equipment
          </v-card-title>  

          <v-layout column>
            <v-layout ma-2>
              <v-flex mr-2>
                <v-autocomplete
                  :items="equipment_types"
                  item-text="name"
                  item-value="id"
                  v-model="equipment.equipment_type_id"
                  label="Type of the equipment"
                  required
                  hint="*Required"
                  persistent-hint
                  autocomplete="off"
                ></v-autocomplete>                
              </v-flex>
              <v-flex>
                <v-autocomplete
                  :items="manufacturers"
                  item-text="name"
                  item-value="id"
                  v-model="equipment.manufacturer_id"
                  label="Manufacturer"
                  required
                  hint="*Required"
                  persistent-hint
                  autocomplete="off"
                ></v-autocomplete>    
              </v-flex>
            </v-layout>

            <v-layout mx-2 mb-2>
              <v-flex mr-2>
                  <!-- models option -->
                  <v-autocomplete
                    :items="equipment_models"
                    item-text="name"
                    item-value="id"
                    v-model="equipment.equipment_model_id"
                    label="Model"
                    required
                    hint="*Required"
                    persistent-hint
                    autocomplete="off"
                  ></v-autocomplete>     
                </v-flex>
              <v-flex>
                <v-text-field
                  label="Serial Number"
                  v-model="equipment.serial_number"
                  required
                  hint="*Required"
                  persistent-hint   
                  single-line
                  type="text"
                ></v-text-field>
              </v-flex>
            </v-layout>

            <!-- add the location option which is the either the station or "Office" -->
            <v-layout ma-2>
              <v-flex mr-2>
                <v-autocomplete
                  :items="stations"
                  item-text="name"
                  item-value="id"
                  v-model="equipment.location_id"
                  label="Location of the equipment"
                  hint="*The default location is office"
                  persistent-hint
                  autocomplete="off"
                  disabled
                ></v-autocomplete>                
              </v-flex>
            </v-layout>

            <v-layout ma-2 mb-2>
              <v-flex mr-2>
                <v-autocomplete
                  :items="funding_sources"
                  item-text="name"
                  item-value="id"
                  v-model="equipment.funding_source_id"
                  label="Funding Source"
                  required
                  hint="*Required"
                  persistent-hint
                  autocomplete="off"
                ></v-autocomplete>                
              </v-flex>
              <v-flex>
                <v-menu
                  :close-on-content-click="false"
                  v-model="equipment.acquisition_date_menu"
                  transition="scale-transition"
                  offset-y
                  class="max-50"
                >
                  <template v-slot:activator="{ on }">
                    <v-text-field
                    v-model="equipment.acquisition_date"
                    label="Aquistion Date"
                    v-on="on"
                    required
                    hint="*Required"
                    persistent-hint
                    prepend-icon="event"
                    ></v-text-field>
                  </template>
                  <v-date-picker
                    v-model="equipment.acquisition_date"
                    @input="equipment.acquisition_date_menu = false"
                  ></v-date-picker>
                </v-menu>
              </v-flex>
            </v-layout>

            <v-layout mx-2 mb-2>
              <v-flex mr-2>
                <v-menu
                  :close-on-content-click="false"
                  v-model="equipment.first_deploy_date_menu"
                  transition="scale-transition"
                  offset-y
                  class="max-50"
                >
                  <template v-slot:activator="{ on }">
                    <v-text-field
                    v-model="equipment.first_deploy_date"
                    label="Date of First Deployment"
                    v-on="on"
                    clearable
                    prepend-icon="event"
                    ></v-text-field>
                  </template>
                  <v-date-picker
                    v-model="equipment.first_deploy_date"
                    @input="equipment.first_deploy_date_menu = false"
                  ></v-date-picker>
                </v-menu>
              </v-flex>
              <v-flex>
                <v-menu
                  :close-on-content-click="false"
                  v-model="equipment.decommission_date_menu"
                  transition="scale-transition"
                  offset-y
                  class="max-50"
                >
                  <template v-slot:activator="{ on }">
                    <v-text-field
                    v-model="equipment.decommission_date"
                    label="Date of Decomission"
                    v-on="on"
                    clearable
                    prepend-icon="event"
                    ></v-text-field>
                  </template>
                  <v-date-picker
                    v-model="equipment.decommission_date"
                    @input="equipment.decommission_date_menu = false"
                  ></v-date-picker>
                </v-menu>
              </v-flex>
            </v-layout>

            <v-layout mx-2 mb-2>
              <v-flex mr-2>
                <v-menu
                  :close-on-content-click="false"
                  v-model="equipment.last_calibration_date_menu"
                  transition="scale-transition"
                  offset-y
                  class="max-50"
                >
                  <template v-slot:activator="{ on }">
                    <v-text-field
                    v-model="equipment.last_calibration_date"
                    label="Date of Last Calibration"
                    v-on="on"
                    clearable
                    prepend-icon="event"
                    ></v-text-field>
                  </template>
                  <v-date-picker
                    v-model="equipment.last_calibration_date"
                    @input="equipment.last_calibration_date_menu = false"
                  ></v-date-picker>
                </v-menu>
              </v-flex>
              <v-flex>
                <v-menu
                  :close-on-content-click="false"
                  v-model="equipment.next_calibration_date_menu"
                  transition="scale-transition"
                  offset-y
                  class="max-50"
                >
                  <template v-slot:activator="{ on }">
                    <v-text-field
                    v-model="equipment.next_calibration_date"
                    label="Date of Next Calibration"
                    v-on="on"
                    clearable
                    prepend-icon="event"
                    ></v-text-field>
                  </template>
                  <v-date-picker
                    v-model="equipment.next_calibration_date"
                    @input="equipment.next_calibration_date_menu = false"
                  ></v-date-picker>
                </v-menu>
              </v-flex>
            </v-layout>

            <v-layout mx-2 mb-2>
              <v-flex mr-2>
                <v-menu
                  :close-on-content-click="false"
                  v-model="equipment.last_deploy_date_menu"
                  transition="scale-transition"
                  offset-y
                  class="max-50"
                >
                  <template v-slot:activator="{ on }">
                    <v-text-field
                    v-model="equipment.last_deploy_date"
                    label="Date of Last Calibration"
                    v-on="on"
                    clearable
                    prepend-icon="event"
                    ></v-text-field>
                  </template>
                  <v-date-picker
                    v-model="equipment.last_deploy_date"
                    @input="equipment.last_deploy_date_menu = false"
                  ></v-date-picker>
                </v-menu>
              </v-flex>
              <v-flex>
                <v-autocomplete
                  :items="equipment_classifications"
                  item-text="name"
                  item-value="id"
                  v-model="equipment.classification_id"
                  label="Classification of the equipment"
                  autocomplete="off"
                  clearable
                ></v-autocomplete>                           
              </v-flex>
            </v-layout>

          </v-layout>            
          </v-layout>

          <v-card-actions>
            <!-- cancel button -->
            <v-btn width="50%" color="error" @click="dialog_new = false">
              Cancel
            </v-btn>

            <!-- create equipment -->
            <v-btn
              v-if="is_new_equipment"
              width="50%"
              color="success"
              @click="dialog_new = false; createEquipment()"
              :disabled="$v.equipment.$invalid"
            >
              Create Equipment
            </v-btn>

            <!-- update equipment -->
            <v-btn
              v-if="!is_new_equipment"
              width="50%"
              color="success"
              @click="dialog_new = false; updateEquipment()"
              :disabled="$v.equipment.$invalid"
            >
              Update Equipment
            </v-btn>            
          </v-card-actions>
        </v-card>
      </v-dialog>

      <v-dialog v-model="dialog_del" width="50%">
        <v-card>
          <v-card-title class="text-h5">
            Do you want to delete this equipment?
          </v-card-title>
          <v-layout mx-6 mb-2 class="srf-display-2" column>
            <v-layout>
              Equipment Type: [[equipment.equipment_type]]
            </v-layout>
            <v-layout>
              Manufacturer: [[equipment.manufacturer]]
            </v-layout>                
            <v-layout>
              Model: [[equipment.equipment_model]]
            </v-layout>
            <v-layout>
              Serial Number: [[equipment.serial_number]]
            </v-layout>
          </v-layout>
          <v-card-actions>
            <v-btn
              width="50%"
              color="error"
              @click="dialog_del = false; deleteEquipment(equipment.equipment_id)"
            >
              Delete Equipment
            </v-btn>
            <v-btn width="50%" color="success" @click="dialog_del = false">
              Cancel
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

      <v-main fluid fill-height style="background: white">
        <v-layout column>
          <div class="srf-flex flex-row align-items-center justify-content-between srf-padding">
            <span class="srf-display-1 text-uppercase">Equipment Inventory</span
            ><br/>
          </div>
        </v-layout>

        <v-layout>
          <v-flex lg3 mr-5>
            <v-text-field
              v-model="search"
              label="General Search"
              append-icon="search">
            </v-text-field>
          </v-flex>

          {% if request|has_any_feature_permission:"equipment-inventory:write" %}
          <v-flex lg1 mt-5>
            <v-btn label color="primary" @click="getEquipmentData(); is_new_equipment=true; dialog_new = true">
              New Equipment
            </v-btn>       
          </v-flex>
          {% endif %}
        </v-layout>

        <v-layout>
          <v-flex lg12 mr-5>
            <v-data-table
              :headers="headers"
              :items="equipments"
              class="elevation-4"
              :search="search"
              :loading="loading"
            >

              <template #no-data>
                <div class="pa-4 text-center">
                  No equipment found
                </div>
              </template>

              <template v-slot:item.actions="{ item }">
                {% if request|has_any_feature_permission:"equipment-inventory:write" %}
                <!-- edit btn -->
                <v-tooltip bottom>
                  <template v-slot:activator="{ on }">
                    <v-btn 
                      icon 
                      v-on="on" 
                      @click="dialog_new=true; is_new_equipment=false; equipment=item"
                    >
                      <v-icon small>edit</v-icon>
                    </v-btn>

                  </template>
                  <span>Update Equipment</span>
                </v-tooltip>
                {% endif %}

                {% if request|has_any_feature_permission:"equipment-inventory:delete" %}
                <v-tooltip bottom>
                  <!-- delete btn -->
                  <template v-slot:activator="{ on }">
                    <v-btn 
                      icon
                      v-on="on"
                      @click="dialog_del=true; equipment=item"
                      > 
                      <v-icon color="error" small>
                        delete
                      </v-icon>
                    </v-btn>

                  </template>
                  <span>Delete Equipment</span>
                </v-tooltip>
                {% endif %}
              </template> 
              
            </v-data-table>
          </v-flex>            
        </v-layout>
      </v-main>
    </v-app>

    <!-- snack bar status -->
    <v-snackbar v-model="snackbar.show" :timeout="3000" :color="snackbar.color">
        [[ snackbar.message ]]
    </v-snackbar>
  </div>
</div>
{% endblock %} {% block localjavascript %}
  <script>
    Vue.use(window.vuelidate.default);
    const { required, minLength } = window.validators;
    new Vue({
      el: "#app",
      vuetify: new Vuetify(),
      delimiters: ["[[", "]]"],
      validations: {
        equipment: {
          equipment_type_id: { required },
          funding_source_id: { required },
          manufacturer_id: { required },
          equipment_model_id: { required },
          serial_number: { required },          
          acquisition_date: { required },                
        },
      },      
      data:{
        search: '',
        tester_tester: [],
        snackbar: { show: false, message: '', color: '' },
        loading: true,
        request_error_message: null,
        request_error: false,
        dialog_new: false,
        dialog_del: false,
        equipments: [],
        equipment_types: [],
        manufacturers: [],
        funding_sources: [],
        stations: [],
        equipment_models: [],
        equipment_classifications: [],
        is_new_equipment: true,
        equipment: {
          equipment_id: null,
          equipment_type: null,
          equipment_type_id: null,
          funding_source: null,
          funding_source_id: null,          
          manufacturer: null,
          manufacturer_id: null,
          equipment_model: null,
          equipment_model_id: null,
          serial_number: null,
          acquisition_date: moment().format('YYYY-MM-DD'),
          acquisition_date_menu: false,
          first_deploy_date: null,
          first_deploy_date_menu: false,
          last_calibration_date: null,
          last_calibration_date_menu: false,
          next_calibration_date: null,
          next_calibration_date_menu: false,
          decommission_date: null,
          decommission_date_menu: false,
          location: null,
          location_id: null,
          classification: null,
          classification_id: null,
          last_deploy_date: null,
          last_deploy_date_menu: false
        },
        headers: [
          { text: 'Equipment Type', align: 'left', value: 'equipment_type' },
          { text: 'Manufacturer', align: 'center',value: 'manufacturer' },
          { text: 'Model', align: 'center', value: 'equipment_model' },
          { text: 'Serial Number', align: 'center', value: 'serial_number' },
          { text: 'Acquired', align: 'center', value: 'acquisition_date' },
          { text: 'First Deployed', align: 'center', value: 'first_deploy_date' },
          { text: 'Last Deployed', align: 'center', value: 'last_deploy_date' },
          { text: 'Location', align: 'center', value: 'location' },
          { text: 'Classification', align: 'center', value: 'classification' },
          { text: 'Actions', align: 'center', value: 'actions', sortable: false },
        ],
      },
      computed: {
        shouldClearEquipment() {
          return !(this.dialog_new || this.dialog_del);
        }
      },
      watch: {
        shouldClearEquipment(newVal){
          if (newVal){
            this.equipment = {
              equipment_id: null,
              equipment_type: null,
              equipment_type_id: null,
              funding_source: null,
              funding_source_id: null,          
              manufacturer: null,
              manufacturer_id: null,
              equipment_model: null,
              equipment_model_id: null,
              serial_number: null,
              acquisition_date: moment().format('YYYY-MM-DD'),
              acquisition_date_menu: false,
              first_deploy_date: null,
              first_deploy_date_menu: false,
              last_calibration_date: null,
              last_calibration_date_menu: false,
              next_calibration_date: null,
              next_calibration_date_menu: false,
              decommission_date: null,
              decommission_date_menu: false,
              location: null,
              location_id: null,
              classification: null,
              classification_id: null,
              last_deploy_date: null,
              last_deploy_date_menu: false
            };            
          }
        }
      },
      methods: {
        getEquipmentData(){
          axios({
            method: 'get',
            url: `/wx/maintenance_reports/equipment_inventory/get/`,
          })          
          .then(
            
            res => {
              console.log(this.equipments);
              console.log(res.data['equipment']);
              this.equipments = res.data['equipment'];
              this.equipment_types = res.data['equipment_types'];
              this.manufacturers = res.data['manufacturers'];
              this.funding_sources = res.data['funding_sources'];
              this.stations = res.data['stations'];
              this.stations.unshift({"name":"Office", "id":null}); // append the default office item
              this.equipment_models = res.data['equipment_models'];
              this.equipment_classifications = res.data['equipment_classifications'];
            },
          ).catch(error => {console.log(error);}).finally(()=> {this.loading = false;});

        },
        createEquipment(){
          this.loading = true;
          axios({
            method: 'post',
            url: `/wx/maintenance_reports/equipment_inventory/create/`,
            params: {
              'equipment_type': this.equipment.equipment_type_id,
              'manufacturer': this.equipment.manufacturer_id,
              'funding_source': this.equipment.funding_source_id,
              'model': this.equipment.equipment_model_id,
              'serial_number': this.equipment.serial_number,
              'acquisition_date': this.equipment.acquisition_date,
              'first_deploy_date': this.equipment.first_deploy_date,
              'last_calibration_date': this.equipment.last_calibration_date,
              'next_calibration_date': this.equipment.next_calibration_date,
              'decommission_date': this.equipment.decommission_date,
              'location': this.equipment.location_id,
              'classification': this.equipment.classification_id,
              'last_deploy_date': this.equipment.last_deploy_date,
            },
          }) 
          .then(
            res => {  
              this.snackbar = { show: true, message: 'Equipment Created', color: 'green' };           
          })  
          .catch((error) => {
            console.log("error", error.response);
            this.snackbar = { show: true, message: `${error.response.data.message}`, color: 'red' };   
          })
          .finally(() => {
            this.getEquipmentData();
          });
        },
        updateEquipment(){
          this.loading = true;
          axios({
            method: 'post',
            url: `/wx/maintenance_reports/equipment_inventory/update/`,
            params: {
              'equipment_id': this.equipment.equipment_id,
              'equipment_type': this.equipment.equipment_type_id,
              'manufacturer': this.equipment.manufacturer_id,
              'funding_source': this.equipment.funding_source_id,
              'model': this.equipment.equipment_model_id,
              'serial_number': this.equipment.serial_number,
              'acquisition_date': this.equipment.acquisition_date,
              'first_deploy_date': this.equipment.first_deploy_date,
              'last_calibration_date': this.equipment.last_calibration_date,
              'next_calibration_date': this.equipment.next_calibration_date,
              'decommission_date': this.equipment.decommission_date,
              'location': this.equipment.location_id,
              'classification': this.equipment.classification_id,
              'last_deploy_date': this.equipment.last_deploy_date,
            },
          })
          .then(
            res => {      
              this.snackbar = { show: true, message: 'Equipment Updated', color: 'green' };            
          })
          .catch((error) => {
            console.log("error", error.response);
            this.snackbar = { show: true, message: `${error.response.data.message}`, color: 'red' };   
          })
          .finally(() => {
            this.getEquipmentData();
          });
        },
        deleteEquipment(equipment_id){
          this.loading = true;
          axios({
            method: 'post',
            url: `/wx/maintenance_reports/equipment_inventory/delete/`,
            params: {
              'equipment_id': equipment_id,
            },
          }) 
          .then(
            res => {
              this.getEquipmentData();
              this.snackbar = { show: true, message: 'Equipment Deleted', color: 'green' };     
          })  
          .catch((error) => {
            console.log("error", error.response);
            this.snackbar = { show: true, message: `${error.response.data.message}`, color: 'red' };   
          })
          .finally(() => {
            this.loading = false;
          });
        },
      },
      created() {
        axios.defaults.xsrfHeaderName = "X-CSRFToken";
        axios.defaults.xsrfCookieName = "csrftoken";        
        this.getEquipmentData();
      },
    });
  </script>

{% endblock %}