diff --git a/src/components/feature/FeatureListTable.vue b/src/components/feature/FeatureListTable.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dfceb57bba93bb4dfc7f3adfa4357cddf209ce01
--- /dev/null
+++ b/src/components/feature/FeatureListTable.vue
@@ -0,0 +1,463 @@
+
+<template>
+ <div data-tab="list" class="dataTables_wrapper no-footer">
+ <table id="table-features" class="ui compact table">
+ <thead>
+ <tr>
+ <th class="center"></th>
+
+ <th class="center">
+ Statut
+ <i
+ :class="{
+ down: isSortedAsc('statut'),
+ up: isSortedDesc('statut'),
+ }"
+ class="icon sort"
+ @click="changeSort('statut')"
+ />
+ </th>
+ <th class="center">
+ Type
+ <i
+ :class="{ down: isSortedAsc('type'), up: isSortedDesc('type') }"
+ class="icon sort"
+ @click="changeSort('type')"
+ />
+ </th>
+ <th class="center">
+ Nom
+ <i
+ :class="{ down: isSortedAsc('nom'), up: isSortedDesc('nom') }"
+ class="icon sort"
+ @click="changeSort('nom')"
+ />
+ </th>
+ <th class="center">
+ Dernière modification
+ <i
+ :class="{
+ down: isSortedAsc('updated_on'),
+ up: isSortedDesc('updated_on'),
+ }"
+ class="icon sort"
+ @click="changeSort('updated_on')"
+ />
+ </th>
+ <th class="center" v-if="user">
+ Auteur
+ <i
+ :class="{
+ down: isSortedAsc('display_creator'),
+ up: isSortedDesc('display_creator'),
+ }"
+ class="icon sort"
+ @click="changeSort('display_creator')"
+ />
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(feature, index) in paginatedFeatures" :key="index">
+ <td class="center">
+ <div class="ui checkbox">
+ <input
+ type="checkbox"
+ :id="feature.id"
+ :value="feature.id"
+ v-model="checkedFeatures"
+ :checked="checkedFeatures[feature.id]"
+ />
+ <label></label>
+ </div>
+ </td>
+
+ <td class="center">
+ <div
+ v-if="feature.properties.status.value === 'archived'"
+ data-tooltip="Archivé"
+ >
+ <i class="grey archive icon"></i>
+ </div>
+ <div
+ v-else-if="feature.properties.status.value === 'pending'"
+ data-tooltip="En attente de publication"
+ >
+ <i class="teal hourglass outline icon"></i>
+ </div>
+ <div
+ v-else-if="feature.properties.status.value === 'published'"
+ data-tooltip="Publié"
+ >
+ <i class="olive check icon"></i>
+ </div>
+ <div
+ v-else-if="feature.properties.status.value === 'draft'"
+ data-tooltip="Brouillon"
+ >
+ <i class="orange pencil alternate icon"></i>
+ </div>
+ </td>
+ <td class="center">
+ <router-link
+ :to="{
+ name: 'details-type-signalement',
+ params: {
+ feature_type_slug: feature.properties.feature_type.slug,
+ },
+ }"
+ >
+ {{ feature.properties.feature_type.title }}
+ </router-link>
+ </td>
+ <td class="center">
+ <router-link
+ :to="{
+ name: 'details-signalement',
+ params: {
+ slug_type_signal: feature.properties.feature_type.slug,
+ slug_signal: feature.properties.slug || feature.id,
+ },
+ }"
+ >{{ getFeatureDisplayName(feature) }}</router-link
+ >
+ </td>
+ <td class="center">
+ <!-- |date:'Ymd' -->
+ {{ feature.properties.updated_on }}
+ </td>
+ <td class="center" v-if="user">
+ {{ feature.properties.creator.username || " ---- " }}
+ </td>
+ </tr>
+ <tr v-if="filteredFeatures.length === 0" class="odd">
+ <td colspan="5" class="dataTables_empty" valign="top">
+ Aucune donnée disponible
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <div
+ class="dataTables_info"
+ id="table-features_info"
+ role="status"
+ aria-live="polite"
+ >
+ Affichage de l'élément {{ pagination.start + 1 }} Ã
+ {{ pagination.end + 1 }} sur {{ filteredFeatures.length }} éléments
+ </div>
+ <div
+ class="dataTables_paginate paging_simple_numbers"
+ id="table-features_paginate"
+ >
+ <a
+ @click="toPreviousPage"
+ class="paginate_button previous disabled"
+ aria-controls="table-features"
+ data-dt-idx="0"
+ tabindex="0"
+ id="table-features_previous"
+ >Précédent</a
+ >
+ <span>
+ <a
+ v-for="(page, index) in nbPages"
+ :key="'page' + index"
+ :class="[
+ 'paginate_button',
+ { current: page.value === pagination.currentPage },
+ ]"
+ aria-controls="table-features"
+ data-dt-idx="1"
+ tabindex="0"
+ >{{ page.value }}</a
+ >
+ </span>
+ <!-- // TODO : <span v-if="nbPages > 4" class="ellipsis">...</span> -->
+ <a
+ class="paginate_button next"
+ aria-controls="table-features"
+ data-dt-idx="7"
+ tabindex="0"
+ id="table-features_next"
+ @click="toNextPage"
+ >Suivant</a
+ >
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "FeatureListTable",
+
+ props: ["filteredFeatures", "user", "checkedFeatures"],
+
+ data() {
+ return {
+ pagination: {
+ currentPage: 1,
+ pagesize: 15,
+ start: 0,
+ end: 14,
+ },
+ sort: {
+ column: "",
+ ascending: true,
+ },
+ };
+ },
+
+ computed: {
+ paginatedFeatures() {
+ let filterdFeatures = [...this.filteredFeatures];
+ // Ajout du tri
+ if (this.sort.column != "") {
+ filterdFeatures = filterdFeatures.sort((a, b) => {
+ let aProp = this.getFeatureDisplayName(a);
+ let bProp = this.getFeatureDisplayName(b);
+ if (this.sort.column === "statut") {
+ aProp = a.properties.status.value;
+ bProp = b.properties.status.value;
+ } else if (this.sort.column === "type") {
+ aProp = a.properties.feature_type.title;
+ bProp = b.properties.feature_type.title;
+ } else if (this.sort.column === "updated_on") {
+ aProp = a.properties.updated_on;
+ bProp = b.properties.updated_on;
+ } else if (this.sort.column === "display_creator") {
+ aProp = a.properties.display_creator;
+ bProp = b.properties.display_creator;
+ }
+ //ascending
+ if (this.sort.ascending) {
+ if (aProp < bProp) {
+ return -1;
+ }
+ if (aProp > bProp) {
+ return 1;
+ }
+ return 0;
+ } else {
+ //descending
+ if (aProp < bProp) {
+ return 1;
+ }
+ if (aProp > bProp) {
+ return -1;
+ }
+ return 0;
+ }
+ });
+ }
+ return filterdFeatures.slice(this.pagination.start, this.pagination.end);
+ },
+ },
+
+ methods: {
+ getFeatureDisplayName(feature) {
+ return feature.properties.title || feature.id;
+ },
+
+ isSortedAsc(column) {
+ return this.sort.column === column && this.sort.ascending;
+ },
+ isSortedDesc(column) {
+ return this.sort.column === column && !this.sort.ascending;
+ },
+
+ changeSort(column) {
+ if (this.sort.column === column) {
+ //changer order
+ this.sort.ascending = !this.sort.ascending;
+ } else {
+ this.sort.column = column;
+ this.sort.ascending = true;
+ }
+ },
+
+ nbPages() {
+ let N = Math.round(
+ this.filteredFeatures.length / this.pagination.pagesize
+ );
+ let rest = Math.round(
+ this.filteredFeatures.length % this.pagination.pagesize
+ );
+ if (rest > 0) N++;
+ const arr = [...Array(N).keys()].map(function (x) {
+ ++x;
+ return {
+ index: x,
+ value: x,
+ };
+ });
+ return arr;
+ },
+
+ toPreviousPage() {
+ if (this.pagination.start > 0) {
+ this.pagination.start -= this.pagination.pagesize;
+ this.pagination.end -= this.pagination.pagesize;
+ this.pagination.currentPage -= 1;
+ }
+ },
+
+ toNextPage() {
+ if (this.pagination.end < this.filteredFeatures.length) {
+ this.pagination.start += this.pagination.pagesize;
+ this.pagination.end += this.pagination.pagesize;
+ this.pagination.currentPage += 1;
+ }
+ },
+ },
+};
+</script>
+
+<style scoped>
+/* datatables */
+.dataTables_wrapper {
+ position: relative;
+ clear: both;
+}
+.dataTables_wrapper .dataTables_length,
+.dataTables_wrapper .dataTables_filter,
+.dataTables_wrapper .dataTables_info,
+.dataTables_wrapper .dataTables_processing,
+.dataTables_wrapper .dataTables_paginate {
+ color: #333;
+}
+.dataTables_wrapper .dataTables_info {
+ clear: both;
+ float: left;
+ padding-top: 0.755em;
+}
+.dataTables_wrapper .dataTables_paginate {
+ float: right;
+ text-align: right;
+ padding-top: 0.25em;
+}
+.dataTables_wrapper .dataTables_paginate .paginate_button.current,
+.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
+ color: #333 !important;
+ border: 1px solid #979797;
+ background-color: white;
+ background: -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ color-stop(0%, #fff),
+ color-stop(100%, #dcdcdc)
+ );
+ background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);
+ background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);
+ background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);
+ background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%);
+ background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
+}
+.dataTables_wrapper .dataTables_paginate .paginate_button {
+ box-sizing: border-box;
+ display: inline-block;
+ min-width: 1.5em;
+ padding: 0.5em 1em;
+ margin-left: 2px;
+ text-align: center;
+ text-decoration: none !important;
+ cursor: pointer;
+ color: #333 !important;
+ border: 1px solid transparent;
+ border-radius: 2px;
+}
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
+ cursor: default;
+ color: #666 !important;
+ border: 1px solid transparent;
+ background: transparent;
+ box-shadow: none;
+}
+
+/*
+Max width before this PARTICULAR table gets nasty
+This query will take effect for any screen smaller than 760px
+and also iPads specifically.
+*/
+@media only screen and (max-width: 760px),
+ (min-device-width: 768px) and (max-device-width: 1024px) {
+ /* Force table to not be like tables anymore */
+ table,
+ thead,
+ tbody,
+ th,
+ td,
+ tr {
+ display: block;
+ }
+
+ /* Hide table headers (but not display: none;, for accessibility) */
+ thead tr {
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+ }
+
+ tr {
+ border: 1px solid #ccc;
+ }
+
+ td {
+ /* Behave like a "row" */
+ border: none;
+ border-bottom: 1px solid #eee;
+ position: relative;
+ padding-left: 50%;
+ }
+
+ td:before {
+ /* Now like a table header */
+ position: absolute;
+ /* Top/left values mimic padding */
+ /* top: 6px; */
+ left: 6px;
+ /* width: 45%; */
+ padding-right: 10px;
+ white-space: nowrap;
+ }
+
+ /*
+ Label the data
+ */
+ td:nth-of-type(1):before {
+ content: "";
+ }
+ td:nth-of-type(2):before {
+ content: "Statut";
+ }
+ td:nth-of-type(3):before {
+ content: "Type";
+ }
+ td:nth-of-type(4):before {
+ content: "Nom";
+ }
+ td:nth-of-type(5):before {
+ content: "Dernière modification";
+ }
+ td:nth-of-type(6):before {
+ content: "Auteur";
+ }
+
+ .center {
+ text-align: right !important;
+ }
+
+ #table-features {
+ margin-left: 1em;
+ width: calc(100% - 1em);
+ }
+
+ .ui.checkbox {
+ position: absolute;
+ left: -1.75em;
+ top: 5em;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 875f26881acfdaa661b329806197baa587022db8..17c1eecba368010a5a6b6b33f2b88abd675a9e8c 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -138,192 +138,13 @@
<div id="map"></div>
<SidebarLayers v-if="baseMaps && map" />
</div>
+ <FeatureListTable
+ v-show="!showMap"
+ :filteredFeatures="filteredFeatures"
+ :user="user"
+ :checkedFeatures.sync="checkedFeatures"
+ />
- <div v-show="!showMap" data-tab="list" class="dataTables_wrapper no-footer">
- <table id="table-features" class="ui compact table">
- <thead>
- <tr>
- <th class="center"></th>
-
- <th class="center">
- Statut
- <i
- :class="{
- down: isSortedAsc('statut'),
- up: isSortedDesc('statut'),
- }"
- class="icon sort"
- @click="changeSort('statut')"
- />
- </th>
- <th class="center">
- Type
- <i
- :class="{ down: isSortedAsc('type'), up: isSortedDesc('type') }"
- class="icon sort"
- @click="changeSort('type')"
- />
- </th>
- <th class="center">
- Nom
- <i
- :class="{ down: isSortedAsc('nom'), up: isSortedDesc('nom') }"
- class="icon sort"
- @click="changeSort('nom')"
- />
- </th>
- <th class="center">
- Dernière modification
- <i
- :class="{
- down: isSortedAsc('updated_on'),
- up: isSortedDesc('updated_on'),
- }"
- class="icon sort"
- @click="changeSort('updated_on')"
- />
- </th>
- <th class="center" v-if="user">
- Auteur
- <i
- :class="{
- down: isSortedAsc('display_creator'),
- up: isSortedDesc('display_creator'),
- }"
- class="icon sort"
- @click="changeSort('display_creator')"
- />
- </th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="(feature, index) in paginatedFeatures" :key="index">
- <td class="center">
- <div class="ui checkbox">
- <input
- type="checkbox"
- :id="feature.id"
- :value="feature.id"
- v-model="checkedFeatures"
- :checked="checkedFeatures[feature.id]"
- />
- <label></label>
- </div>
- </td>
-
- <td class="center">
- <div
- v-if="feature.properties.status.value === 'archived'"
- data-tooltip="Archivé"
- >
- <i class="grey archive icon"></i>
- </div>
- <div
- v-else-if="feature.properties.status.value === 'pending'"
- data-tooltip="En attente de publication"
- >
- <i class="teal hourglass outline icon"></i>
- </div>
- <div
- v-else-if="feature.properties.status.value === 'published'"
- data-tooltip="Publié"
- >
- <i class="olive check icon"></i>
- </div>
- <div
- v-else-if="feature.properties.status.value === 'draft'"
- data-tooltip="Brouillon"
- >
- <i class="orange pencil alternate icon"></i>
- </div>
- </td>
- <td class="center">
- <router-link
- :to="{
- name: 'details-type-signalement',
- params: {
- feature_type_slug: feature.properties.feature_type.slug,
- },
- }"
- >
- {{ feature.properties.feature_type.title }}
- </router-link>
- </td>
- <td class="center">
- <router-link
- :to="{
- name: 'details-signalement',
- params: {
- slug_type_signal: feature.properties.feature_type.slug,
- slug_signal: feature.properties.slug || feature.id,
- },
- }"
- >{{ getFeatureDisplayName(feature) }}</router-link
- >
- </td>
- <td class="center">
- <!-- |date:'Ymd' -->
- {{ feature.properties.updated_on }}
- </td>
- <td class="center" v-if="user">
- {{ feature.properties.creator.username || " ---- " }}
- </td>
- </tr>
- <tr v-if="filteredFeatures.length === 0" class="odd">
- <td colspan="5" class="dataTables_empty" valign="top">
- Aucune donnée disponible
- </td>
- </tr>
- </tbody>
- </table>
- <div
- class="dataTables_info"
- id="table-features_info"
- role="status"
- aria-live="polite"
- >
- Affichage de l'élément {{ pagination.start + 1 }} Ã
- {{ pagination.end + 1 }} sur {{ filteredFeatures.length }} éléments
- </div>
- <div
- class="dataTables_paginate paging_simple_numbers"
- id="table-features_paginate"
- >
- <a
- @click="toPreviousPage"
- class="paginate_button previous disabled"
- aria-controls="table-features"
- data-dt-idx="0"
- tabindex="0"
- id="table-features_previous"
- >Précédent</a
- >
- <span>
- <a
- v-for="(page, index) in nbPages"
- :key="'page' + index"
- :class="[
- 'paginate_button',
- { current: page.value === pagination.currentPage },
- ]"
- aria-controls="table-features"
- data-dt-idx="1"
- tabindex="0"
- >{{ page.value }}</a
- >
- </span>
- <!-- // TODO : <span v-if="nbPages > 4" class="ellipsis">...</span> -->
- <a
- class="paginate_button next"
- aria-controls="table-features"
- data-dt-idx="7"
- tabindex="0"
- id="table-features_next"
- @click="toNextPage"
- >Suivant</a
- >
- </div>
- </div>
<!-- MODAL ALL DELETE FEATURE TYPE -->
<div
v-if="modalAllDeleteOpen"
@@ -361,6 +182,7 @@
import { mapGetters, mapState } from "vuex";
import { mapUtil } from "@/assets/js/map-util.js";
import SidebarLayers from "@/components/map-layers/SidebarLayers";
+import FeatureListTable from "@/components/feature/FeatureListTable";
import Dropdown from "@/components/Dropdown.vue";
const axios = require("axios");
@@ -370,6 +192,7 @@ export default {
components: {
SidebarLayers,
Dropdown,
+ FeatureListTable,
},
data() {
@@ -407,16 +230,7 @@ export default {
},
title: null,
},
- pagination: {
- currentPage: 1,
- pagesize: 15,
- start: 0,
- end: 14,
- },
- sort: {
- column: "",
- ascending: true,
- },
+
geojsonFeatures: [],
featureLoading: false,
filterStatus: null,
@@ -441,24 +255,6 @@ export default {
return this.$store.state.map.basemaps;
},
- nbPages() {
- let N = Math.round(
- this.filteredFeatures.length / this.pagination.pagesize
- );
- let rest = Math.round(
- this.filteredFeatures.length % this.pagination.pagesize
- );
- if (rest > 0) N++;
- const arr = [...Array(N).keys()].map(function (x) {
- ++x;
- return {
- index: x,
- value: x,
- };
- });
- return arr;
- },
-
filteredFeatures() {
let results = this.geojsonFeatures;
if (this.filterType) {
@@ -484,50 +280,6 @@ export default {
}
return results;
},
-
- paginatedFeatures() {
- let filterdFeatures = [...this.filteredFeatures];
- // Ajout du tri
- if (this.sort.column != "") {
- filterdFeatures = filterdFeatures.sort((a, b) => {
- let aProp = this.getFeatureDisplayName(a);
- let bProp = this.getFeatureDisplayName(b);
- if (this.sort.column === "statut") {
- aProp = a.properties.status.value;
- bProp = b.properties.status.value;
- } else if (this.sort.column === "type") {
- aProp = a.properties.feature_type.title;
- bProp = b.properties.feature_type.title;
- } else if (this.sort.column === "updated_on") {
- aProp = a.properties.updated_on;
- bProp = b.properties.updated_on;
- } else if (this.sort.column === "display_creator") {
- aProp = a.properties.display_creator;
- bProp = b.properties.display_creator;
- }
- //ascending
- if (this.sort.ascending) {
- if (aProp < bProp) {
- return -1;
- }
- if (aProp > bProp) {
- return 1;
- }
- return 0;
- } else {
- //descending
- if (aProp < bProp) {
- return 1;
- }
- if (aProp > bProp) {
- return -1;
- }
- return 0;
- }
- });
- }
- return filterdFeatures.slice(this.pagination.start, this.pagination.end);
- },
},
methods: {
@@ -558,27 +310,6 @@ export default {
this.modalAllDelete();
},
- getFeatureDisplayName(feature) {
- return feature.properties.title || feature.id;
- },
-
- isSortedAsc(column) {
- return this.sort.column === column && this.sort.ascending;
- },
- isSortedDesc(column) {
- return this.sort.column === column && !this.sort.ascending;
- },
-
- changeSort(column) {
- if (this.sort.column === column) {
- //changer order
- this.sort.ascending = !this.sort.ascending;
- } else {
- this.sort.column = column;
- this.sort.ascending = true;
- }
- },
-
onFilterStatusChange(newvalue) {
this.filterStatus = null;
if (newvalue) {
@@ -607,20 +338,53 @@ export default {
}
},
- toPreviousPage() {
- if (this.pagination.start > 0) {
- this.pagination.start -= this.pagination.pagesize;
- this.pagination.end -= this.pagination.pagesize;
- this.pagination.currentPage -= 1;
- }
- },
+ initMap() {
+ this.zoom = this.$route.query.zoom || "";
+ this.lat = this.$route.query.lat || "";
+ this.lng = this.$route.query.lng || "";
+ var mapDefaultViewCenter =
+ this.$store.state.configuration.DEFAULT_MAP_VIEW.center;
+ var mapDefaultViewZoom =
+ this.$store.state.configuration.DEFAULT_MAP_VIEW.zoom;
+
+ this.map = mapUtil.createMap({
+ zoom: this.zoom,
+ lat: this.lat,
+ lng: this.lng,
+ mapDefaultViewCenter,
+ mapDefaultViewZoom,
+ });
+
+ document.addEventListener("change-layers-order", (event) => {
+ // Reverse is done because the first layer in order has to be added in the map in last.
+ // Slice is done because reverse() changes the original array, so we make a copy first
+ mapUtil.updateOrder(event.detail.layers.slice().reverse());
+ });
- toNextPage() {
- if (this.pagination.end < this.filteredFeatures.length) {
- this.pagination.start += this.pagination.pagesize;
- this.pagination.end += this.pagination.pagesize;
- this.pagination.currentPage += 1;
+ // --------- End sidebar events ----------
+ if (this.$store.state.map.geojsonFeatures) {
+ this.loadFeatures(this.$store.state.map.geojsonFeatures);
+ } else {
+ const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
+ this.featureLoading = true;
+ axios
+ .get(url)
+ .then((response) => {
+ this.loadFeatures(response.data.features);
+ this.featureLoading = false;
+ })
+ .catch((error) => {
+ this.featureLoading = false;
+ throw error;
+ });
}
+
+ setTimeout(
+ function () {
+ mapUtil.addGeocoders(this.$store.state.configuration);
+ }.bind(this),
+ 1000
+ );
},
loadFeatures(features) {
@@ -658,52 +422,7 @@ export default {
},
mounted() {
- this.zoom = this.$route.query.zoom || "";
- this.lat = this.$route.query.lat || "";
- this.lng = this.$route.query.lng || "";
- var mapDefaultViewCenter =
- this.$store.state.configuration.DEFAULT_MAP_VIEW.center;
- var mapDefaultViewZoom =
- this.$store.state.configuration.DEFAULT_MAP_VIEW.zoom;
-
- this.map = mapUtil.createMap({
- zoom: this.zoom,
- lat: this.lat,
- lng: this.lng,
- mapDefaultViewCenter,
- mapDefaultViewZoom,
- });
-
- document.addEventListener("change-layers-order", (event) => {
- // Reverse is done because the first layer in order has to be added in the map in last.
- // Slice is done because reverse() changes the original array, so we make a copy first
- mapUtil.updateOrder(event.detail.layers.slice().reverse());
- });
-
- // --------- End sidebar events ----------
- if (this.$store.state.map.geojsonFeatures) {
- this.loadFeatures(this.$store.state.map.geojsonFeatures);
- } else {
- const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
- this.featureLoading = true;
- axios
- .get(url)
- .then((response) => {
- this.loadFeatures(response.data.features);
- this.featureLoading = false;
- })
- .catch((error) => {
- this.featureLoading = false;
- throw error;
- });
- }
-
- setTimeout(
- function () {
- mapUtil.addGeocoders(this.$store.state.configuration);
- }.bind(this),
- 1000
- );
+ this.initMap();
},
};
</script>
@@ -778,151 +497,6 @@ export default {
width: 100%;
}
}
-/* datatables */
-.dataTables_wrapper {
- position: relative;
- clear: both;
-}
-.dataTables_wrapper .dataTables_length,
-.dataTables_wrapper .dataTables_filter,
-.dataTables_wrapper .dataTables_info,
-.dataTables_wrapper .dataTables_processing,
-.dataTables_wrapper .dataTables_paginate {
- color: #333;
-}
-.dataTables_wrapper .dataTables_info {
- clear: both;
- float: left;
- padding-top: 0.755em;
-}
-.dataTables_wrapper .dataTables_paginate {
- float: right;
- text-align: right;
- padding-top: 0.25em;
-}
-.dataTables_wrapper .dataTables_paginate .paginate_button.current,
-.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
- color: #333 !important;
- border: 1px solid #979797;
- background-color: white;
- background: -webkit-gradient(
- linear,
- left top,
- left bottom,
- color-stop(0%, #fff),
- color-stop(100%, #dcdcdc)
- );
- background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);
- background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);
- background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);
- background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%);
- background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
-}
-.dataTables_wrapper .dataTables_paginate .paginate_button {
- box-sizing: border-box;
- display: inline-block;
- min-width: 1.5em;
- padding: 0.5em 1em;
- margin-left: 2px;
- text-align: center;
- text-decoration: none !important;
- cursor: pointer;
- color: #333 !important;
- border: 1px solid transparent;
- border-radius: 2px;
-}
-.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
-.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
- cursor: default;
- color: #666 !important;
- border: 1px solid transparent;
- background: transparent;
- box-shadow: none;
-}
-/*
-Max width before this PARTICULAR table gets nasty
-This query will take effect for any screen smaller than 760px
-and also iPads specifically.
-*/
-@media only screen and (max-width: 760px),
- (min-device-width: 768px) and (max-device-width: 1024px) {
- /* Force table to not be like tables anymore */
- table,
- thead,
- tbody,
- th,
- td,
- tr {
- display: block;
- }
-
- /* Hide table headers (but not display: none;, for accessibility) */
- thead tr {
- position: absolute;
- top: -9999px;
- left: -9999px;
- }
-
- tr {
- border: 1px solid #ccc;
- }
-
- td {
- /* Behave like a "row" */
- border: none;
- border-bottom: 1px solid #eee;
- position: relative;
- padding-left: 50%;
- }
-
- td:before {
- /* Now like a table header */
- position: absolute;
- /* Top/left values mimic padding */
- /* top: 6px; */
- left: 6px;
- /* width: 45%; */
- padding-right: 10px;
- white-space: nowrap;
- }
-
- /*
- Label the data
- */
- td:nth-of-type(1):before {
- content: "";
- }
- td:nth-of-type(2):before {
- content: "Statut";
- }
- td:nth-of-type(3):before {
- content: "Type";
- }
- td:nth-of-type(4):before {
- content: "Nom";
- }
- td:nth-of-type(5):before {
- content: "Dernière modification";
- }
- td:nth-of-type(6):before {
- content: "Auteur";
- }
-
- .center {
- text-align: right !important;
- }
-
- #table-features {
- margin-left: 1em;
- width: calc(100% - 1em);
- }
-
- .ui.checkbox {
- position: absolute;
- left: -1.75em;
- top: 5em;
- }
-}
</style>