Added "date from now" component (#4)

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

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

@@ -17,7 +17,7 @@ article
 
 import { mapState } from 'vuex'
 
-import PageTitle from './PageTitle'
+import PageTitle from './common/PageTitle'
 import NewRequest from './request/NewRequest'
 import RequestListItem from './request/RequestListItem'
 

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/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">
-p Logging you on...
+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)