v2 HM Dashboard (#2)

* Initial Commit * Fixing TS issues * Updating gtag, Trying to fix CSS loader * Adding error message constant, Fixing redirects and loading new miner data, Adding redirect fix * Removing redirects * Updating README, Trying to fix redirects * Update _redirects * Update nuxt.config.js * Updating utilities to utils, Updating responsiveness, Removing redirects * Correcting overflow, Fixing css for hovering over favourite star * Correcting responsiveness * Update _hotspot.vue * Updating styling for toasts and spacing around title for hotspot * Fixing hotspot display * Fixing responsiveness, Fixing colors on mobile, Dividing sections up * Removing commented code * Adding to v2 documentation in README * Adding Rewards|Witnesses|Nearby|Location sections, Updating navbar, Updating interfaces, Updating styles/css of UI elements, Updating store and how data is logged * Updating tooltips, Updating dark mode loading overlay * Removing unused css, Adding additional margin to toast on mobile * Updating README content, Updating settings css, Updating message constants, Updating failed deletion of any cache * Updating margin for toast notifications on mobile * Updating scroll padding on mobile * Testing netlify badge * Updating README, Updating media queries, Removing unused option from navbar * Removing testing packages and utils, Updating README, Updating unused code, Updating settings button colors, Linting files * Fixing styling, Adding suggested/random hotspots to be searched for new user * Fixing TS errors * Testing mobile responsiveness * Testing mobile responsiveness x2 * Fixing mobile responsiveness, Updating settings buttons styles * Adjusting padding on mobile * Fixing section padding * Fixing bug
Mwpereira · Sep 11, 2021 · d6475dd · d6475dd
1 parent 9de341a
commit d6475dd
Show file tree

Hide file tree

Showing 30 changed files with 463 additions and 18,192 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/README.md b/README.md
@@ -7,9 +7,9 @@
 <p align="center">
   Minimalistic and modern user interface to display your HNT miner's data.
 </p>
-
 <hr/>
 
+
 HM Dashboard is a low resource and bandwidth alternative to [Helium Explorer](https://explorer.helium.com/).
 
 ## 🖥 APIs
@@ -18,9 +18,8 @@ HM Dashboard currently uses [Helium APIs](https://docs.helium.com/api/).
 
 ## 💥 Community Contribution
 
-This project is intended to receive community participation, if there's an optimizations, features, or fixes you have or can think of,
-feel free to open a pull request or create an issue 🙂
-
+This project is intended to receive community participation, if there's an optimizations, features, or fixes you have or
+can think of, feel free to open a pull request or create an issue 🙂
 
 ## 🗺 Roadmap
 
@@ -30,21 +29,25 @@ feel free to open a pull request or create an issue 🙂
 
 ### v1
 
+Release Date: September 9th, 2021
+
 - Initial release with Miner summary
 - Receive feedback from community and users
 
 ### v2
 
+Release Date: September 12th, 2021
+
 - Fix any bugs/errors
 - Add Settings
 - Add Witnesses section
 - Add Rewards section
-- Add CI with Github
-- Add Cypress testing for the UI
-- Add Jest testing for the API calls
 
 ### v3
 
+Release Date: TBA
+
+- Receive feedback from community and users
 - TBA
 
 ## 🛠 Build Setup

diff --git a/assets/json/hotspots.json b/assets/json/hotspots.json
@@ -0,0 +1,3 @@
+{
+  "miners": ["Unique Misty Tiger", "Fit Opal Koala", "Dizzy Ruby Stallion"]
+}
diff --git a/assets/scss/dark-mode.scss b/assets/scss/dark-mode.scss
@@ -26,8 +26,8 @@ html {
 
     .button {
       background-color: transparent;
-      border-color: $dark-mode-button-color !important;
-      color: $dark-mode-button-color !important;
+      border-color: $dark-mode-button-color;
+      color: $dark-mode-button-color;
 
       &:hover:not([disabled]):not(.is-dark) {
         background-color: $dark-mode-button-color;
@@ -100,9 +100,14 @@ html {
       border-color: $dark-mode-light-border-color;
     }
 
+
     nav.navbar {
       background-color: $dark-mode-navbar-background-color;
 
+      .navbar-menu {
+        background-color: $dark-mode-navbar-background-color;
+      }
+
       .navbar-item {
         color: $dark-mode-link-color;
 
@@ -124,20 +129,15 @@ html {
       }
     }
 
-    .navbar-menu {
-      background-color: $dark-mode-navbar-hover-color;
+    .modal-card, .modal-card-head, .modal-card-body {
+      background-color: $dark-mode-model-card-background-color;
     }
 
     .navbar-menu.is-active .navbar-item:hover {
       border-color: transparent !important;
       color: $dark-mode-color;
     }
 
-    .navbar-item:hover {
-      background-color: $dark-mode-navbar-hover-color;
-      border-color: white;
-    }
-
     .navbar-dropdown {
       background-color: $dark-mode-navbar-hover-color;
 
@@ -203,5 +203,9 @@ html {
         fill: $dark-mode-color;
       }
     }
+
+    .loading-background {
+      background-color: rgba(34, 36, 54, 0.5)
+    }
   }
 }
diff --git a/assets/scss/theme-default.scss b/assets/scss/theme-default.scss
@@ -55,7 +55,7 @@ $state-colors: ('primary', $white, $white),
 $dark-mode-color: #e5e5e5;
 $dark-mode-background-color: #222436;
 $dark-mode-navbar-background-color: #1C1E33;
-$dark-mode-navbar-hover-color: transparent;
+$dark-mode-navbar-hover-color: #7499F2;
 $dark-mode-lighter-background-color: $grey-darker;
 $dark-mode-border-color: $white-ter;
 $dark-mode-border: 1px solid $dark-mode-border-color;
@@ -65,13 +65,13 @@ $dark-mode-link-color: $white;
 $dark-mode-overlay-background-color: rgba($black, .85);
 $dark-mode-button-color: $white-ter;
 $dark-mode-button-hover-color: $black-ter;
+$dark-mode-model-card-background-color: $dark-mode-background-color;
 $dark-mode-card-header-button-color: $grey;
 $dark-mode-card-header-button-hover-color: $black-ter;
 $dark-mode-dropdown-background-color: #1E2033;
 $dark-mode-dropdown-hovered-background: #1D1F33;
 $dark-mode-footer-background-color: #202235;
 
-
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 $success: rgba(70, 201, 58, 0.1);
@@ -138,6 +138,12 @@ $colors: mergeColorMaps(
 );
 $toast-border-radius: 0em;
 
+@media screen and (max-width: 768px) {
+  .toast {
+    margin: 1em 1em;
+  }
+}
+
 .toast.is-success div {
   color: rgb(70, 201, 58);
 }
@@ -154,6 +160,16 @@ $toast-border-radius: 0em;
   color: rgb(59, 222, 200)
 }
 
+.settings-button {
+  background-color: rgb(255, 71, 87) !important;
+  border-color: rgb(255, 71, 87) !important;
+  color: $dark-mode-color !important;
+}
+
+.settings-button:hover {
+  color: #2d3140 !important;
+}
+
 #hm {
   color: rgba(26, 92, 255, 0.7)
 }

diff --git a/components/general/DarkModeToggle.vue b/components/general/DarkModeToggle.vue
diff --git a/components/general/Footer.vue b/components/general/Footer.vue
@@ -14,7 +14,7 @@ import { Component, Vue } from 'nuxt-property-decorator'
 
 @Component
 export default class Footer extends Vue {
-  get isHomePage() {
+  get isHomePage(): boolean {
     return this.$store.getters.isHomePage
   }
 }

diff --git a/components/general/NavBar.vue b/components/general/NavBar.vue
@@ -30,10 +30,22 @@
       </b-navbar-item>
     </template>
     <template #end>
-<!--      <b-navbar-item class='mr-4'>-->
-<!--        <i class='fas fa-cog'></i>-->
-<!--      </b-navbar-item>-->
-      <a id='darkModeToggle' class='navbar-item has-divider is-desktop-icon-only is-size-6' title='Dark Mode'
+      <b-navbar-item class='mr-4 navOptions' href="#summary">
+        Summary
+      </b-navbar-item>
+      <b-navbar-item class='mr-4 navOptions' href="#rewards">
+        Rewards
+      </b-navbar-item>
+      <b-navbar-item class='mr-4 navOptions' href="#witnesses">
+        Witnesses
+      </b-navbar-item>
+      <b-navbar-item class='mr-4 navOptions' href="#location">
+        Location
+      </b-navbar-item>
+      <b-navbar-item class='mr-4 navOptions' @click="cardModal">
+        <i class='fas fa-cog'></i>
+      </b-navbar-item>
+      <a id='darkModeToggle' class='navbar-item has-divider is-desktop-icon-only is-size-6 navOptions' title='Dark Mode'
          @click='darkModeToggle'>
         <div v-if='!isDarkModeActive'>
           <i class='far fa-moon'></i>
@@ -47,16 +59,17 @@
 </template>
 
 <script lang='ts'>
-import { Component, Vue } from 'nuxt-property-decorator'
+import {Component, Vue} from 'nuxt-property-decorator'
 import Settings from '~/components/general/Settings.vue'
+import {Miners} from "~/interfaces/Miners";
 
 @Component
 export default class NavBar extends Vue {
   get isHomePage(): boolean {
     return this.$store.getters.isHomePage
   }
 
-  get miners() {
+  get miners(): Miners {
     return this.$store.getters.miners
   }
 
@@ -115,13 +128,9 @@ export default class NavBar extends Vue {
   border-bottom: none;
 }
 
-#sun {
-  color: white;
-}
-
-#darkModeToggle:hover {
+.navOptions:hover {
   border-bottom: none;
-  color: #7499F2;
+  color: #7499F2 !important;
 }
 
 @media screen and (max-width: 768px) {

diff --git a/components/general/Settings.vue b/components/general/Settings.vue
@@ -6,40 +6,74 @@
         <button
           type='button'
           class='delete'
-          @click="$emit('close')" />
+          @click="$emit('close')"/>
       </header>
       <section class='modal-card-body'>
-        <b-button class='is-dark'>Delete Miner History</b-button>
-        <b-button class='is-dark'>Delete Cache</b-button>
-        <a href='https://ko-fi.com/michaelpereira' rel='noopener' target='_blank'>
-          <b-button class='is-success'>
-            <i class='fas fa-coffee'>Buy me a coffee</i>
-          </b-button>
-        </a>
+        <div class="columns is-multiline">
+          <div class="column is-12">
+            <b-button class='settings-button is-fullwidth' @click="removeMinerHistory">Delete Miner History</b-button>
+          </div>
+          <div class="column is-12">
+            <b-button class='settings-button is-fullwidth' @click="removeFavourites">Delete Favourites</b-button>
+          </div>
+          <div class="column is-12">
+            <b-button class='settings-button is-fullwidth' @click="removeRecentlyViewed">Delete Recently Viewed</b-button>
+          </div>
+          <div class="column is-12">
+            <b-button class='settings-button is-fullwidth' @click="removeAllData">Delete All Cache</b-button>
+          </div>
+        </div>
       </section>
     </div>
   </form>
 </template>
 
 
 <script lang='ts'>
-import { Component, Vue } from 'nuxt-property-decorator'
+import {Component, Vue} from 'nuxt-property-decorator'
+import BuefyService from "~/services/buefy-service";
+import MessageConstants from "~/constants/message-constants";
 
 @Component
 export default class Settings extends Vue {
-  launchDeleteMinerHistoryConfirmation() {
+  removeAllData(): void {
+    this.redirectToHomePage('removeAllData');
+  }
+
+  removeFavourites(): void {
+    this.redirectToHomePage('removeFavourites');
+  }
 
+  removeMinerHistory(): void {
+    this.redirectToHomePage('removeMinerHistory');
   }
 
-  deleteMinerHistory() {
+  removeRecentlyViewed(): void {
+    this.redirectToHomePage('removeRecentlyViewed');
+  }
 
+  redirectToHomePage(action: string): void {
+    try {
+      this.$store.commit(action)
+      this.$router.push('/');
+      BuefyService.successToast(MessageConstants.SUCCESS_DELETING_CACHE);
+      this.$emit('close')
+    } catch {
+      BuefyService.successToast(MessageConstants.ERROR_DELETING_CACHE);
+    }
   }
 }
 </script>
 
 <style scoped>
 .modal-card {
-  min-width: 300px;
-  min-height: 300px;
+  max-width: 300px;
+}
+
+@media screen and (max-width: 768px) {
+  .modal-card {
+    max-width: unset;
+    margin: 30px !important;
+  }
 }
 </style>