bit-badger/myPrayerJournal
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases 36 Activity

Complete v2 UI, pending human testing

Browse Source
This commit is contained in:
Daniel J. Summers 2019-08-24 22:32:35 -05:00
parent 26a0da610d
commit 702ae1811c
16 changed files with 257 additions and 507 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
src/app/src/App.vue
View File

@ -4,7 +4,7 @@
md-app-toolbar.md-large.md-dense.md-primary
.md-toolbar-row
.md-toolbar-section-start
span.md-title
router-link(to='/').md-title
span(style='font-weight:100;') my
span(style='font-weight:400;') Prayer
span(style='font-weight:700;') Journal
@ -18,14 +18,15 @@
:md-duration='snackbar.interval'
ref='snackbar')
| {{ snackbar.message }}
p.mpj-muted-text.mpj-text-right
| myPrayerJournal v{{ version }}
br
em: small.
#[router-link(:to="{ name: 'PrivacyPolicy' }") Privacy Policy] •
#[router-link(:to="{ name: 'TermsOfService' }") Terms of Service] •
#[a(href='https://github.com/bit-badger/myprayerjournal' target='_blank') Developed] and hosted by
#[a(href='https://bitbadger.solutions' target='_blank') Bit Badger Solutions]
footer
p.mpj-muted-text.mpj-text-right
| myPrayerJournal v{{ version }}
br
em: small.
#[router-link(to='/legal/privacy-policy') Privacy Policy] •
#[router-link(to='/legal/terms-of-service') Terms of Service] •
#[a(href='https://github.com/bit-badger/myprayerjournal' target='_blank') Developed] and hosted by
#[a(href='https://bitbadger.solutions' target='_blank') Bit Badger Solutions]
</template>
<script>
@ -103,125 +104,31 @@ export default {
</script>
<style lang="sass">
// Custom theme
@import "~vue-material/dist/theme/engine"
@include md-register-theme("default", (primary: md-get-palette-color(green, 800), accent: md-get-palette-color(gray, 700)))
@import "~vue-material/dist/theme/all"
html, body
// background-color: whitesmoke;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
font-size: 1rem
// h1, h2, h3, h4, h5 {
font-weight: 500;
margin-top: 0;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1.5rem;
}
h5 {
font-size: 1.25rem;
}
p
margin-bottom: 0
// input, textarea, select {
border-radius: .25rem;
font-size: 1rem;
}
textarea {
font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
}
input, select {
font-family: inherit;
}
button,
a[role="button"] {
border: solid 1px #050;
border-radius: .5rem;
background-color: rgb(235, 235, 235);
padding: .25rem;
font-size: 1rem;
}
a[role="button"]:link,
a[role="button"]:visited {
color: black;
}
button.primary,
a[role="button"].primary {
background-color: white;
border-width: 3px;
}
button:hover,
a[role="button"]:hover {
cursor: pointer;
background-color: #050;
color: white;
text-decoration: none;
}
label {
font-variant: small-caps;
font-size: 1.1rem;
}
label.normal {
font-variant: unset;
font-size: unset;
}
footer {
border-top: solid 1px lightgray;
margin-top: 1rem;
padding: 0 1rem;
}
footer p {
margin: 0;
}
a:link, a:visited {
color: #050;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
footer
border-top: solid 1px lightgray
margin: 1rem -1rem 0
padding: 0 1rem
footer p
margin: 0
.mpj-full-page-card
font-size: 1rem
line-height: 1.25rem
.mpj-main-content
max-width: 60rem
margin: auto
// .mpj-main-content-wide {
margin: .5rem;
}
@media screen and (max-width: 21rem) {
.mpj-main-content-wide {
margin: 0;
}
}
.mpj-request-text
white-space: pre-line
// .mpj-request-list p {
border-top: solid 1px lightgray;
}
.mpj-request-list p:first-child {
border-top: none;
}
.mpj-request-log {
width: 100%;
}
.mpj-request-log thead th {
border-top: solid 1px lightgray;
border-bottom: solid 2px lightgray;
text-align: left;
}
.mpj-request-log tbody td {
border-bottom: dotted 1px lightgray;
vertical-align: top;
}
.mpj-bg {
background-image: -webkit-gradient(linear, left top, left bottom, from(#050), to(whitesmoke));
background-image: -webkit-linear-gradient(top, #050, whitesmoke);
background-image: -moz-linear-gradient(top, #050, whitesmoke);
background-image: linear-gradient(to bottom, #050, whitesmoke);
}
p.mpj-request-text
margin-top: 0
.mpj-text-center
text-align: center
.mpj-text-nowrap
@ -230,6 +137,8 @@ p
text-align: right
.mpj-muted-text
color: rgba(0, 0, 0, .6)
.mpj-valign-top
vertical-align: top
.mpj-narrow
max-width: 40rem
margin: auto
@ -238,51 +147,6 @@ p
margin: auto
.mpj-full-width
width: 100%
// .mpj-modal {
position: fixed;
z-index: 8;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, .4);
}
.mpj-modal-content {
background-color: whitesmoke;
border: solid 1px #050;
border-radius: .5rem;
animation-name: animatetop;
animation-duration: 0.4s;
padding: 1rem;
margin-top: 4rem;
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
.mpj-modal-content header {
margin: -1rem -1rem .5rem;
border-radius: .4rem;
}
.mpj-modal-content header h5 {
color: white;
margin: 0;
padding: 1rem;
}
.mpj-margin {
margin-left: 1rem;
margin-right: 1rem;
}
.material-icons {
vertical-align: middle;
} */
.md-progress-bar
margin: 24px
</style>

10
src/app/src/components/Home.vue
View File

@ -1,16 +1,16 @@
<template lang="pug">
article.mpj-main-content(role='main')
md-content(role='main').mpj-main-content
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,
update them as God moves in the situation, and record a final answer received on that request. It will also allow
update them as God moves in the situation, and record a final answer received on that request. It also allows
individuals to review their answered prayers.
p.
This site is currently in beta, but it is open and available to the general public. To get started, simply click
the &ldquo;Log On&rdquo; link above, and log on with either a Microsoft or Google account. You can also learn more
about the site at the &ldquo;Docs&rdquo; link, also above.
This site is open and available to the general public. To get started, simply click the &ldquo;Log On&rdquo; link
above, and log on with either a Microsoft or Google account. You can also learn more about the site at the
&ldquo;Docs&rdquo; link, also above.
</template>
<script>

26
src/app/src/components/Journal.vue
View File

@ -1,5 +1,5 @@
<template lang="pug">
article.mpj-main-content-wide(role='main')
md-content(role='main').mpj-main-content-wide
page-title(:title='title')
p(v-if='isLoadingJournal') Loading your prayer journal...
template(v-else)
@ -7,13 +7,11 @@ article.mpj-main-content-wide(role='main')
md-icon='done_all'
md-label='No Requests to Show'
md-description='You have no requests to be shown; see the “Active” link above for snoozed/deferred requests, and the “Answered” link for answered requests')
md-button(:to="{ name: 'Journal' }").md-primary.md-raised Add a New Request
md-button(:to="{ name: 'EditRequest', params: { id: 'new' } }").md-primary.md-raised Add a New Request
template(v-else)
.mpj-text-center
md-button(:to="{ name: 'EditRequest', params: { id: 'new' } }"
role='button').md-raised
md-icon add_box
= ' Add a New Request'
role='button').md-raised.md-accent #[md-icon add_box] Add a New Request
br
.mpj-journal
request-card(v-for='request in journal'
@ -72,14 +70,12 @@ export default {
}
</script>
<style>
.mpj-journal {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
}
.mpj-dialog-content {
padding: 0 1rem;
}
<style lang="sass">
.mpj-journal
display: flex
flex-flow: row wrap
justify-content: center
align-items: flex-start
.mpj-dialog-content
padding: 0 1rem
</style>

49
src/app/src/components/common/Navigation.vue
View File

@ -1,32 +1,30 @@
<template lang="pug">
.md-toolbar-row
md-tabs.md-primary(md-sync-route)
md-tab(md-label='Home'
:to="{ name: 'Home' }")#mpj-home
md-tabs(md-sync-route).md-primary
md-tab(v-if='isAuthenticated'
md-label='Journal'
:to="{ name: 'Journal' }")#mpj-journal
to='/journal')
md-tab(v-if='isAuthenticated'
md-label='Active'
:to="{ name: 'ActiveRequests' }")#mpj-active
to='/requests/active')
md-tab(v-if='hasSnoozed'
md-label='Snoozed'
:to="{ name: 'SnoozedRequests' }")#mpj-snoozed
to='/requests/snoozed')
md-tab(v-if='isAuthenticated'
md-label='Answered'
:to="{ name: 'AnsweredRequests' }")#mpj-answered
to='/requests/answered')
md-tab(v-if='isAuthenticated'
md-label='Log Off'
href='#'
@click.stop='logOff()')#mpj-log-off
@click.stop='logOff()')
md-tab(v-if='!isAuthenticated'
md-label='Log On'
href='#'
@click.stop='logOn()')#mpj-log-on
@click.stop='logOn()')
md-tab(md-label='Docs'
href='https://docs.prayerjournal.me'
target='_blank'
@click.stop='')#mpj-docs
@click.stop='')
</template>
<script>
@ -61,34 +59,3 @@ export default {
}
}
</script>
<style>
.mpj-top-nav {
position: fixed;
display: flex;
flex-flow: row wrap;
align-items: center;
top: 0;
left: 0;
width: 100%;
padding-left: .5rem;
min-height: 50px;
}
.mpj-top-nav a:link,
.mpj-top-nav a:visited {
text-decoration: none;
color: rgba(255, 255, 255, .75);
padding-left: 1rem;
}
.mpj-top-nav a:link.router-link-active,
.mpj-top-nav a:visited.router-link-active,
.mpj-top-nav a:hover {
color: white;
}
.mpj-top-nav .title {
font-size: 1.25rem;
color: white;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
</style>

4
src/app/src/components/common/PageTitle.vue
View File

@ -1,6 +1,6 @@
<template lang="pug">
h1.md-title(v-if='!hideOnPage'
v-html='title')
h1(v-if='!hideOnPage'
v-html='title').md-title
</template>
<script>

109
src/app/src/components/legal/PrivacyPolicy.vue
View File

@ -1,54 +1,59 @@
<template lang="pug">
article
page-title(title='Privacy Policy')
p: small: em (as of May 21, 2018)
p.
The nature of the service is one where privacy is a must. The items below will help you understand the data we
collect, access, and store on your behalf as you use this service.
hr
h3 Third Party Services
p.
myPrayerJournal utilizes a third-party authentication and identity provider. You should familiarize yourself with
the privacy policy for #[a(href='https://auth0.com/privacy' target='_blank') Auth0], as well as your chosen provider
(#[a(href='https://privacy.microsoft.com/en-us/privacystatement' target='_blank') Microsoft] or
#[a(href='https://policies.google.com/privacy' target='_blank') Google]).
hr
h3 What We Collect
h4 Identifying Data
ul
li.
The only identifying data myPrayerJournal stores is the subscriber (&ldquo;sub&rdquo;) field from the token we
receive from Auth0, once you have signed in through their hosted service. All information is associated with you
via this field.
li.
While you are signed in, within your browser, the service has access to your first and last names, along with a
URL to the profile picture (provided by your selected identity provider). This information is not transmitted to
the server, and is removed when &ldquo;Log Off&rdquo; is clicked.
h4 User Provided Data
ul
li.
myPrayerJournal stores the information you provide, including the text of prayer requests, updates, and notes;
and the date/time when certain actions are taken.
hr
h3 How Your Data Is Accessed / Secured
ul
li.
Your provided data is returned to you, as required, to display your journal or your answered requests.
On the server, it is stored in a controlled-access database.
li.
Your data is backed up, along with other Bit Badger Solutions hosted systems, in a rolling manner; backups are
preserved for the prior 7 days, and backups from the 1st and 15th are preserved for 3 months. These backups are
stored in a private cloud data repository.
li.
The data collected and stored is the absolute minimum necessary for the functionality of the service. There are
no plans to &ldquo;monetize&rdquo; this service, and storing the minimum amount of information means that the
data we have is not interesting to purchasers (or those who may have more nefarious purposes).
li Access to servers and backups is strictly controlled and monitored for unauthorized access attempts.
hr
h3 Removing Your Data
p.
At any time, you may choose to discontinue using this service. Both Microsoft and Google provide ways to revoke
access from this application. However, if you want your data removed from the database, please contact daniel at
bitbadger.solutions (via e-mail, replacing at with @) prior to doing so, to ensure we can determine which
subscriber ID belongs to you.
md-content(role='main').mpj-main-content
page-title(title='Privacy Policy'
hide-on-page=true)
md-card
md-card-header
.md-title Privacy Policy
.md-subhead as of May 21, 2018
md-card-content.mpj-full-page-card
p.
The nature of the service is one where privacy is a must. The items below will help you understand the data we
collect, access, and store on your behalf as you use this service.
hr
h3 Third Party Services
p.
myPrayerJournal utilizes a third-party authentication and identity provider. You should familiarize yourself
with the privacy policy for #[a(href='https://auth0.com/privacy' target='_blank') Auth0], as well as your
chosen provider (#[a(href='https://privacy.microsoft.com/en-us/privacystatement' target='_blank') Microsoft] or
#[a(href='https://policies.google.com/privacy' target='_blank') Google]).
hr
h3 What We Collect
h4 Identifying Data
ul
li.
The only identifying data myPrayerJournal stores is the subscriber (&ldquo;sub&rdquo;) field from the token we
receive from Auth0, once you have signed in through their hosted service. All information is associated with
you via this field.
li.
While you are signed in, within your browser, the service has access to your first and last names, along with
a URL to the profile picture (provided by your selected identity provider). This information is not
transmitted to the server, and is removed when &ldquo;Log Off&rdquo; is clicked.
h4 User Provided Data
ul
li.
myPrayerJournal stores the information you provide, including the text of prayer requests, updates, and notes;
and the date/time when certain actions are taken.
hr
h3 How Your Data Is Accessed / Secured
ul
li.
Your provided data is returned to you, as required, to display your journal or your answered requests. On the
server, it is stored in a controlled-access database.
li.
Your data is backed up, along with other Bit Badger Solutions hosted systems, in a rolling manner; backups are
preserved for the prior 7 days, and backups from the 1st and 15th are preserved for 3 months. These backups
are stored in a private cloud data repository.
li.
The data collected and stored is the absolute minimum necessary for the functionality of the service. There
are no plans to &ldquo;monetize&rdquo; this service, and storing the minimum amount of information means that
the data we have is not interesting to purchasers (or those who may have more nefarious purposes).
li Access to servers and backups is strictly controlled and monitored for unauthorized access attempts.
hr
h3 Removing Your Data
p.
At any time, you may choose to discontinue using this service. Both Microsoft and Google provide ways to revoke
access from this application. However, if you want your data removed from the database, please contact daniel at
bitbadger.solutions (via e-mail, replacing at with @) prior to doing so, to ensure we can determine which
subscriber ID belongs to you.
</template>

71
src/app/src/components/legal/TermsOfService.vue
View File

@ -1,35 +1,40 @@
<template lang="pug">
article
page-title(title='Terms of Service')
p: small: em (as of May 21, 2018)
h3 1. Acceptance of Terms
p.
By accessing this web site, you are agreeing to be bound by these Terms and Conditions, and that you are
responsible to ensure that your use of this site complies with all applicable laws. Your continued use of this
site implies your acceptance of these terms.
h3 2. Description of Service and Registration
p.
myPrayerJournal is a service that allows individuals to enter and amend their prayer requests. It requires no
registration by itself, but access is granted based on a successful login with an external identity provider. See
#[router-link(:to="{ name: 'PrivacyPolicy' }") our privacy policy] for details on how that information is accessed
and stored.
h3 3. Third Party Services
p.
This service utilizes a third-party service provider for identity management. Review the terms of service for
#[a(href='https://auth0.com/terms' target='_blank') Auth0], as well as those for the selected authorization
provider (#[a(href='https://www.microsoft.com/en-us/servicesagreement' target='_blank') Microsoft] or
#[a(href='https://policies.google.com/terms' target='_blank') Google]).
h3 4. Liability
p.
This service is provided "as is", and no warranty (express or implied) exists. The service and its developers may
not be held liable for any damages that may arise through the use of this service.
h3 5. Updates to Terms
p.
These terms and conditions may be updated at any time, and this service does not have the capability to notify
users when these change. The date at the top of the page will be updated when any of the text of these terms is
updated.
hr
p.
You may also wish to review our #[router-link(:to="{ name: 'PrivacyPolicy' }") privacy policy] to learn how we
handle your data.
md-content(role='main').mpj-main-content
page-title(title='Terms of Service'
hide-on-page=true)
md-card
md-card-header
.md-title Terms of Service
.md-subhead as of May 21, 2018
md-card-content.mpj-full-page-card
h3 1. Acceptance of Terms
p.
By accessing this web site, you are agreeing to be bound by these Terms and Conditions, and that you are
responsible to ensure that your use of this site complies with all applicable laws. Your continued use of this
site implies your acceptance of these terms.
h3 2. Description of Service and Registration
p.
myPrayerJournal is a service that allows individuals to enter and amend their prayer requests. It requires no
registration by itself, but access is granted based on a successful login with an external identity provider.
See #[router-link(:to="{ name: 'PrivacyPolicy' }") our privacy policy] for details on how that information is
accessed and stored.
h3 3. Third Party Services
p.
This service utilizes a third-party service provider for identity management. Review the terms of service for
#[a(href='https://auth0.com/terms' target='_blank') Auth0], as well as those for the selected authorization
provider (#[a(href='https://www.microsoft.com/en-us/servicesagreement' target='_blank') Microsoft] or
#[a(href='https://policies.google.com/terms' target='_blank') Google]).
h3 4. Liability
p.
This service is provided "as is", and no warranty (express or implied) exists. The service and its developers
may not be held liable for any damages that may arise through the use of this service.
h3 5. Updates to Terms
p.
These terms and conditions may be updated at any time, and this service does not have the capability to notify
users when these change. The date at the top of the page will be updated when any of the text of these terms is
updated.
hr
p.
You may also wish to review our #[router-link(:to="{ name: 'PrivacyPolicy' }") privacy policy] to learn how we
handle your data.
</template>

2
src/app/src/components/request/ActiveRequests.vue
View File

@ -7,7 +7,7 @@ md-content(role='main').mpj-main-content
md-icon='sentiment_dissatisfied'
md-label='No Active Requests'
md-description='Your prayer journal has no active requests')
md-button(:to="{ name: 'Journal' }").md-primary.md-raised Return to your journal
md-button(to='/journal').md-primary.md-raised Return to your journal
request-list(v-if='requests.length !== 0'
title='Active Requests'
:requests='requests')

2
src/app/src/components/request/AnsweredRequests.vue
View File

@ -1,5 +1,5 @@
<template lang="pug">
article.mpj-main-content(role='main')
md-content(role='main').mpj-main-content
page-title(title='Answered Requests'
hide-on-page=true)
template(v-if='loaded')

125
src/app/src/components/request/EditRequest.vue
View File

@ -1,71 +1,52 @@
<template lang="pug">
article.mpj-main-content(role='main')
md-content(role='main').mpj-narrow
page-title(:title='title')
.mpj-narrow
label(for='request_text')
| Prayer Request
br
textarea(v-model='form.requestText'
:rows='10'
@blur='trimText()'
autofocus).mpj-full-width
md-field
label(for='request_text') Prayer Request
md-textarea(v-model='form.requestText'
@blur='trimText()'
md-autogrow
autofocus).mpj-full-width
br
template(v-if='!isNew')
label Also Mark As
br
template(v-if='!isNew')
label Also Mark As
br
label.normal
input(v-model='form.status'
type='radio'
name='status'
value='Updated')
| Updated
| &nbsp; &nbsp;
label.normal
input(v-model='form.status'
type='radio'
name='status'
value='Prayed')
| Prayed
| &nbsp; &nbsp;
label.normal
input(v-model='form.status'
type='radio'
name='status'
value='Answered')
| Answered
br
label Recurrence
| &nbsp; &nbsp;
em.mpj-muted-text After prayer, request reappears...
md-radio(v-model='form.status'
value='Updated') Updated
md-radio(v-model='form.status'
value='Prayed') Prayed
md-radio(v-model='form.status'
value='Answered') Answered
br
label.normal
input(v-model='form.recur.typ'
type='radio'
name='recur'
value='Immediate')
| Immediately
| &nbsp; &nbsp;
label.normal
input(v-model='form.recur.typ'
type='radio'
name='recur'
value='other')
| Every...
input(v-model='form.recur.count'
type='number'
:disabled='!showRecurrence').mpj-recur-count
select(v-model='form.recur.other'
:disabled='!showRecurrence').mpj-recur-type
option(value='Hours') hours
option(value='Days') days
option(value='Weeks') weeks
.mpj-text-right
button(:disabled='!isValidRecurrence'
@click.stop='saveRequest()').primary.
#[md-icon save] Save
| &nbsp; &nbsp;
button(@click.stop='goBack()').
#[md-icon arrow_back] Cancel
label Recurrence
| &nbsp; &nbsp;
em.mpj-muted-text After prayer, request reappears...
br
.md-layout
.md-layout-item.md-size-30
md-radio(v-model='form.recur.typ'
value='Immediate') Immediately
.md-layout-item.md-size-20
md-radio(v-model='form.recur.typ'
value='other') Every...
.md-layout-item.md-size-10
md-field(md-inline)
label Count
md-input(v-model='form.recur.count'
type='number'
:disabled='!showRecurrence')
.md-layout-item.md-size-20
md-field
label Interval
md-select(v-model='form.recur.other'
:disabled='!showRecurrence')
md-option(value='Hours') hours
md-option(value='Days') days
md-option(value='Weeks') weeks
.mpj-text-right
md-button(:disabled='!isValidRecurrence'
@click.stop='saveRequest()').md-primary.md-raised #[md-icon save] Save
md-button(@click.stop='goBack()').md-raised #[md-icon arrow_back] Cancel
</template>
<script>
@ -133,7 +114,7 @@ export default {
this.title = 'Edit Prayer Request'
this.isNew = false
if (this.journal.length === 0) {
await this.$store.dispatch(actions.LOAD_JOURNAL, this.$Progress)
await this.$store.dispatch(actions.LOAD_JOURNAL, this.progress)
}
const req = this.journal.filter(r => r.requestId === this.id)[0]
this.form.requestId = this.id
@ -159,7 +140,7 @@ export default {
},
async ensureJournal () {
if (!Array.isArray(this.journal)) {
await this.$store.dispatch(actions.LOAD_JOURNAL, this.$Progress)
await this.$store.dispatch(actions.LOAD_JOURNAL, this.progress)
}
},
async saveRequest () {
@ -191,15 +172,3 @@ export default {
}
}
</script>
<style>
.mpj-recur-count {
width: 3rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.mpj-recur-type {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
</style>

38
src/app/src/components/request/FullRequest.vue
View File

@ -1,22 +1,24 @@
<template lang="pug">
article.mpj-main-content(role='main')
page-title(title='Full Prayer Request')
template(v-if='request')
p
span(v-if='isAnswered') Answered {{ formatDate(answered) }} (#[date-from-now(:value='answered')]) &nbsp;
small: em.mpj-muted-text prayed {{ prayedCount }} times, open {{ openDays }} days
p.mpj-request-text {{ lastText }}
br
table.mpj-request-log
thead
tr
th Action
th Update / Notes
tbody
tr(v-for='item in log' :key='item.asOf')
td {{ item.status }} on #[span.mpj-text-nowrap {{ formatDate(item.asOf) }}]
td(v-if='item.text').mpj-request-text {{ item.text }}
td(v-else) &nbsp;
md-content(role='main').mpj-main-content
page-title(title='Full Prayer Request'
hide-on-page=true)
md-card(v-if='request')
md-card-header
.md-title Full Prayer Request
.md-subhead
span(v-if='isAnswered') Answered {{ formatDate(answered) }} (#[date-from-now(:value='answered')]) !{' &bull; '}
| Prayed {{ prayedCount }} times &bull; Open {{ openDays }} days
md-card-content.mpj-full-page-card
p.mpj-request-text {{ lastText }}
md-table
md-table-row
md-table-head Action
md-table-head Update / Notes
md-table-row(v-for='item in log'
:key='item.asOf')
md-table-cell.mpj-valign-top {{ item.status }} on #[span.mpj-text-nowrap {{ formatDate(item.asOf) }}]
md-table-cell(v-if='item.text').mpj-request-text.mpj-valign-top {{ item.text }}
md-table-cell(v-else) &nbsp;
p(v-else) Loading request...
</template>

41
src/app/src/components/request/NotesEdit.vue
View File

@ -8,12 +8,8 @@ md-dialog(:md-active.sync='notesVisible').mpj-note-dialog
md-autogrow
@blur='trimText()')
md-dialog-actions
md-button(@click='saveNotes()').md-primary
md-icon save
= ' Save'
md-button(@click='closeDialog()')
md-icon undo
= ' Cancel'
md-button(@click='saveNotes()').md-primary #[md-icon save] Save
md-button(@click='closeDialog()') #[md-icon undo] Cancel
.mpj-dialog-content
div(v-if='hasPriorNotes')
p.mpj-text-center: strong Prior Notes for This Request
@ -26,8 +22,7 @@ md-dialog(:md-active.sync='notesVisible').mpj-note-dialog
div(v-else-if='noPriorNotes').mpj-text-center.mpj-muted-text There are no prior notes for this request
div(v-else).mpj-text-center
hr
md-button(@click='loadNotes()').
#[md-icon cloud_download] Load Prior Notes
md-button(@click='loadNotes()') #[md-icon cloud_download] Load Prior Notes
</template>
<script>
@ -108,22 +103,16 @@ export default {
}
</script>
<style>
.mpj-note-dialog {
width: 40rem;
padding-bottom: 1.5rem;
}
@media screen and (max-width: 40rem) {
@media screen and (max-width: 20rem) {
.mpj-note-dialog {
width: 100%;
}
}
.mpj-note-dialog {
width: 20rem;
}
}
.mpj-note-list p {
border-top: dotted 1px lightgray;
}
<style lang="sass">
.mpj-note-dialog
width: 40rem
padding-bottom: 1.5rem
@media screen and (max-width: 40rem)
@media screen and (max-width: 20rem)
.mpj-note-dialog
width: 100%
.mpj-note-dialog
width: 20rem
.mpj-note-list p
border-top: dotted 1px lightgray
</style>

64
src/app/src/components/request/RequestCard.vue
View File

@ -1,31 +1,27 @@
<template lang="pug">
md-card.mpj-request-card(v-if='shouldDisplay'
md-with-hover)
md-card(v-if='shouldDisplay'
md-with-hover).mpj-request-card
md-card-actions(md-alignment='space-between')
md-button.md-icon-button.md-raised.md-primary(@click='markPrayed()')
md-button(@click='markPrayed()').md-icon-button.md-raised.md-primary
md-icon done
md-tooltip(md-direction='top'
md-delay=1000) Mark as Prayed
span
md-button.md-icon-button.md-raised(@click.stop='showEdit()')
md-button(@click.stop='showEdit()').md-icon-button.md-raised
md-icon edit
md-tooltip(md-direction='top'
md-delay=1000) Edit Request
md-button.md-icon-button.md-raised(@click.stop='showNotes()')
md-button(@click.stop='showNotes()').md-icon-button.md-raised
md-icon comment
md-tooltip(md-direction='top'
md-delay=1000) Add Notes
md-button.md-icon-button.md-raised(@click.stop='snooze()')
md-button(@click.stop='snooze()').md-icon-button.md-raised
md-icon schedule
md-tooltip(md-direction='top'
md-delay=1000) Snooze Request
md-card-content
p.card-text.mpj-request-text
| {{ request.text }}
p.as-of.mpj-text-right: small.mpj-muted-text: em
= '(last activity '
date-from-now(:value='request.asOf')
| )
p.mpj-request-text {{ request.text }}
p.mpj-text-right: small.mpj-muted-text: em (last activity #[date-from-now(:value='request.asOf')])
</template>
<script>
@ -72,41 +68,11 @@ export default {
}
</script>
<style>
.mpj-request-card {
/* border: solid 1px darkgray;
border-radius: 5px; */
width: 20rem;
margin-bottom: 1rem;
/* margin: .5rem; */
}
@media screen and (max-width: 20rem) {
.mpj-request-card {
width: 100%;
}
}
/*
.mpj-card-header {
display: flex;
flex-flow: row;
justify-content: center;
background-image: -webkit-gradient(linear, left top, left bottom, from(lightgray), to(whitesmoke));
background-image: -webkit-linear-gradient(top, lightgray, whitesmoke);
background-image: -moz-linear-gradient(top, lightgray, whitesmoke);
background-image: linear-gradient(to bottom, lightgray, whitesmoke);
}
.mpj-card-header button {
margin: .25rem;
padding: 0 .25rem;
}
.mpj-card-header button .material-icons {
font-size: 1.3rem;
}
.mpj-request-card .card-text {
margin-left: 1rem;
margin-right: 1rem;
}
.mpj-request-card .as-of {
margin-right: .25rem;
} */
<style lang="sass">
.mpj-request-card
width: 20rem
margin-bottom: 1rem
@media screen and (max-width: 20rem)
.mpj-request-card
width: 100%
</style>

23
src/app/src/components/request/RequestListItem.vue
View File

@ -1,6 +1,6 @@
<template lang="pug">
md-table-row
md-table-cell.mpj-action-cell
md-table-cell.mpj-action-cell.mpj-valign-top
md-button(@click='viewFull').md-icon-button.md-raised
md-icon description
md-tooltip(md-direction='top'
@ -16,20 +16,16 @@ md-table-row
md-tooltip(md-direction='top'
md-delay=250) Cancel Snooze
template(v-if='isPending')
md-button(@click='showNow()').md-icon-button.md-rasied
md-button(@click='showNow()').md-icon-button.md-raised
md-icon restore
md-tooltip(md-direction='top'
md-delay=250) Show Now
md-table-cell.mpj-request-cell
p.mpj-request-text
| {{ request.text }}
md-table-cell.mpj-valign-top
p.mpj-request-text {{ request.text }}
br(v-if='isSnoozed || isPending || isAnswered')
small(v-if='isSnoozed').mpj-muted-text: em.
Snooze expires #[date-from-now(:value='request.snoozedUntil')]
small(v-if='isPending').mpj-muted-text: em.
Request scheduled to reappear #[date-from-now(:value='request.showAfter')]
small(v-if='isAnswered').mpj-muted-text: em.
Answered #[date-from-now(:value='request.asOf')]
small(v-if='isSnoozed').mpj-muted-text: em Snooze expires #[date-from-now(:value='request.snoozedUntil')]
small(v-if='isPending').mpj-muted-text: em Request appears next #[date-from-now(:value='request.showAfter')]
small(v-if='isAnswered').mpj-muted-text: em Answered #[date-from-now(:value='request.asOf')]
</template>
<script>
@ -96,9 +92,4 @@ export default {
.mpj-action-cell
width: 1%
white-space: nowrap
vertical-align: top
.mpj-request-cell
vertical-align: top
p
margin-top: 0
</style>

8
src/app/src/components/request/SnoozeRequest.vue
View File

@ -8,12 +8,8 @@ md-dialog(:md-active.sync='snoozeVisible').mpj-skinny
md-immediately)
md-dialog-actions
md-button(:disabled='!isValid'
@click='snoozeRequest()').md-primary
md-icon snooze
= ' Snooze'
md-button(@click='closeDialog()')
md-icon undo
= ' Cancel'
@click='snoozeRequest()').md-primary #[md-icon snooze] Snooze
md-button(@click='closeDialog()') #[md-icon undo] Cancel
</template>
<script>

2
src/app/src/components/request/SnoozedRequests.vue
View File

@ -7,7 +7,7 @@ article.mpj-main-content(role='main')
md-icon='sentiment_dissatisfied'
md-label='No Snoozed Requests'
md-description='Your prayer journal has no snoozed requests')
md-button(:to="{ name: 'Journal' }").md-primary.md-raised Return to your journal
md-button(to='/journal').md-primary.md-raised Return to your journal
request-list(v-if='requests.length !== 0'
title='Snoozed Requests'
:requests='requests')