LLEdit.vue

<template>
  <l-modal :showing="showing" text="Stations" icon="edit" color="bg-orange-500" @close="close">
    <div class="w-full text-xs" v-if="editObj.id">
      <div class="w-full flex mb-4">
        <div class="w-1/2 mr-2">
          <b>Id</b>
          <br />
          <l-input
            placeholder="Enter unique Id"
            v-model="editObj.id"
            inputClass="text-2xs"
            :disabled="!this.isnew"
          ></l-input>
        </div>
        <div class="w-1/2">
          <b>Name</b>
          <br />
          <l-input placeholder="Enter 'Name' (text)" v-model="editObj.name" inputClass="text-2xs"></l-input>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/2 mr-2">
          <b>Begin Position</b>
          <br />
          <l-input
            placeholder="YYYY-MM-DDTHH:mm:ss+hh:00"
            v-model="editObj.begin_position"
            inputClass="text-2xs"
          ></l-input>
        </div>
        <div class="w-1/2">
          <b>End Position</b>
          <br />
          <l-input
            placeholder="YYYY-MM-DDTHH:mm:ss+hh:00 (optional)"
            v-model="editObj.end_position"
            inputClass="text-2xs"
          ></l-input>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/2 mr-2">
          <b>Network</b>
          <br />
          <l-select v-model="editObj.network_id" class="text-xs" :data="networks" :multiple="false">
            <l-option
              v-for="i in networks"
              :key="i.value"
              class="text-xs"
              :value="i.value"
              :label="i.label"
            />
          </l-select>
        </div>
        <div class="w-1/2">
          <b>City</b>
          <br />
          <l-input
            placeholder="Enter 'City' (optional) (text)"
            v-model="editObj.city"
            inputClass="text-2xs"
          ></l-input>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/2 mr-2">
          <b>National Station Code</b>
          <br />
          <l-input
            placeholder="Enter 'National Station Code' (optional) (text)"
            v-model="editObj.national_station_code"
            inputClass="text-2xs"
          ></l-input>
        </div>
        <div class="w-1/2">
          <b>Media Monitored</b>
          <br />
          <l-select
            v-model="editObj.media_monitored"
            class="text-xs"
            :data="mediavalues"
            :multiple="false"
          >
            <l-option
              v-for="i in mediavalues"
              :key="i.value"
              class="text-xs"
              :value="i.value"
              :label="i.label"
            />
          </l-select>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/2 mr-2">
          <b>Mobile</b>
          <br />
          <l-input
            placeholder="Enter 'Mobile' ('true' or 'false')"
            v-model="editObj.mobile"
            inputClass="text-2xs"
          ></l-input>
        </div>
        <div class="w-1/2">
          <b>Measurement Regime</b>
          <br />
          <l-select
            v-model="editObj.measurement_regime"
            class="text-xs"
            :data="measurementregimes"
            :multiple="false"
          >
            <l-option
              v-for="i in measurementregimes"
              :key="i.value"
              class="text-xs"
              :value="i.value"
              :label="i.label"
            />
          </l-select>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/2 mr-2">
          <b>Area Classsification</b>
          <br />
          <l-select
            v-model="editObj.area_classification"
            class="text-xs"
            :data="areaclassifications"
            :multiple="false"
          >
            <l-option
              v-for="i in areaclassifications"
              :key="i.value"
              class="text-xs"
              :value="i.value"
              :label="i.label"
            />
          </l-select>
        </div>
        <div class="w-1/2">
          <b>Distance Junction</b>
          <br />
          <l-input
            placeholder="Enter 'Distance Junction' (optional) (whole number)"
            v-model="editObj.distance_junction"
            inputClass="text-2xs"
          ></l-input>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/2 mr-2">
          <b>Traffic Volume</b>
          <br />
          <l-input
            placeholder="Enter 'Traffic Volume' (optional) (whole number)"
            v-model="editObj.traffic_volume"
            inputClass="text-2xs"
          ></l-input>
        </div>
        <div class="w-1/2">
          <b>Heavy Duty Fraction</b>
          <br />
          <l-input
            placeholder="Enter 'Heavy Duty Fraction' (optional) (decimal number)"
            v-model="editObj.heavy_duty_fraction"
            inputClass="text-2xs"
          ></l-input>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/2 mr-2">
          <b>Street Width</b>
          <br />
          <l-input
            placeholder="Enter 'Street Width' (optional) (whole number)"
            v-model="editObj.street_width"
            inputClass="text-2xs"
          ></l-input>
        </div>
        <div class="w-1/2">
          <b>Height Facades</b>
          <br />
          <l-input
            placeholder="Enter 'Height Facades' (optional) (whole number)"
            v-model="editObj.height_facades"
            inputClass="text-2xs"
          ></l-input>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/2 mr-2">
          <b>Longitude</b>
          <br />
          <l-input
            placeholder="Enter 'Longitude' (decimal number)"
            v-model="editObj.longitude"
            inputClass="text-2xs"
          ></l-input>
        </div>
        <div class="w-1/2">
          <b>Latitude</b>
          <br />
          <l-input
            placeholder="Enter 'Latitude' (decimal number)"
            v-model="editObj.latitude"
            inputClass="text-2xs"
          ></l-input>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/2 mr-2">
          <b>Altitude</b>
          <br />
          <l-input
            placeholder="Enter 'Altitude' (decimal number)"
            v-model="editObj.altitude"
            inputClass="text-2xs"
          ></l-input>
        </div>
        <div class="w-1/2">
          <b>Epsg</b>
          <br />
          <l-input
            placeholder="Enter 'Epsg' (whole number)"
            v-model="editObj.epsg"
            inputClass="text-2xs"
          ></l-input>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/2 mr-2">
          <b>Municipality</b>
          <br />
          <l-input
            placeholder="Enter 'Municipality' (optional) (text)"
            v-model="editObj.municipality"
            inputClass="text-2xs"
          ></l-input>
        </div>
        <div class="w-1/2">
          <b>Eoi Code</b>
          <br />
          <l-input
            placeholder="Enter 'Eoi Code' (text)"
            v-model="editObj.eoi_code"
            inputClass="text-2xs"
          ></l-input>
        </div>
      </div>
      <div class="flex w-full justify-between">
        <l-button type="success" @click="onSave">Save changes</l-button>
        <l-button type="danger" @click="close">Cancel</l-button>
      </div>
    </div>
  </l-modal>
</template>

<script>
import LModal from "@/components/LModal";
import { LInput, LButton, LSelect, LOption, LRadio } from "@/components/forms";
import StationsService from "./stations.service";

export default {
  name: "LLEdit",
  props: [
    "showing",
    "stations",
    "mediavalues",
    "measurementregimes",
    "areaclassifications",
    "networks",
    "selected",
    "isnew"
  ],
  components: {
    LModal,
    LInput,
    LButton,
    LSelect,
    LOption,
    LRadio
  },
  mounted() {
    console.log(this.$el);
  },
  data() {
    return {
      mobiles: [
        { value: true, label: "true" },
        { value: false, label: "false" }
      ]
    };
  },
  computed: {
    editObj: function() {
      return Object.assign({}, this.selected);
      // debugger;
    }
  },
  methods: {
    close() {
      this.$emit("close");
    },
    onSave() {
      // debugger;
      const mv = this.mediavalues.find(
        r => r.value == this.editObj.media_monitored
      );
      this.editObj.media_monitored_name = mv.value;

      const mr = this.measurementregimes.find(
        r => r.value == this.editObj.measurement_regime
      );
      this.editObj.measurement_regime = mr.value;

      const ac = this.areaclassifications.find(
        r => r.value == this.editObj.area_classification
      );
      this.editObj.area_classification = ac.value;

      const n = this.networks.find(r => r.value == this.editObj.network_id);
      this.editObj.networks = n.value;

      this.$emit("save", this.editObj);
      this.close();
    },
    boolValues() {
      return [{ value: true, label: true }, { value: false, label: false }];
    }
  }
};
</script>