last dev after ramadhan

sm-alfariz · Jun 15, 2020 · 797b674 · 797b674
1 parent 8fcfea2
commit 797b674
Show file tree

Hide file tree

Showing 11 changed files with 160 additions and 91 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,8 @@
-# Quasar App (quasar-electron-vue)
+# Aldig Al Quran Digital (source ayah from Indonesian Islam Government organzation)
+
+using their standar font LpmqKemenag
+
+## AIm use Quasar App (quasar-electron-vue)
 
 A Quasar Framework app
 

diff --git a/quasar.conf.js b/quasar.conf.js
@@ -69,7 +69,7 @@ module.exports = function (/* ctx */) {
 
     // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
     build: {
-      vueRouterMode: 'hash', // available values: 'hash', 'history'
+      vueRouterMode: 'history', // available values: 'hash', 'history'
 
       // rtl: false, // https://quasar.dev/options/rtl-support
       // showProgress: false,

diff --git a/src/components/surah/SurahReading.vue b/src/components/surah/SurahReading.vue
@@ -18,18 +18,19 @@
       </q-card>
     </div>
     <div class="wrap col-12" style="">
-      <q-list v-for="item in surahData.ayahs" :key="item.numberInSurah" bordered>
+      <q-list v-for="item in surahData.ayat" :key="item.no" bordered>
         <q-item>
           <q-item-section>
             <q-item-label>
-              <span>{{ item.numberInSurah }} </span>
-              <span style="float: right; direction: rtl" class="text-h5">
-                    {{ (item.numberInSurah === 1 && item.number !== 1 ? item.text.substr(39) : item.text) }}
+              <span>{{ item.no }} </span>
+              <span style="float: right; direction: rtl" class="text-h5 surah-text">
+                    {{ item.text }}
                       <q-avatar  size="24px" color="orange" text-color="black">
-                        {{ $StringUtils.numberToArabic(item.numberInSurah) }}
+                        {{ $StringUtils.numberToArabic(item.no) }}
                       </q-avatar>
                   </span>
             </q-item-label>
+            <q-item-label style="font-size: 12pt" class="text-dark" caption>{{ item.translaet_id }}</q-item-label>
           </q-item-section>
         </q-item>
       </q-list>
@@ -41,18 +42,23 @@
 export default {
   name: 'SurahReadingComp',
   props: {
-    surahNumber: {
+    surahData: {
       required: true
     },
     surahName: {
       type: String,
       required: true,
       default: ''
     },
-    surahData: {
+    surahNumber: {
       required: true
     }
   },
+  computed: {
+  },
+  created () {
+    // console.log(this.$route.name)
+  },
   methods: {
   }
 }
@@ -61,7 +67,8 @@ export default {
   .surah-title {
     direction: rtl;
     font-size: 35px;
-    font-family: 'me_quran',serif;
+    font-family: 'LpmqKemenag',serif;
     line-height: 1px;
   }
+
 </style>
diff --git a/src/css/app.sass b/src/css/app.sass
@@ -12,16 +12,36 @@
 // // declare a class which applies it
 @import url(http://fonts.googleapis.com/earlyaccess/amiri.css)
 
+@font-face
+  font-family: 'LpmqKemenag'
+  src: url('./fonts/lpmq.otf') format('opentype')
+
 @font-face
   font-family: 'me_quran'
   src: url('https://icikiwir.github.io/test/me_quran.eot?#iefix') format('embedded-opentype') url('https://icikiwir.github.io/test/me_quran.woff') format('woff'), url('https://icikiwir.github.io/test/me_quran.ttf') format('truetype'), url('https://icikiwir.github.io/test/me_quran.svg#me_quran') format('svg')
       font-weight: normal
       font-style: normal
+
 .amiri
   font-family: 'Amiri', serif
   direction: rtl
   font-size: 19.5px
   font-weight: 300
   line-height: 1.4
+
 .me-quran
   font-family: 'me_quran'
+
+.lpmq_kemenag
+  font-family: 'LpmqKemenag', serif
+
+.surah-text
+  direction: rtl
+  font-size: 25px !important
+  font-weight: 400 !important
+  font-family: 'LpmqKemenag',serif
+  line-height: 70px
+
+.surah-title
+  direction: rtl
+  font-family: 'LpmqKemenag',serif
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <q-layout view="lHh Lpr lFf">
     <q-header elevated>
-      <q-toolbar>
+      <q-toolbar class="glossy">
         <q-btn
           flat
           dense
@@ -10,54 +10,76 @@
           aria-label="Menu"
           @click="leftDrawerOpen = !leftDrawerOpen"
         />
+        <router-link to="/">
+          <q-avatar @click.stop="this.$route.path !== '/' ? this.$router.push({path: '/' }).catch(_ => {}) : console.log('ss') " style="cursor: pointer;" clickable v-ripple:orange-5>
+              <img alt="AlDig" src="~assets/images/AlQ_Kareem_clear.png">
+          </q-avatar>
+        </router-link>
         <q-toolbar-title>
-          Al-Dig (Al-Quran Digital)
+          Al-Dig (Al-Quran Digital) <span class="text-warning text-italic text-subtitle2 text-caption">Versi 0.0.1</span>
         </q-toolbar-title>
-
-        <div>Versi 0.0.1</div>
+        <q-separator vertical />
+        <q-btn-dropdown stretch flat label="File">
+          <q-list>
+            <q-item v-for="n in 3" :key="`y.${n}`" clickable v-close-popup tabindex="0">
+              <q-item-section avatar>
+                <q-avatar icon="bookmark" color="primary" text-color="white" />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label>Bookmark</q-item-label>
+                <q-item-label caption>February 22, 2016</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-icon name="info" />
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-btn-dropdown>
       </q-toolbar>
     </q-header>
 
     <q-drawer
       v-model="leftDrawerOpen"
       show-if-above
-      bordered
-      content-class="bg-grey-1"
+      :width="250"
+      :breakpoint="500"
     >
-      <q-list>
-        <q-expansion-item
-        style="height: 35px"
-        dense
-        dense-toggle
-        expand-separator
-        default-opened
-        label="Surah (114 surah)">
-          <q-list v-for="item in getSurah" :key="item.nomor" bordered>
-            <q-item clickable v-ripple:orange-5 @click.stop="surahReading(item.nomor)">
-              <q-item-section>
-                <q-item-label>
-                  <span>{{ item.nomor }} </span> : <span class="surah-title">{{ item.name }} </span>
-                </q-item-label>
-                <q-item-label>
-                  <span>{{ item.nama }}</span>
-                </q-item-label>
-              </q-item-section>
-              <q-item-section side top>
-                <q-item-label caption>{{ item.ayat }} ayat </q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-expansion-item>
-      </q-list>
+      <q-scroll-area class="fit">
+        <q-list padding>
+          <q-expansion-item
+                  style="height: 35px"
+                  dense
+                  dense-toggle
+                  expand-separator
+                  default-opened
+                  label="Surah (114 surah)">
+            <q-list v-for="item in getSurah" :key="item.nomor" bordered>
+              <q-item clickable v-ripple:orange-5 @click.stop="surahReading(item.nomor)">
+                <q-item-section>
+                  <q-item-label>
+                    <span>{{ item.nomor }} </span> : <span class="surah-title">{{ item.name }} </span>
+                  </q-item-label>
+                  <q-item-label>
+                    <span>{{ item.nama }}</span>
+                  </q-item-label>
+                </q-item-section>
+                <q-item-section side top>
+                  <q-item-label caption>{{ item.ayat }} ayat </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-expansion-item>
+        </q-list>
+      </q-scroll-area>
     </q-drawer>
 
     <q-page-container>
       <router-view />
     </q-page-container>
-    <q-footer elevated class="primary text-white">
+    <q-footer :reveal="true" class="primary text-white">
       <q-toolbar>
-        <q-toolbar-title class="text-center">
-          <span class="text-warning text-italic text-subtitle2">Copyright : </span><span class="me_quran"> سبحانه و تعالى </span> <span class="text-warning text-italic text-subtitle2">code writing by: fendi 1, Ramadhan 1441 H, 2020</span>
+        <q-toolbar-title style="height: 30px" class="text-center">
+          <span class="text-warning text-italic text-subtitle2">Copyright : </span><span class="me_quran"> سبحانه و تعالى </span> <span class="text-warning text-italic text-subtitle2">code writing by: fendi 1, Ramadhan 1441 H, 2020 | Terjemah dan Text Quran bersumber dari KEMENAG 2020 </span>
         </q-toolbar-title>
       </q-toolbar>
     </q-footer>
@@ -77,42 +99,35 @@ export default {
   },
   data () {
     return {
-      leftDrawerOpen: false
+      leftDrawerOpen: true
     }
   },
   created () {
-    // this.$store.dispatch('QuranModul/FETCH_API_SURAH')
     this.$store.dispatch('QuranModul/FETCH_API_INTENASIONAL')
+    console.log(this.$route.name)
   },
   computed: {
     getSurah () {
       return this.$store.state.QuranModul.surah
     }
   },
   methods: {
-    surahReading (surahNumber) {
+    async surahReading (surahNumber) {
       this.$q.loadingBar.start()
-      this.$store.dispatch('QuranModul/SELECT_SURAH', { surah_number: surahNumber })
-        .then(resp => {
-          if (resp.data.code === 200) {
-            this.$q.loadingBar.stop()
-          }
-        })
-        .catch(err => {
-          console.log(err)
-          this.$q.loadingBar.stop()
-        })
-      this.$router.push({ path: `/surah-reading/${surahNumber}` })
+      await this.$store.dispatch('QuranModul/SELECT_SURAH_JSON', { surah_number: surahNumber })
+      await this.$router.push({ path: `/surah-reading/${surahNumber}` }).catch(_ => {})
+      await this.$q.loadingBar.stop()
     }
   }
 }
 </script>
-<style scoped>
-  .surah-title {
-    direction: rtl;
-    font-size: 19.5px;
-    font-family: 'me_quran',serif;
-    font-weight: 300;
-    line-height: 1.4;
-  }
+<style scoped lang="sass">
+  .surah-title
+    direction: rtl
+    font-size: 19.5px
+    font-family: 'me_quran',serif
+    font-weight: 300
+    line-height: 1.4
+  .menu-list .q-item
+    border-radius: 0 32px 32px 0
 </style>
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page>
     <div class="flex flex-center column">
-      <h2 class="surah-title"> بِسْمِ ٱللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ </h2>
+      <h2 class="surah-title"> بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ </h2>
       <div class="row" style="min-height: 400px; width: 80%; padding: 24px;">
         <div id="parent" class="full-width column no-wrap justify-between items-center content-start" style="overflow: hidden;">
           <div style="overflow: auto;">
@@ -23,8 +23,5 @@ export default {
 }
 </script>
 <style scoped>
-  .surah-title {
-    direction: rtl;
-    font-family: 'me_quran',serif;
-  }
+
 </style>
diff --git a/src/pages/SurahDetail.vue b/src/pages/SurahDetail.vue
@@ -1,10 +1,11 @@
 <template>
   <q-page padding class="flex flex-center column">
     <!-- content -->
-    <div class="row" style="min-height: 400px; width: 100%;">
+    <div class="row justify-center" style="min-height: 400px; width: 100%;">
+      <h3 v-show="this.$route.params.surah_number !== '1'" class="surah-title text-center"> بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ </h3>
     <surah-reading-comp
-       :surah-data="this.$store.state.QuranModul.selectSurah"
-       :surah-name="this.$store.state.QuranModul.selectSurah.name"
+       :surah-data="getFormatedSurah"
+       :surah-name="this.$store.state.QuranModul.surahData.name"
        :surah-number=this.$route.params.surah_number>
     </surah-reading-comp>
     </div>
@@ -20,19 +21,18 @@ export default {
   data () {
     return {
       surah_number: this.$route.params.surah_number,
-      firstSurah: true,
       dataSelectSurah: {}
     }
   },
   computed: {
     getSurah () {
       return this.$store.state.QuranModul.selectSurah.ayahs
+    },
+    getFormatedSurah () {
+      return this.$store.getters['QuranModul/getJsonSurah']
     }
   },
   watch: {
-    surah_number (val) {
-      this.firstSurah = val <= 1
-    }
   },
   created () {
     this.initSurah()

diff --git a/src/router/routes.js b/src/router/routes.js
@@ -4,9 +4,10 @@ const routes = [
     path: '/',
     component: () => import('layouts/MainLayout.vue'),
     children: [
-      { path: '', component: () => import('pages/Index.vue') },
-      { path: '/dashboard', component: () => import('pages/Dashboard.vue') },
+      { name: 'index', path: '', component: () => import('pages/Index.vue') },
+      { name: 'dashboard', path: '/dashboard', component: () => import('pages/Dashboard.vue') },
       {
+        name: 'surah-reading',
         path: '/surah-reading/:surah_number',
         component: () => import('pages/SurahDetail.vue')
       }

diff --git a/src/store/QuranModul/actions.js b/src/store/QuranModul/actions.js
@@ -1,6 +1,10 @@
 import { staticSurat } from 'http/json_db'
 import Api from 'http/request/Api'
 
+function jsonSurahLoader (surahNumber) {
+  return require(`assets/surah_json/${surahNumber}.json`)
+}
+
 export function FETCH_API_SURAH ({ commit }) {
   commit('FETCH_SURAH', staticSurat)
 }
@@ -40,12 +44,15 @@ export function FETCH_API_INTENASIONAL ({ commit }) {
   })
 }
 
+export function SELECT_SURAH_JSON ({ commit }, data) {
+  commit('filldDataSurah', jsonSurahLoader(data.surah_number)[data.surah_number])
+}
+
 export function SELECT_SURAH ({ commit }, data) {
   return new Promise((resolve, reject) => {
     // cek dulu sudah ada belum data surah terseub
     Api.selectSurah(data)
       .then((response) => {
-        commit('setLastSurah', response.data.data.number)
         commit('SELECT_SURAH', response.data.data)
         resolve(response)
       })