PlacesList.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>
    <div class="addItem poiList">
      <router-link to="/mapPOI">
        <button type="button" class="btn btn-primary">+</button>
      </router-link>
    </div>
    <div class="alert alert-info alert-dismissible fade show mt-2">
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      <span v-if="poiRequired">{{ $t("observationTimeSeries.placeslist.explanation") }}</span>
      <span v-else>{{ $t("placeslist.explanation") }}</span>
    </div>

    <div class="row form-group form-switch">
      <div class="col-12 form-check">
        <input type="checkbox" class="form-check-input" v-model="showOnlyUsersPOIs"  id="showOnlyUsersPOIs" @change="handleFiltersChanged">
        <label class="form-check-label" for="showOnlyUsersPOIs">Bare mine steder</label>
      </div>
    </div>

    <div class="row form-group mt-3">
      <div class="col-12">
        <input class="form-control" type="text" v-model.trim="textSearch" :placeholder="$t('places.search.label')"
               @input="handleFiltersChanged"></div>
    </div>
    <div class="row form-group mt-3">
      <div class="col-12">
        <ul v-for="poi in listPOI" v-bind:key="poi.pointOfInterestId" class="list-group list-group-flush">
          <li class="list-group-item list-group-item-action bg-light">
            <router-link class="list-group-item list-group-item-action bg-light" ref='linkMapPoi'
                         :to="{name:'MapPOI', params: {pointOfInterestId:poi.pointOfInterestId}}"
                         :class="{'text-danger':poi.isNew, 'text-primary':poi.toUpload, 'text-secondary':poi.isDeleted}">
              <div class="row">
                <div class="col-12 d-flex align-items-center">
                  <span v-if="poi.isDeleted" class="text-decoration-line-through">{{ poi.name }}</span>
                  <span v-else-if="poi.isOwnPOI" class="fw-bold">{{ poi.name }}</span>
                  <span v-else>{{ poi.name }}</span>
                </div>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <common-util ref="CommonUtil"/>
  </div>
</template>

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

export default {
  name: 'PlacesList',
  components: {CommonUtil},
  data() {
    return {
      CONST_URL_DOMAIN: '',
      listPOI: [],
      listPOIAll: [],
      textSearch: null,
      showOnlyUsersPOIs: true,
      poiRequired: false
    }
  },
  methods: {
    filterListPOI() {
      var userId = this.$root.sharedState.userId;
      var candidateList = [];//this.listPOIAll;
      if (this.showOnlyUsersPOIs) {
        candidateList = this.listPOIAll.filter((poi) => {
          return userId == poi.userId;
        })
      } else {
        candidateList = this.listPOIAll;
      }
      if (this.textSearch) {
        return candidateList.filter((poi) => {
          let poiName = poi.name;
          return poiName.toLowerCase().indexOf(this.textSearch.toLowerCase()) != -1;
        });
      }
      return candidateList;
    },
    fetchFromServer() {
      let strUUID = localStorage.getItem(CommonUtil.CONST_STORAGE_UUID);
      let jsonHeader = {Authorization: strUUID};

      fetch(this.CONST_URL_DOMAIN + CommonUtil.CONST_URL_USER_POI, {
        method: "GET",
        headers: jsonHeader,
      }).then((response) => response.json())
        .then((data) => {
          localStorage.setItem(CommonUtil.CONST_STORAGE_POI_LIST, JSON.stringify(data));
          //this.getObservationsFromStore();
        })

    },
    handleFiltersChanged() {
      this.listPOI = this.filterListPOI();
    },
    getPOIListFromStore() {
      const userId = this.$root.sharedState.userId;
      this.listPOIAll = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_POI_LIST));
      this.listPOIAll.forEach(function (poi) {
        poi.isOwnPOI = userId == poi.userId;
        poi.isNew = poi.pointOfInterestId < 0;
        if (poi.uploaded === false) {
          if (poi.deleted) {
            poi.isDeleted = true;
          } else if (poi.pointOfInterestId >= 0) {
            poi.toUpload = true;
          }
        }
      });

      // Sorting own POIs first, then alphabetic
      this.listPOIAll.sort((poi1, poi2) => {
        if (poi1.userId == userId && poi2.userId != userId) {
          return -1;
        }
        if (poi1.userId != userId && poi2.userId == userId) {
          return 1;
        }
        if (poi1.name.toLowerCase() < poi2.name.toLowerCase()) {
          return -1;
        }
        if (poi1.name.toLowerCase() > poi2.name.toLowerCase()) {
          return 1;
        }
        return 0;
      });
      this.listPOI = this.filterListPOI();
    }
  },

  mounted() {
    CommonUtil.setHeaderTitle(this.$i18n.t("placeslist.heading"));
    this.CONST_URL_DOMAIN = CommonUtil.CONST_URL_DOMAIN;
    this.poiRequired = this.$route.query.poiRequired;

    this.showOnlyUsersPOIs = true
    this.getPOIListFromStore();
    this.listPOI = this.filterListPOI();

    // Making it globally available, so that e.g. the Sync component can update the list
    // calling e.g. this.$root.sharedState.placesListComponent.fooBar();
    this.$root.sharedState.placesListComponent = this;
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (vm.$root.sharedState.uuid == "") {
        next("/Welcome");
      } else {
        next();
      }
    })
  }
}
</script>
<style scoped>
a {
  color: black;
  border-radius: 0 !important;
  border-width: 0px 0px 1px 0px !important;
}

.icon {
  color: #3d8052;
}
</style>