Merge pull request #51 from bonham/bonham/issue48

protect from clicking 'all'

Author: bonham

client/src/components/FilteredTrackList.vue

@@ -10,7 +10,7 @@
             label="Spinning"
           />
         </span>
-        <span v-else>Loaded</span>
+        <span v-else>{{ headline }}</span>
       </div>
       <b-card
         ref="testref"
@@ -38,6 +38,7 @@
 <script>
 import { mapState, mapMutations } from 'vuex'
 import { BListGroup, BListGroupItem, BCard, BSpinner } from 'bootstrap-vue'
+import { TrackCollection } from '@/lib/Track.js'
 
 export default {
   name: 'FilteredTrackList',
@@ -57,6 +58,14 @@ export default {
       const l = this.loadedTracks
       l.sort((a, b) => (a.secondsSinceEpoch() - b.secondsSinceEpoch()))
       return l
+    },
+    sumDistance () {
+      const tc = new TrackCollection(this.loadedTracks)
+      return tc.distance()
+    },
+    headline () {
+      const dist = Math.round(this.sumDistance / 1000)
+      return `${this.loadedTracks.length} Tracks, ${dist} km`
     }
   },
   created () {

client/src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 
 // import { BootstrapVue } from 'bootstrap-vue'
-import { LayoutPlugin, NavbarPlugin, ButtonPlugin, LinkPlugin } from 'bootstrap-vue'
+import { LayoutPlugin, NavbarPlugin, ButtonPlugin, LinkPlugin, ModalPlugin } from 'bootstrap-vue'
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 
@@ -13,6 +13,7 @@ Vue.use(LayoutPlugin)
 Vue.use(NavbarPlugin)
 Vue.use(ButtonPlugin)
 Vue.use(LinkPlugin)
+Vue.use(ModalPlugin)
 
 new Vue({
   router,

client/src/views/SelectTracksPage.vue

@@ -31,6 +31,7 @@
         {{ year === 0 ? "No date" : year }}
       </b-button>
       <b-button
+        v-if="showAllButton"
         class="m-2"
         @click="loadAllTracks()"
       >
@@ -105,7 +106,8 @@ export default {
       currentOrientation: 'landscape',
       resizeObserver: null,
       years: [],
-      buttonsLoading: false
+      buttonsLoading: false,
+      showAllButton: false
     }
   },
   computed: {

client/src/views/TrackMultiEditPage.vue

@@ -14,11 +14,21 @@
     </div>
 
     <b-button
+      v-b-modal.my-modal
       class="mb-3"
-      @click="cleanAll"
     >
       Clean all
     </b-button>
+    <!-- The modal -->
+    <b-modal
+      id="my-modal"
+      ok-title="Proceed"
+      ok-variant="danger"
+      cancel-title="Abort"
+      @ok="cleanAll"
+    >
+      This can take very long and may have unpredicted results. Better try line by line first.
+    </b-modal>
     <b-table
       id="tracktable"
       striped
@@ -32,7 +42,7 @@
         <div
           v-if="data.item.loading"
         >
-          <b-skeleton />
+          <span class="cell-updating">Updating ..</span>
         </div>
         <div v-else>
           <editable-text
@@ -64,7 +74,8 @@
 import {
   BTable, BButton,
   BIconArrowLeft, BIconTrash,
-  BSkeleton, BContainer, BSpinner
+  BContainer, BSpinner,
+  BModal
 } from 'bootstrap-vue'
 import { getAllTracks, updateTrack, updateTrackById, deleteTrack } from '@/lib/trackServices.js'
 import TrackManagerNavBar from '@/components/TrackManagerNavBar.vue'
@@ -117,9 +128,9 @@ export default {
     BButton,
     BIconArrowLeft,
     BIconTrash,
-    BSkeleton,
     BContainer,
     BSpinner,
+    BModal,
     TrackManagerNavBar,
     EditableText
   },
@@ -223,5 +234,9 @@ export default {
 .flip-list-leave-to {
   opacity: 0;
 }
+.cell-updating {
+  opacity: 0.5;
+  font-style: italic;
+}
 
 </style>

client/tests/unit/TrackMultiEditPage.spec.js

@@ -3,6 +3,7 @@ import { render, fireEvent, waitForElementToBeRemoved } from '@testing-library/v
 import TrackMultiEditPage from '@/views/TrackMultiEditPage.vue'
 import ResizeObserver from './__mocks__/ResizeObserver'
 import { responseMockFunction } from './mockResponse'
+import { ModalPlugin, BModal } from 'bootstrap-vue'
 
 fetchMock.enableMocks()
 
@@ -17,14 +18,22 @@ describe('MultiEditPage', () => {
     fetch.mockResponse(responseMockFunction)
 
     const rresult = render(
-      TrackMultiEditPage, {
-        props: { sid: 'abcd1234' }
-      })
+      TrackMultiEditPage,
+      {
+        props: { sid: 'abcd1234' },
+        components: {
+          BModal
+        }
+      },
+      vue => vue.use(ModalPlugin)
+    )
     await rresult.findByText('Saupferchweg')
-    const button = await rresult.findByText('Clean all')
+    const button1 = await rresult.findByText('Clean all')
     expect(fetch.mock.calls.length).toEqual(1)
     expect(fetch.mock.calls[0][0]).toEqual('/api/tracks/getall/sid/abcd1234')
-    await fireEvent.click(button)
+    await fireEvent.click(button1)
+    const button2 = await rresult.findByText('Proceed')
+    await fireEvent.click(button2)
     await rresult.findByText('Muellerweg')
     expect(fetch.mock.calls.length).toEqual(2)
     const secondCallRequest = fetch.mock.calls[1][0]
@@ -38,9 +47,15 @@ describe('MultiEditPage', () => {
     fetch.mockResponse(responseMockFunction)
 
     const rresult = render(
-      TrackMultiEditPage, {
-        props: { sid: 'abcd1234' }
-      })
+      TrackMultiEditPage,
+      {
+        props: { sid: 'abcd1234' },
+        components: {
+          BModal
+        }
+      },
+      vue => vue.use(ModalPlugin)
+    )
     await rresult.findByText('Saupferchweg')
     const deleteButton = await rresult.findByLabelText('trash')
     expect(fetch.mock.calls.length).toEqual(1)