#OstaniZdrav InfoCard

src/App.vue

@@ -52,6 +52,7 @@ export default {
   created() {
     this.$store.dispatch("stats/fetchData")
     this.$store.dispatch("patients/fetchData")
+    this.$store.dispatch("ostaniZdrav/fetchData")
 
     if (Object.keys(this.$route.query).length > 0 && this.$route.query.showDate) {
       let date = this.$route.query.showDate
@@ -62,6 +63,7 @@ export default {
   mounted() {
     this.$store.dispatch("stats/refreshDataEvery", 300)
     this.$store.dispatch("patients/refreshDataEvery", 300)
+    this.$store.dispatch("ostaniZdrav/refreshDataEvery", 300)
 
     if (this.$route.hash) {
       const checker = setInterval(() => {

src/components/cards/OstaniZdravCard.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="hp-card" v-if="loaded">
+    <div class="card-title d-flex justify-content-between">
+      <span>{{ title }}</span>
+    </div>
+    <div class="card-number">
+      <span>{{ lastValue }}</span>
+      <div class="card-percentage-diff no-change">
+        {{ percentageDiff | prefixDiff }}%
+      </div>
+    </div>
+    <div class="card-diff">
+      <span class="card-note">Danes že: {{ current }}</span>
+    </div>
+    <div class="data-time">
+      {{ $t('infocard.lastUpdated', { date: new Date(lastValueDate) }) }}
+    </div>
+  </div>
+  <div class="hp-card" v-else>
+    <div class="card-title">{{ title }}</div>
+    <font-awesome-icon icon="spinner" spin />
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from 'vuex'
+
+export default {
+  props: {
+    title: String,
+  },
+  computed: {
+    ...mapGetters('ostaniZdrav', ['data']),
+    ...mapState('ostaniZdrav', ['loaded']),
+    currentDate() {
+      return this.data[this.data.length - 1].date
+    },
+    lastValueDate() {
+      return this.data[this.data.length - 2].date
+    },
+    current() {
+      return this.data[this.data.length - 1].users_published
+    },
+    lastValue() {
+      return this.data[this.data.length - 2].users_published
+    },
+    dayBeforeLastValue() {
+      return this.data[this.data.length - 3].users_published
+    },
+    twoDaysBeforeLastValue() {
+      return this.data[this.data.length - 4].users_published
+    },
+    diff() {
+      return this.lastValue - this.dayBeforeLastValue
+    },
+    dayBeforeLastDiff() {
+      return this.dayBeforeLastValue - this.twoDaysBeforeLastValue
+    },
+    percentageDiff() {
+      return this.dayBeforeLastValue === 0
+        ? 0
+        : Math.round(this.diff / this.dayBeforeLastValue * 1000) / 10
+    },
+    iconClass() {
+      let className = ''
+      if (this.diff === 0) {
+        className += ' none'
+        return className
+      } else if (this.diff > 0) {
+        className += ' up'
+      } else {
+        className += ' down'
+      }
+      return className
+    },
+    diffClass() {
+      if (this.diff === 0) {
+        return 'no-change'
+      } else {
+        return this.diff > 0 ? 'good' : 'bad'
+      }
+    },
+  },
+}
+</script>
+
+<style></style>

src/locales/en.json

@@ -58,6 +58,7 @@
         "inHospital": "Hospitalized",
         "icu": "In ICU",
         "deceasedToDate": "Confirmed Deaths",
+        "ostaniZdrav": "#OstaniZdrav Cases",
         "lastUpdated": "{{ date, %a, %b %e }}"
     },
     "tables": {

src/locales/sl.json

@@ -58,6 +58,7 @@
         "inHospital": "Hospitalizirani",
         "icu": "V intenzivni enoti",
         "deceasedToDate": "Umrli",
+        "ostaniZdrav": "#OstaniZdrav primeri",
         "lastUpdated": "{{ date, %a., %e. %b. }}"
     },
     "tables": {

src/pages/StatsPage.vue

@@ -8,28 +8,29 @@
         </b-col>
       </b-row>
       <div class="cards-wrapper">
-        <!--  
+<!--  
         <Info-card
           :title="$t('infocard.tests')"
           field="tests.performed.today"
           good-trend="up"
           series-type="state"
         />
--->
         <Info-card
           :title="$t('infocard.confirmedToDate')"
           field="cases.confirmedToDate"
           name="cases.confirmedToDate"
           series-type="state"
         />
-        <!--  
         <Info-card
           :title="$t('infocard.recoveredToDate')"
           field="cases.recoveredToDate"
           good-trend="up"
           series-type="state"
         />
 -->
+        <OstaniZdrav-card
+          :title="$t('infocard.ostaniZdrav')"
+        />
         <Info-card
           :title="$t('infocard.active')"
           field="cases.active"
@@ -87,6 +88,7 @@
 <script>
 import { mapState } from 'vuex'
 import InfoCard from 'components/cards/InfoCard'
+import OstaniZdravCard from 'components/cards/OstaniZdravCard'
 import TimeStamp from 'components/TimeStamp'
 import Notice from 'components/Notice'
 import Youtube from 'components/Youtube'
@@ -98,6 +100,7 @@ export default {
   name: 'StatsPage',
   components: {
     InfoCard,
+    OstaniZdravCard,
     TimeStamp,
     Notice,
     Youtube,

src/store/index.js

@@ -1,34 +1,23 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import * as d3 from 'd3'
-import {
-  statsStore
-} from './stats.store'
-import {
-  hospitalsStore
-} from './hospitals.store'
-import {
-  patientsStore
-} from './patients.store'
-import {
-  municipalitiesStore
-} from './municipalities.store'
-import {
-  healthCentersStore
-} from './health-centers.store'
-import {
-  tableData
-} from './tables.store'
+import { statsStore } from './stats.store'
+import { hospitalsStore } from './hospitals.store'
+import { patientsStore } from './patients.store'
+import { municipalitiesStore } from './municipalities.store'
+import { healthCentersStore } from './health-centers.store'
+import { tableData } from './tables.store'
+import { ostaniZdravData } from './ostani-zdrav.store'
 
 Vue.use(Vuex)
 
 export function ApiEndpoint() {
-  if(window.location.search.indexOf('stage') > 0) {
+  if (window.location.search.indexOf('stage') > 0) {
     return 'https://api-stage.sledilnik.org'
   } else {
     return 'https://api.sledilnik.org'
   }
-} 
+}
 
 export function exportTime(x) {
   return new Date(x * 1000)
@@ -57,7 +46,8 @@ const store = new Vuex.Store({
     municipalities: municipalitiesStore,
     healthCenters: healthCentersStore,
     tableData,
+    ostaniZdrav: ostaniZdravData
   },
 })
 
-export default store
+export default store

src/store/ostani-zdrav.store.js

@@ -0,0 +1,41 @@
+import ApiService from '../services/api.service'
+
+const state = {
+  loaded: false,
+  data: [],
+}
+
+const getters = {
+  data: (state) => {
+    return state.data
+  },
+}
+
+const actions = {
+  fetchData: async ({ commit }, to) => {
+    const data = await ApiService.get(
+      'https://ostanizdrav.sledilnik.org/plots/data.json'
+    )
+    commit('setData', data.data)
+  },
+  refreshDataEvery: ({ dispatch }, seconds) => {
+    setInterval(() => {
+      dispatch('fetchData')
+    }, seconds * 1000)
+  },
+}
+
+const mutations = {
+  setData: (state, data) => {
+    state.data = data
+    state.loaded = true
+  },
+}
+
+export const ostaniZdravData = {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+}