Merge pull request #137 from openearth/origin/Feature-GDV-435-Additio…

…n-of-stories-to-datasets-themes

Development branch for GDV-435- Addition of stories

package.json

@@ -71,4 +71,4 @@
       "git add"
     ]
   }
-}
+}

src/App.vue

@@ -1,63 +1,94 @@
 <template>
   <v-app>
-    <side-menu @toggle-tour="$tours.introduction.start()" @toggle-account="togglePanel('account')" @toggle-about="togglePanel('about')"  />
-    <v-main>
-      <router-view />
-      <about-panel v-if="panel === 'about'" @close-about="panel = false" />
-      <account-panel v-if="panel === 'account'" @close-account="panel = false"/>
-      <data-set-controls :datasets="datasetsInActiveTheme" />
-      <map-component />
-      <time-stamp v-show="validTimestamp && getActiveRasterLayer"/>
-      <v-tour :steps="tourSteps" :options="tourConfig" name="introduction"></v-tour>
-      <legal-dialog />
-    </v-main>
+    <v-app-bar
+        app
+        height="57px"
+        clipped-left
+        color="background"
+        flat
+      >
+      <v-spacer />
+        <v-stepper
+          class="stepper pa-0"
+          flat
+          non-linear
+        >
+          <v-stepper-header class="stepper-header">
+            <v-stepper-step
+              :color="storiesStepColor"
+              complete
+              editable
+              edit-icon="mdi-account-details"
+              step="1"
+              class="stepper-icon py-0"
+              @click="goToStories"
+            >
+              Stories
+            </v-stepper-step>
+            <v-divider/>
+            <v-stepper-step
+              class="py-0"
+              :color="dataStepColor"
+              complete
+              editable
+              edit-icon="mdi-database"
+              step="2"
+              @click="goToData"
+            >
+              Data layers
+            </v-stepper-step>
+          </v-stepper-header>
+        </v-stepper>
+        <v-spacer />
+      </v-app-bar>
+      <side-menu @toggle-tour="$tours.introduction.start()" @toggle-account="togglePanel('account')" @toggle-about="togglePanel('about')"  />
+      <v-main app>
+        <router-view />
+        <about-panel v-if="panel === 'about'" @close-about="panel = false" />
+        <account-panel v-if="panel === 'account'" @close-account="panel = false"/>
+        <legal-dialog />
+      </v-main>
   </v-app>
 </template>
 
 <script>
-import MapComponent from '@/components/MapComponent'
 import SideMenu from '@/components/SideMenu'
-import DataSetControls from '@/components/DataSetControls'
 import AboutPanel from '@/components/AboutPanel.vue'
 import AccountPanel from '@/components/AccountPanel.vue'
-import TimeStamp from '@/components/TimeStamp.vue'
 import auth from '@/components/auth'
 import LegalDialog from '@/components/LegalDialog.vue'
-import { tourConfig, tourSteps } from '@/plugins/vue-tour'
-import * as Cookies from 'tiny-cookie'
 
-import { mapMutations, mapActions, mapGetters } from 'vuex'
+import { mapMutations, mapActions } from 'vuex'
 
 export default {
   name: 'App',
   components: {
-    MapComponent,
     SideMenu,
-    DataSetControls,
     AboutPanel,
     AccountPanel,
-    TimeStamp,
     LegalDialog
   },
   data: () => ({
-    tourConfig,
-    tourSteps,
-    panel: false
+    panel: false,
+    page: 2
   }),
   mounted () {
-    this.showTour()
-    this.loadDatasets()
     this.getUser()
+    this.loadDatasets()
   },
   computed: {
-    ...mapGetters(['datasetsInActiveTheme', 'getActiveRasterLayer', 'activeTimestamp']),
-    validTimestamp () {
-      return ![null, '', 'Invalid date'].includes(this.activeTimestamp)
+    storiesStepColor () {
+      const { path } = this.$route
+      return path.includes('stories') ? 'blueDeltares' : 'transparent'
+    },
+    dataStepColor () {
+      const { path } = this.$route
+      return path.includes('data') ? 'blueDeltares' : 'transparent'
     }
   },
   methods: {
-    ...mapMutations(['setUser']),
     ...mapActions({ loadDatasets: 'loadDatasets' }),
+    ...mapMutations(['setUser']),
     getUser () {
       auth
         .getUser()
@@ -79,12 +110,23 @@ export default {
         this.panel = name
       }
     },
-    showTour (hideTour = Cookies.get('hideTour')) {
-      if (!hideTour) {
-        this.$tours.introduction.start()
-        Cookies.set('hideTour', false)
-      }
+    goToStories () {
+      this.$router.push({ name: 'stories' })
+    },
+    goToData () {
+      this.$router.push({ name: 'data' })
     }
   }
 }
 </script>
+<style lang="css" scoped>
+.stepper {
+  width: 400px;
+  height: 57px;
+}
+
+.stepper-header {
+  background-color: var(--v-background-base);
+  padding: 0px 0px 16px 2px;
+}
+</style>

src/components/DataSetControls.vue

@@ -199,14 +199,14 @@ export default {
         }
       }
       params.datasetIds = newParams
-      let path = `/${params.datasetIds}`
+      let path = `/data/${params.datasetIds}`
       if (_.has(params, 'locationId')) {
-        path = `${path}/${params.locationId}`
+        path = `/data/${params.datasetIds}/${params.locationId}`
       }
       if (newParams) {
         this.$router.push({ path, params })
       } else {
-        this.$router.push('/')
+        this.$router.push('/data')
       }
     },
     checkLayerType (id, type) {

src/components/MapComponent.vue

@@ -289,7 +289,7 @@ export default {
       })
       const params = this.$route.params
       params.locationId = _.head(locationIds)
-      this.$router.push({ path: `/${params.datasetIds}/${params.locationId}`, params })
+      this.$router.push({ path: `/data/${params.datasetIds}/${params.locationId}`, params })
     },
     toggleRasterLayer (event) {
       this.setActiveRasterLayerId(event)

src/components/NewsLayout.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-card
+    color="rgba(0, 0, 0, 0)"
+    rounded
+    outlined
+    class="stories-card"
+      >
+      <v-list
+        color="rgba(0, 0, 0, 0)"
+        >
+        <v-list-item
+          v-for="feed in feeds"
+          :key="feed.ID"
+        >
+
+          <v-list-item-content>
+            <v-list-item-title v-text="feed.title"/>
+            <v-list-item-subtitle class="text-subtitle-1" v-text="feed.source"/>
+          </v-list-item-content>
+
+          <v-list-item-action>
+            <v-list-item-action-text v-text="feed.date"/>
+            <v-btn icon :href="feed.URL" target="_blank"  rel="noopener">
+              <v-icon color="grey lighten-1">mdi-link</v-icon>
+            </v-btn>
+          </v-list-item-action>
+        </v-list-item>
+      </v-list>
+    </v-card>
+</template>
+<script>
+
+export default {
+  props: {
+    feeds: {
+      type: Array,
+      default: () => []
+    }
+  }
+
+}
+</script>
+<style>
+
+.stories-card {
+  border-color: white !important;
+  margin-bottom: 10px;
+}
+</style>

src/components/SideMenu.vue

@@ -18,7 +18,7 @@
           </v-list-item-content>
         </v-list-item>
         <v-divider></v-divider>
-        <v-list-item-group color="primary" active-class="active-theme">
+        <v-list-item-group color="primary" active-class="active-theme" v-if="dataRoute">
           <v-list-item
             v-for="item in getThemes"
             :key="item"
@@ -80,7 +80,11 @@ export default {
     CustomIcon
   },
   computed: {
-    ...mapGetters(['getThemes', 'getActiveTheme'])
+    ...mapGetters(['getThemes', 'getActiveTheme']),
+    dataRoute () {
+      const { path } = this.$route
+      return !!path.includes('data')
+    }
   },
   data () {
     return {

src/components/StoriesLayout.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-card
+    color="rgba(0, 0, 0, 0)"
+    rounded
+    outlined
+    class="stories-card"
+      >
+      <v-card-title>
+        <custom-icon :name="theme" iconFolder="themes" class="ma-2"/>
+        <span>{{ theme }}</span>
+      </v-card-title>
+      <v-list
+        color="rgba(0, 0, 0, 0)"
+        >
+        <v-list-item
+          v-for="story in stories"
+          :key="story.ID"
+        >
+          <v-list-item-avatar size="80">
+            <v-img :src="story.icon"></v-img>
+          </v-list-item-avatar>
+
+          <v-list-item-content>
+            <v-list-item-title v-text="story.title"></v-list-item-title>
+          </v-list-item-content>
+
+          <v-list-item-action>
+            <v-btn icon :href="story.URL" target="_blank" rel="noopener">
+              <v-icon color="grey lighten-1">mdi-link</v-icon>
+            </v-btn>
+          </v-list-item-action>
+        </v-list-item>
+      </v-list>
+    </v-card>
+</template>
+<script>
+import CustomIcon from '@/components/CustomIcon'
+
+export default {
+  props: {
+    stories: {
+      type: Array,
+      default: () => []
+    },
+    theme: {
+      type: String,
+      default: null
+    }
+  },
+  components: {
+    CustomIcon
+  }
+}
+</script>
+<style>
+
+.stories-card {
+  border-color: white !important;
+  margin-bottom: 10px;
+  border-width: thick !important;
+}
+
+</style>

src/lib/styling/colors.js

@@ -52,7 +52,8 @@ export const dark = {
   success: '#028200',
   turqoise: '#33ffc2',
   warning: '#f79502',
-  white100: '#ffffff'
+  white100: '#ffffff',
+  blueDeltares: '#0a28a3'
 }
 
 const context = {

src/router/index.js

@@ -3,15 +3,17 @@ import VueRouter from 'vue-router'
 import Silent from '../views/auth/silent'
 import Callback from '../views/auth/callback'
 import Logout from '../views/auth/logout'
-import DatasetIds from '../views/DatasetIds'
-import LocationId from '../views/datasetIds/LocationId'
-
+import DatasetIds from '../views/data/DatasetIds'
+import LocationId from '../views/data/datasetIds/LocationId'
+import Stories from '../views/Stories'
+import DataLayers from '../views/DataLayers'
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    name: 'home'
+    name: 'home',
+    redirect: '/data'
   },
   {
     path: '/auth/silent',
@@ -23,12 +25,21 @@ const routes = [
     path: '/auth/logout',
     component: Logout
   }, {
-    path: '/:datasetIds',
-    component: DatasetIds,
+    name: 'data',
+    path: '/data',
+    component: DataLayers,
     children: [{
-      path: ':locationId',
-      component: LocationId
+      path: ':datasetIds',
+      component: DatasetIds,
+      children: [{
+        path: ':locationId',
+        component: LocationId
+      }]
     }]
+  }, {
+    name: 'stories',
+    path: '/stories',
+    component: Stories
   }
 ]
 

src/store/index.js

@@ -2,12 +2,14 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import preferences from './preferences'
 import map from './map'
+import stories from './stories'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
     map,
+    stories,
     preferences
   }
 })