Visibility.vue

<!--

  Copyright (c) 2022 NIBIO <http://www.nibio.no/>.

  This file is part of VIPSObservationApp.
  VIPSObservationApp is free software: you can redistribute it and/or modify
  it under the terms of the NIBIO Open Source License as published by
  NIBIO, either version 1 of the License, or (at your option) any
  later version.

  VIPSObservationApp is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  NIBIO Open Source License for more details.

  You should have received a copy of the NIBIO Open Source License
  along with VIPSObservationApp.  If not, see <http://www.nibio.no/licenses/>.

  Author: Bhabesh Bhabani Mukhopadhyay
  Author: Tor-Einar Skog <tor-einar.skog@nibio.no>
  Dated : 19-Aug-2021
-->

<template>
  <div class="form-floating mb-3" v-if="isMounted">
    <select id="visibility" class="form-select" v-model=visibilityId :disabled="disabled"
            v-on:change="selectVisibility($event)">
      <option v-for="privacy in visibilities" v-bind:value="privacy.value">{{ privacy.name }}</option>
    </select>
    <label for="visibility"> {{ this.$i18n.t("visibility.label.undefined") }}</label>
  </div>
</template>

<script>
import CommonUtil from '@/components/CommonUtil'

export default {
  props: ['locationIsPrivate', 'polygonService', 'disabled'],
  data() {
    return {
      isMounted: false,
      visibilities: [
        {name: this.$i18n.t("visibility.label.private"), value: 3},
        {name: this.$i18n.t("visibility.label.public"), value: 4},
      ],
      visibilityId: 'undefined'
    }

  },
  methods: {
    buildVisibilities() {
      let This = this;
      let polygons = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_VISIBILITY_POLYGON));
      polygons.forEach(polygonService => {
        let polygon = {};
        polygon.value = polygonService.polygonServiceId;
        polygon.name = this.$i18n.t("visibility.label.polygon." + polygonService.polygonServiceId);
        This.visibilities.push(polygon)
      });

      if (this.locationIsPrivate) {
        this.visibilityId = 3; // Private = 3 check data()
      } else {
        if (this.polygonService) {
          this.visibilityId = this.polygonService.polygonServiceId;
        } else {
          this.visibilityId = 4; // Public = 4 check data()
        }
      }
      this.isMounted = true;
    },
    selectVisibility(event) {
      let paramPrivate = false;
      let paramPolygonService = '';
      let polygons = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_VISIBILITY_POLYGON));
      let polygon = polygons.find(({polygonServiceId}) => polygonServiceId === parseInt(event.target.value));

      if (event.target.value) {
        switch (parseInt(event.target.value)) {
          case 1:
            paramPolygonService = polygon;
            break;
          case 2:
            paramPolygonService = polygon;
            break;
          case 3:
            paramPrivate = true;
            break;
          case 4:
            break;
          default:
            CommonUtil.logInfo('Selected option is beyond the range');
        }

      }
      this.$emit('visibilityMapAction', paramPrivate, paramPolygonService);
    },
  },
  mounted() {
    this.buildVisibilities();
  }

}
</script>