fix animations: remove some vue-slider-components

package.json

@@ -26,6 +26,7 @@
     "@math.gl/polygon": "^3.2.2",
     "@simwrapper/papaparse": "^5.3.2-2",
     "blob-util": "^2.0.2",
+    "buefy": "^0.9.29",
     "bulma": "^1.0.0",
     "convert-seconds": "^1.0.1",
     "crossfilter2": "^1.5.4",
@@ -35,7 +36,7 @@
     "font-awesome": "^4.7.0",
     "js-coroutines": "^2.4.6",
     "markdown-it": "^12.2.0",
-    "mathjs": "^10.0.0",
+    "mathjs": "^13.2.0",
     "medium-zoom": "^1.0.5",
     "micromatch": "^4.0.8",
     "moment": "^2.24.0",
@@ -56,7 +57,7 @@
     "vue-js-toggle-button": "^1.3.3",
     "vue-router": "^3.5.3",
     "vue-slide-bar": "^1.2.0",
-    "vue-slider-component": "^3.1.2",
+    "vue-slider-component": "^3.2.24",
     "vuera": "^0.2.7",
     "vuex": "^3.1.3",
     "yaml": "^1.7.2",

src/components/PlaybackControls.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
 .my-vue-component
-  vue-slider.slider(v-model="sliderValue"
+  b-slider.slider(v-model="sliderValue"
     v-bind="sliderOptions"
     @dragging="dragging"
-    @drag-start="dragStart"
-    @drag-end="dragEnd")
+    @dragstart="dragStart"
+    @dragend="dragEnd")
 
   .buttons
     .playpause(@click='toggleSimulation')
@@ -17,19 +17,36 @@
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
 
-import VueSlider from 'vue-slider-component'
-import * as timeConvert from 'convert-seconds'
+import timeConvert from 'convert-seconds'
 
 import store from '@/store'
 import EventBus from '@/EventBus.vue'
 
+const maxSliderVal = 100000.0
+
+const getSecondsFromSlider = (oneToTenThousand: number) => {
+  let seconds = (oneToTenThousand / maxSliderVal) * 86400
+  if (seconds === 86400) seconds = 86400 - 1
+  return seconds
+}
+
+const convertSecondsToClockTimeMinutes = (index: number) => {
+  const seconds = getSecondsFromSlider(index)
+
+  try {
+    const hms = timeConvert(seconds)
+    const minutes = ('00' + hms.minutes).slice(-2)
+    return `${hms.hours}:${minutes}`
+  } catch (e) {
+    return '00:00'
+  }
+}
+
 export default defineComponent({
   name: 'PlaybackControls',
-  components: { VueSlider },
+  components: {},
 
   data: () => {
-    const maxSliderVal = 100000.0
-
     return {
       state: store.state,
       sliderValue: 0,
@@ -42,24 +59,17 @@ export default defineComponent({
         duration: 0,
         lazy: true,
         tooltip: 'active',
+        size: 'is-large',
+        'tooltip-always': true,
         'tooltip-placement': 'top',
-      } as any,
+        'custom-formatter': convertSecondsToClockTimeMinutes,
+        // (v: number) => {
+        //   return convertSecondsToClockTimeMinutes(v)
+        // },
+      },
     }
   },
-
   methods: {
-    convertSecondsToClockTimeMinutes(index: number) {
-      const seconds = this.getSecondsFromSlider(index)
-
-      try {
-        const hms = timeConvert(seconds)
-        const minutes = ('00' + hms.minutes).slice(-2)
-        return `${hms.hours}:${minutes}`
-      } catch (e) {
-        return '00:00'
-      }
-    },
-
     onKeyPressed(ev: KeyboardEvent) {
       if (ev.code === 'Space') this.toggleSimulation()
     },
@@ -79,18 +89,12 @@ export default defineComponent({
     },
 
     dragging(value: any) {
-      EventBus.$emit(EventBus.DRAG, this.getSecondsFromSlider(value))
-    },
-
-    getSecondsFromSlider(oneToTenThousand: number) {
-      let seconds = (oneToTenThousand / this.maxSliderVal) * 86400
-      if (seconds === 86400) seconds = 86400 - 1
-      return seconds
+      EventBus.$emit(EventBus.DRAG, getSecondsFromSlider(value))
     },
   },
 
   mounted() {
-    this.sliderOptions['tooltip-formatter'] = this.convertSecondsToClockTimeMinutes
+    // this.sliderOptions['tooltip-formatter'] = convertSecondsToClockTimeMinutes
 
     EventBus.$on(EventBus.SIMULATION_PERCENT, (time: number) => {
       this.sliderValue = Math.floor(this.maxSliderVal * time)
@@ -106,7 +110,6 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-@use '~/vue-slider-component/theme/antd.css' as *;
 @use '@/styles.scss' as *;
 
 .my-vue-component {

src/main.ts

@@ -5,19 +5,23 @@ import App from '@/App.vue'
 import router from '@/router'
 import store from '@/store'
 
+import Buefy from 'buefy'
+import 'buefy/dist/buefy.min.css'
+
 Vue.config.productionTip = false
 
 Vue.use(VueI18n)
+Vue.use(Buefy)
 
 console.log('here')
 // locale: we only support EN and DE
 const locale = localStorage.getItem('default-locale')
   ? '' + localStorage.getItem('default-locale')
   : // @ts-ignore
-  // @ts-ignore
-  (navigator.language || navigator.userLanguage).startsWith('de')
-  ? 'de'
-  : 'en'
+    // @ts-ignore
+    (navigator.language || navigator.userLanguage).startsWith('de')
+    ? 'de'
+    : 'en'
 
 const i18n = new VueI18n({
   locale,

src/runs/v1/V1.vue

@@ -14,7 +14,6 @@ import type { PropType } from 'vue'
 import YAML from 'yaml'
 import Papa from '@simwrapper/papaparse'
 
-import { Component, Vue } from 'vue-property-decorator'
 import SectionViewer from './ChartSelector.vue'
 
 import md from 'markdown-it'

src/runs/v3/V3.vue

@@ -21,7 +21,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import type { PropType } from 'vue'
 
 import store from '@/store'
 import AnimationView from '@/runs/v3/AnimationView.vue'

src/runs/v6/ChartSelector.vue

@@ -56,7 +56,6 @@
 
 <script lang="ts">
 // ###########################################################################
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 import Papa from '@simwrapper/papaparse'
 import VuePlotly from '@/components/VuePlotly.vue'
 import ZipLoader from 'zip-loader'

src/shims-vue.d.ts

@@ -22,7 +22,6 @@ declare module 'react-toggle'
 declare module 'read-blob'
 declare module 'vue-slide-bar'
 declare module 'vue-table-component'
-declare module 'vue-slider-component'
 declare module 'vue-video-player'
 declare module 'vuera'
 declare module 'zip-loader'

src/views/Imprint.vue

@@ -16,13 +16,33 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
+import { defineComponent } from 'vue'
+
 import Colophon from '@/components/Colophon.vue'
 
-@Component({ components: { Colophon }, props: {} })
-export default class VueComponent extends Vue {
-  private imprint = require('@/assets/imprint.en.md')
-}
+import imprint from '@/assets/imprint.en.md?raw'
+
+import Markdown from 'markdown-it'
+
+const html = new Markdown({
+  html: true,
+  linkify: true,
+  typographer: true,
+}).render(imprint)
+
+export default defineComponent({
+  name: 'Imprint',
+  components: { Colophon },
+  props: {},
+
+  data() {
+    return {
+      imprint: html,
+    }
+  },
+
+  methods: {},
+})
 </script>
 
 <style scoped lang="scss">

src/views/MobilityPage.vue

@@ -124,7 +124,6 @@ const i18n = {
   },
 }
 
-import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
 import { Route } from 'vue-router'
 import MarkdownIt from 'markdown-it'
 import Papaparse from '@simwrapper/papaparse'

src/views/RCalculatorNew.vue

@@ -104,7 +104,6 @@ const i18n = {
   },
 }
 
-import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
 import YAML from 'yaml'
 import { Route } from 'vue-router'
 import MarkdownIt from 'markdown-it'

src/views/v1/HeatMap.vue

@@ -4,7 +4,6 @@ vue-plotly(v-if="!isResizing" :data="dataMatrix" :layout="layout" :options="opti
 </template>
 
 <script lang="ts">
-import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
 import VuePlotly from '@/components/VuePlotly.vue'
 import { log, transpose } from 'mathjs'
 

src/views/v1/MutationsPlot.vue

@@ -7,7 +7,6 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
 import VuePlotly from '@/components/VuePlotly.vue'
 import Papa from '@simwrapper/papaparse'
 import { PUBLIC_SVN } from '@/Globals'