Added json bar

app/javascript/vue/tasks/collecting_events/search_localities/app.vue

@@ -3,6 +3,14 @@
     <div class="flex-separate middle">
       <h1>Filter collecting events</h1>
       <ul class="context-menu">
+        <li>
+          <label>
+            <input
+              type="checkbox"
+              v-model="jsonBar">
+            Show JSON Request
+          </label>
+        </li>
         <li>
           <label>
             <input
@@ -51,12 +59,16 @@
         </li>
       </ul>
     </div>
+    <header-bar
+      v-if="jsonBar"
+      :jsonUrl="jsonUrl"/>
     <collecting-event
       ref="ce"
       :show-result-map="showMap"
       :show-result-list="showList"
       :show-filter="showFilter"
       :append="append"
+      @jsonUrl="jsonUrl = $event"
       @itemid="selectedItem=$event"
     />
   </div>
@@ -65,10 +77,12 @@
 
   import GetMacKey from 'helpers/getMacKey.js'
   import CollectingEvent from './components/collectingEvent.vue'
+  import HeaderBar from './components/headerBar'
 
   export default {
     components: {
       CollectingEvent,
+      HeaderBar
     },
     computed: {
       getMacKey() {
@@ -80,7 +94,9 @@
         append: false,
         showMap: false,
         showList: true,
-        showFilter: true
+        showFilter: true,
+        jsonBar: false,
+        jsonUrl: ''
       }
     },
     methods: {

app/javascript/vue/tasks/collecting_events/search_localities/components/ce_by_area.vue

@@ -73,6 +73,7 @@
         };
         this.$http.get('/collecting_events.json', { params: params }).then(response => {
           this.collectingEventList = response.body;
+          this.$emit('jsonUrl', response.url)
           if (this.collectingEventList) {
             this.$emit('collectingEventList', this.collectingEventList)
           }

app/javascript/vue/tasks/collecting_events/search_localities/components/ce_by_shape.vue

@@ -63,6 +63,7 @@
         let shapeText = this.shapes[this.shapes.length - 1];
         let params = {shape: shapeText};  // take only last shape pro tem
         this.$http.get('/collecting_events.json', {params: params}).then(response => {
+          this.$emit('jsonUrl', response.url)
           this.collectingEventList = response.body
           this.$emit('collectingEventList', this.collectingEventList);
           this.isLoading = false;

app/javascript/vue/tasks/collecting_events/search_localities/components/ce_filter.vue

@@ -179,6 +179,7 @@
         this.isLoading = true;
         this.$http.get('/collecting_events.json', { params: params }).then(response => {
           this.collectingEventList = response.body;
+          this.$emit('jsonUrl', response.url)
           if(this.collectingEventList) {
             this.$emit('collectingEventList', this.collectingEventList)
           }

app/javascript/vue/tasks/collecting_events/search_localities/components/ce_search.vue

@@ -145,6 +145,7 @@
         };
         this.$http.get('/collecting_events.json', {params: params}).then(response => {
           this.collectingEventList = response.body;
+          this.$emit('jsonUrl', response.url)
           if (this.collectingEventList) {
             this.$emit('collectingEventList', this.collectingEventList)
           }
@@ -158,6 +159,7 @@
         let params = {shape: shapeText};  // take only last shape pro tem
         this.$http.get('/collecting_events.json', {params: params}).then(response => {
           let foundEvents = response.body;
+          this.$emit('jsonUrl', response.url)
           if(foundEvents.length > 0) {this.collectingEventList = foundEvents;}
           this.$emit('collectingEventList', this.collectingEventList);
           this.isLoading = false;

app/javascript/vue/tasks/collecting_events/search_localities/components/ce_tag.vue

@@ -77,6 +77,7 @@
         this.isLoading = true;
         this.$http.get('/collecting_events', { params: params }).then(response => {
           this.collectingEventList = response.body;
+          this.$emit('jsonUrl', response.url)
           if(this.collectingEventList) {
             this.$emit('collectingEventList', this.collectingEventList);
           }

app/javascript/vue/tasks/collecting_events/search_localities/components/collectingEvent.vue

@@ -16,20 +16,27 @@
       />
       <template>
         <div v-if="view === TABS.attribute">
-          <ce-filter @collectingEventList="compileList($event)" />
+          <ce-filter
+            @jsonUrl="$emit('jsonUrl', $event)"
+            @collectingEventList="compileList($event)" />
         </div>
         <div v-else-if="view === TABS.namedAreaSearch">
-          <ce-by-area @collectingEventList="compileList($event)" />
+          <ce-by-area
+            @jsonUrl="$emit('jsonUrl', $event)"
+            @collectingEventList="compileList($event)" />
         </div>
         <div v-else-if="view === TABS.drawAreaSearch">
           <ce-by-shape
+            @jsonUrl="$emit('jsonUrl', $event)"
             @collectingEventList="compileList($event)"
             @searchShape="addSearchShape"
             ref="cebyshape"
           />
         </div>
         <div v-else-if="view === TABS.tag">
-          <ce-tag @collectingEventList="compileList($event)" />
+          <ce-tag
+            @jsonUrl="$emit('jsonUrl', $event)"
+            @collectingEventList="compileList($event)" />
         </div>
         <smart-list
           v-if="!Object.values(TABS).includes(view)"

app/javascript/vue/tasks/collecting_events/search_localities/components/headerBar.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="panel content separate-bottom">
+    <div class="flex-separate middle">
+      <span>
+        JSON Request: {{ jsonUrl }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    jsonUrl: {
+      type: String,
+      default: ''
+    }
+  }
+}
+
+</script>