0.8.1

Also moved page title component to new "common" component directory

docs/_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-architect

docs/index.md

@@ -0,0 +1,34 @@
+# Caveats
+
+_myPrayerJournal is currently alpha software. There likely will be errors, the way things work may change, and parts of the application are unfinished or need polish. I **will** do my best to not lose any data, though; it is backed up the way other DJS Consulting sites have their data backed up. Throughout this document, current gotchas will be called out with italic text, like this notice._
+
+# Finding the Site
+
+The application is at <https://prayerjournal.me>.
+
+# Signing Up
+
+myPrayerJournal uses login services using Google or Microsoft accounts. The only information the application stores in its database is your user Id token it receives from these services, so there are no permissions you should have to accept from these provider other than establishing that you can log on with that account. Because of this, you'll want to pick the same one each time; the tokens between the two accounts are different, even if you use the same e-mail address to log on to both.
+
+# Adding a Request
+
+To add a request, click the "Add a New Request" button in your "Journal". Then, enter the text of the request as you see fit; there is no right or wrong way, and you are the only person who will see the text you enter. When you save the request, it will go to the bottom of the list of requests.
+
+# Praying for Requests
+
+The first button for each request has a checkmark icon; clicking this button will mark the request as "Prayed" and move it to the bottom of the list. This allows you, if you're praying through your requests, to start at the top (with the request that it's been the longest since you've prayed) and click the button as you pray; when the request goes to the bottom of the list, the next will move up to the top.
+
+# Editing Requests
+
+The second button for each request has a pencil icon. This allows you to edit the text of the request, pretty much the same way you entered it; it starts with the current text, and you can add to it, modify it, or completely replace it. By default, updates will go in with an "Updated" status; you have the option to also mark this update as "Prayed" or "Answered." Answered requests will drop off the journal list. _(There is currently no way to see answered requests once they have been answered; this functionality is planned soon.)_
+
+# Viewing a Request and Its History
+
+myPrayerJournal tracks all of the actions related to a request; the third button, with the document icon, will show you the entire history, including the text as it changed, and all the times "Prayed" was recorded.
+
+# Known Issues
+
+See [the GitHub issues list](https://github.com/danieljsummers/myPrayerJournal/issues) for the most up-to-date list.
+
+- _There is no way to view "Answered" requests; the absence of this functionality is a big reason this is still considered alpha. Going back through requests to see how God has answered them is an encouraging benefit of taking the time to journal._
+- _If you try to do something an get an error notification instead of a green checkmark, try logging off and logging back on again. The site currently doesn't check to see if your session has expired, but the server with which it's communicating does._

src/api/package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-prayer-journal-api",
   "private": true,
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Server API for myPrayerJournal",
   "main": "index.js",
   "author": "Daniel J. Summers <daniel@djs-consulting.com>",

src/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-prayer-journal",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "myPrayerJournal - Front End",
   "author": "Daniel J. Summers <daniel@djs-consulting.com>",
   "private": true,

src/app/src/App.vue

@@ -5,7 +5,7 @@
     router-view
     vue-progress-bar
   footer
-    p.text-right: i myPrayerJournal v0.8.0
+    p.text-right: i myPrayerJournal v0.8.1
 </template>
 
 <script>

src/app/src/auth/AuthService.js

@@ -67,7 +67,7 @@ export default class AuthService {
           this.userInfo(authResult.accessToken)
             .then(user => {
               store.commit(mutations.USER_LOGGED_ON, user)
-              router.replace('/dashboard')
+              router.replace('/journal')
             })
         }
       })

src/app/src/components/Home.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 article
-  page-title(title="Welcome!" hideOnPage="true")
+  page-title(title='Welcome!' hideOnPage='true')
   p &nbsp;
   p.
     myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for them,
@@ -15,7 +15,7 @@ article
 <script>
 'use strict'
 
-import PageTitle from './PageTitle.vue'
+import PageTitle from './common/PageTitle.vue'
 
 export default {
   name: 'home',

src/app/src/components/Journal.vue

@@ -1,14 +1,15 @@
 <template lang="pug">
 article
-  page-title(:title="title")
+  page-title(:title='title')
-  p(v-if="isLoadingJournal") Loading your prayer journal...
+  p(v-if='isLoadingJournal') Loading your prayer journal...
-  template(v-if="!isLoadingJournal")
+  template(v-if='!isLoadingJournal')
     new-request
     el-row
       el-col(:span='4'): strong Actions
       el-col(:span='16'): strong Request
       el-col(:span='4'): strong As Of
-    request-list-item(v-for="request in journal" :request="request" :key="request.requestId")
+    request-list-item(v-if='journal.length > 0' v-for='request in journal' :request='request' :key='request.requestId')
+    p.text-center(v-if='journal.length === 0'): em No requests found; click the "Add a New Request" button to add one
 </template>
 
 <script>
@@ -16,14 +17,14 @@ article
 
 import { mapState } from 'vuex'
 
-import PageTitle from './PageTitle'
+import PageTitle from './common/PageTitle'
 import NewRequest from './request/NewRequest'
 import RequestListItem from './request/RequestListItem'
 
 import actions from '@/store/action-types'
 
 export default {
-  name: 'dashboard',
+  name: 'journal',
   components: {
     PageTitle,
     NewRequest,
@@ -31,7 +32,7 @@ export default {
   },
   computed: {
     title () {
-      return `${this.user.given_name}'s Dashboard`
+      return `${this.user.given_name}'s Prayer Journal`
     },
     ...mapState(['user', 'journal', 'isLoadingJournal'])
   },

src/app/src/components/Navigation.vue

@@ -1,12 +1,13 @@
 <template lang="pug">
-el-menu(theme="dark" mode="horizontal" class="mpj-top-nav" router=true)
+el-menu(theme='dark' mode='horizontal' class='mpj-top-nav' router='true')
-  el-menu-item(index="/")
+  el-menu-item(index='/')
-    span(style="font-weight:100;") my
+    span(style='font-weight:100;') my
-    span(style="font-weight:600;") Prayer
+    span(style='font-weight:600;') Prayer
-    span(style="font-weight:700;") Journal
+    span(style='font-weight:700;') Journal
-  el-menu-item(v-if="isAuthenticated" index="/dashboard") Dashboard
+  el-menu-item(v-if='isAuthenticated' index='/journal') Journal
-  el-menu-item(v-if="isAuthenticated" index="3"): a(@click.stop="logOff()") Log Off
+  el-menu-item(v-if='isAuthenticated' index='3'): a(@click.stop='logOff()') Log Off
-  el-menu-item(v-if="!isAuthenticated" index="4"): a(@click.stop="logOn()") Log On
+  el-menu-item(v-if='!isAuthenticated' index='4'): a(@click.stop='logOn()') Log On
+  el-menu-item(index='5'): a(href='https://danieljsummers.github.io/myPrayerJournal/' target='_blank' @click.stop='') Docs
 </template>
 
 <script>
@@ -36,10 +37,14 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .mpj-top-nav {
   position: fixed;
   top: 0px;
   width: 100%;
 }
+.mpj-top-nav a:link,
+.mpj-top-nav a:visited {
+  text-decoration: none;
+}
 </style>

src/app/src/components/common/DateFromNow.vue

@@ -0,0 +1,45 @@
+<script>
+'use strict'
+
+import moment from 'moment'
+
+export default {
+  name: 'date-from-now',
+  props: {
+    tag: {
+      type: String,
+      default: 'span'
+    },
+    value: {
+      type: Number,
+      default: 0
+    },
+    interval: {
+      type: Number,
+      default: 10000
+    }
+  },
+  data () {
+    return {
+      fromNow: moment(this.value).fromNow(),
+      intervalId: null
+    }
+  },
+  mounted () {
+    this.intervalId = setInterval(this.updateFromNow, this.interval)
+    this.$watch('value', this.updateFromNow)
+  },
+  beforeDestroy () {
+    clearInterval(this.intervalId)
+  },
+  methods: {
+    updateFromNow () {
+      let newFromNow = moment(this.value).fromNow()
+      if (newFromNow !== this.fromNow) this.fromNow = newFromNow
+    }
+  },
+  render (createElement) {
+    return createElement(this.tag, this.fromNow)
+  }
+}
+</script>

src/app/src/components/common/PageTitle.vue

@@ -1,11 +1,20 @@
 <template lang="pug">
-h2.mpj-page-title(v-if="!hideOnPage" v-html="title")
+h2.mpj-page-title(v-if='!hideOnPage' v-html='title')
 </template>
 
 <script>
 export default {
   name: 'page-title',
-  props: [ 'title', 'hideOnPage' ],
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    hideOnPage: {
+      type: Boolean,
+      default: false
+    }
+  },
   created () {
     document.title = `${this.title} « myPrayerJournal`
   },

src/app/src/components/request/EditRequest.vue

@@ -4,7 +4,7 @@ span
   el-dialog(title='Edit Prayer Request' :visible.sync='editVisible')
     el-form(:model='form' :label-position='top')
       el-form-item(label='Prayer Request')
-        el-input(type='textarea' v-model.trim='form.requestText' :rows='10')
+        el-input(type='textarea' v-model='form.requestText' :rows='10' @blur="trimText()")
       el-form-item(label='Also Mark As')
         el-radio-group(v-model='form.status')
           el-radio-button(label='Updated') Updated
@@ -42,6 +42,9 @@ export default {
     openDialog () {
       this.editVisible = true
     },
+    trimText () {
+      this.form.requestText = this.form.requestText.trim()
+    },
     async saveRequest () {
       await this.$store.dispatch(actions.UPDATE_REQUEST, {
         progress: this.$Progress,

src/app/src/components/request/NewRequest.vue

@@ -4,7 +4,7 @@ div
   el-dialog(title='Add a New Prayer Request' :visible.sync='showNewVisible')
     el-form(:model='form' :label-position='top')
       el-form-item(label='Prayer Request')
-        el-input(type='textarea' v-model.trim='form.requestText' :rows='10')
+        el-input(type='textarea' v-model='form.requestText' :rows='10' @blur='trimText()')
     span.dialog-footer(slot='footer')
       el-button(@click='closeDialog()') Cancel
       el-button(type='primary' @click='saveRequest()') Save
@@ -34,6 +34,9 @@ export default {
     openDialog () {
       this.showNewVisible = true
     },
+    trimText () {
+      this.form.requestText = this.form.requestText.trim()
+    },
     async saveRequest () {
       await this.$store.dispatch(actions.ADD_REQUEST, {
         progress: this.$Progress,

src/app/src/components/request/RequestListItem.vue

@@ -5,7 +5,7 @@ el-row.journal-request
     edit-request(:request='request')
     full-request(:request='request')
   el-col(:span='16'): p {{ text }}
-  el-col(:span='4'): p {{ asOf }}
+  el-col(:span='4'): p: date-from-now(:value='request.asOf')
 </template>
 
 <script>
@@ -13,6 +13,7 @@ el-row.journal-request
 
 import moment from 'moment'
 
+import DateFromNow from '../common/DateFromNow'
 import EditRequest from './EditRequest'
 import FullRequest from './FullRequest'
 
@@ -21,7 +22,11 @@ import actions from '@/store/action-types'
 export default {
   name: 'request-list-item',
   props: [ 'request' ],
+  data () {
+    return { interval: null }
+  },
   components: {
+    DateFromNow,
     EditRequest,
     FullRequest
   },

src/app/src/components/user/LogOn.vue

@@ -1,14 +1,20 @@
 <template lang="pug">
+article
+  pageTitle(title='Logging On')
   p Logging you on...
 </template>
 
 <script>
 'use strict'
 
+import PageTitle from '../common/PageTitle'
 import AuthService from '@/auth/AuthService'
 
 export default {
   name: 'log-on',
+  components: {
+    PageTitle
+  },
   created () {
     this.$Progress.start()
     new AuthService().handleAuthentication(this.$store, this.$router)

src/app/src/router/index.js

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 
-import Dashboard from '@/components/Dashboard'
 import Home from '@/components/Home'
+import Journal from '@/components/Journal'
 import LogOn from '@/components/user/LogOn'
 
 Vue.use(Router)
@@ -11,7 +11,7 @@ export default new Router({
   mode: 'history',
   routes: [
     { path: '/', name: 'Home', component: Home },
-    { path: '/dashboard', name: 'Dashboard', component: Dashboard },
+    { path: '/journal', name: 'Journal', component: Journal },
     { path: '/user/log-on', name: 'LogOn', component: LogOn }
   ]
 })