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

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

@ -4,7 +4,7 @@
md-app-toolbar.md-large.md-dense.md-primary md-app-toolbar.md-large.md-dense.md-primary
.md-toolbar-row .md-toolbar-row
.md-toolbar-section-start .md-toolbar-section-start
span.md-title router-link(to='/').md-title
span(style='font-weight:100;') my span(style='font-weight:100;') my
span(style='font-weight:400;') Prayer span(style='font-weight:400;') Prayer
span(style='font-weight:700;') Journal span(style='font-weight:700;') Journal
@ -18,12 +18,13 @@
:md-duration='snackbar.interval' :md-duration='snackbar.interval'
ref='snackbar') ref='snackbar')
| {{ snackbar.message }} | {{ snackbar.message }}
footer
p.mpj-muted-text.mpj-text-right p.mpj-muted-text.mpj-text-right
| myPrayerJournal v{{ version }} | myPrayerJournal v{{ version }}
br br
em: small. em: small.
#[router-link(:to="{ name: 'PrivacyPolicy' }") Privacy Policy] • #[router-link(to='/legal/privacy-policy') Privacy Policy] •
#[router-link(:to="{ name: 'TermsOfService' }") Terms of Service] • #[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://github.com/bit-badger/myprayerjournal' target='_blank') Developed] and hosted by
#[a(href='https://bitbadger.solutions' target='_blank') Bit Badger Solutions] #[a(href='https://bitbadger.solutions' target='_blank') Bit Badger Solutions]
</template> </template>
@ -103,125 +104,31 @@ export default {
</script> </script>
<style lang="sass"> <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 html, body
// background-color: whitesmoke;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
font-size: 1rem 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 p
margin-bottom: 0 margin-bottom: 0
// input, textarea, select { footer
border-radius: .25rem; border-top: solid 1px lightgray
font-size: 1rem; margin: 1rem -1rem 0
} padding: 0 1rem
textarea { footer p
font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace; margin: 0
} .mpj-full-page-card
input, select { font-size: 1rem
font-family: inherit; line-height: 1.25rem
}
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;
}
.mpj-main-content .mpj-main-content
max-width: 60rem max-width: 60rem
margin: auto margin: auto
// .mpj-main-content-wide {
margin: .5rem;
}
@media screen and (max-width: 21rem) {
.mpj-main-content-wide {
margin: 0;
}
}
.mpj-request-text .mpj-request-text
white-space: pre-line white-space: pre-line
// .mpj-request-list p { p.mpj-request-text
border-top: solid 1px lightgray; margin-top: 0
}
.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);
}
.mpj-text-center .mpj-text-center
text-align: center text-align: center
.mpj-text-nowrap .mpj-text-nowrap
@ -230,6 +137,8 @@ p
text-align: right text-align: right
.mpj-muted-text .mpj-muted-text
color: rgba(0, 0, 0, .6) color: rgba(0, 0, 0, .6)
.mpj-valign-top
vertical-align: top
.mpj-narrow .mpj-narrow
max-width: 40rem max-width: 40rem
margin: auto margin: auto
@ -238,51 +147,6 @@ p
margin: auto margin: auto
.mpj-full-width .mpj-full-width
width: 100% 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 .md-progress-bar
margin: 24px margin: 24px
</style> </style>

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

@ -1,16 +1,16 @@
<template lang="pug"> <template lang="pug">
article.mpj-main-content(role='main') md-content(role='main').mpj-main-content
page-title(title='Welcome!' page-title(title='Welcome!'
hideOnPage=true) hideOnPage=true)
p &nbsp; p &nbsp;
p. p.
myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for them, 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. individuals to review their answered prayers.
p. p.
This site is currently in beta, but it is open and available to the general public. To get started, simply click This site is open and available to the general public. To get started, simply click the &ldquo;Log On&rdquo; link
the &ldquo;Log On&rdquo; link above, and log on with either a Microsoft or Google account. You can also learn more above, and log on with either a Microsoft or Google account. You can also learn more about the site at the
about the site at the &ldquo;Docs&rdquo; link, also above. &ldquo;Docs&rdquo; link, also above.
</template> </template>
<script> <script>

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

@ -1,5 +1,5 @@
<template lang="pug"> <template lang="pug">
article.mpj-main-content-wide(role='main') md-content(role='main').mpj-main-content-wide
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-else) template(v-else)
@ -7,13 +7,11 @@ article.mpj-main-content-wide(role='main')
md-icon='done_all' md-icon='done_all'
md-label='No Requests to Show' 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-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) template(v-else)
.mpj-text-center .mpj-text-center
md-button(:to="{ name: 'EditRequest', params: { id: 'new' } }" md-button(:to="{ name: 'EditRequest', params: { id: 'new' } }"
role='button').md-raised role='button').md-raised.md-accent #[md-icon add_box] Add a New Request
md-icon add_box
= ' Add a New Request'
br br
.mpj-journal .mpj-journal
request-card(v-for='request in journal' request-card(v-for='request in journal'
@ -72,14 +70,12 @@ export default {
} }
</script> </script>
<style> <style lang="sass">
.mpj-journal { .mpj-journal
display: flex; display: flex
flex-flow: row wrap; flex-flow: row wrap
justify-content: center; justify-content: center
align-items: flex-start; align-items: flex-start
} .mpj-dialog-content
.mpj-dialog-content { padding: 0 1rem
padding: 0 1rem;
}
</style> </style>

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

@ -1,32 +1,30 @@
<template lang="pug"> <template lang="pug">
.md-toolbar-row .md-toolbar-row
md-tabs.md-primary(md-sync-route) md-tabs(md-sync-route).md-primary
md-tab(md-label='Home'
:to="{ name: 'Home' }")#mpj-home
md-tab(v-if='isAuthenticated' md-tab(v-if='isAuthenticated'
md-label='Journal' md-label='Journal'
:to="{ name: 'Journal' }")#mpj-journal to='/journal')
md-tab(v-if='isAuthenticated' md-tab(v-if='isAuthenticated'
md-label='Active' md-label='Active'
:to="{ name: 'ActiveRequests' }")#mpj-active to='/requests/active')
md-tab(v-if='hasSnoozed' md-tab(v-if='hasSnoozed'
md-label='Snoozed' md-label='Snoozed'
:to="{ name: 'SnoozedRequests' }")#mpj-snoozed to='/requests/snoozed')
md-tab(v-if='isAuthenticated' md-tab(v-if='isAuthenticated'
md-label='Answered' md-label='Answered'
:to="{ name: 'AnsweredRequests' }")#mpj-answered to='/requests/answered')
md-tab(v-if='isAuthenticated' md-tab(v-if='isAuthenticated'
md-label='Log Off' md-label='Log Off'
href='#' href='#'
@click.stop='logOff()')#mpj-log-off @click.stop='logOff()')
md-tab(v-if='!isAuthenticated' md-tab(v-if='!isAuthenticated'
md-label='Log On' md-label='Log On'
href='#' href='#'
@click.stop='logOn()')#mpj-log-on @click.stop='logOn()')
md-tab(md-label='Docs' md-tab(md-label='Docs'
href='https://docs.prayerjournal.me' href='https://docs.prayerjournal.me'
target='_blank' target='_blank'
@click.stop='')#mpj-docs @click.stop='')
</template> </template>
<script> <script>
@ -61,34 +59,3 @@ export default {
} }
} }
</script> </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"> <template lang="pug">
h1.md-title(v-if='!hideOnPage' h1(v-if='!hideOnPage'
v-html='title') v-html='title').md-title
</template> </template>
<script> <script>

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

@ -1,16 +1,21 @@
<template lang="pug"> <template lang="pug">
article md-content(role='main').mpj-main-content
page-title(title='Privacy Policy') page-title(title='Privacy Policy'
p: small: em (as of May 21, 2018) 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. p.
The nature of the service is one where privacy is a must. The items below will help you understand the data we 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. collect, access, and store on your behalf as you use this service.
hr hr
h3 Third Party Services h3 Third Party Services
p. p.
myPrayerJournal utilizes a third-party authentication and identity provider. You should familiarize yourself with myPrayerJournal utilizes a third-party authentication and identity provider. You should familiarize yourself
the privacy policy for #[a(href='https://auth0.com/privacy' target='_blank') Auth0], as well as your chosen provider with the privacy policy for #[a(href='https://auth0.com/privacy' target='_blank') Auth0], as well as your
(#[a(href='https://privacy.microsoft.com/en-us/privacystatement' target='_blank') Microsoft] or 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]). #[a(href='https://policies.google.com/privacy' target='_blank') Google]).
hr hr
h3 What We Collect h3 What We Collect
@ -18,12 +23,12 @@ article
ul ul
li. li.
The only identifying data myPrayerJournal stores is the subscriber (&ldquo;sub&rdquo;) field from the token we 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 receive from Auth0, once you have signed in through their hosted service. All information is associated with
via this field. you via this field.
li. li.
While you are signed in, within your browser, the service has access to your first and last names, along with a While you are signed in, within your browser, the service has access to your first and last names, along with
URL to the profile picture (provided by your selected identity provider). This information is not transmitted to a URL to the profile picture (provided by your selected identity provider). This information is not
the server, and is removed when &ldquo;Log Off&rdquo; is clicked. transmitted to the server, and is removed when &ldquo;Log Off&rdquo; is clicked.
h4 User Provided Data h4 User Provided Data
ul ul
li. li.
@ -33,16 +38,16 @@ article
h3 How Your Data Is Accessed / Secured h3 How Your Data Is Accessed / Secured
ul ul
li. li.
Your provided data is returned to you, as required, to display your journal or your answered requests. Your provided data is returned to you, as required, to display your journal or your answered requests. On the
On the server, it is stored in a controlled-access database. server, it is stored in a controlled-access database.
li. li.
Your data is backed up, along with other Bit Badger Solutions hosted systems, in a rolling manner; backups are 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 preserved for the prior 7 days, and backups from the 1st and 15th are preserved for 3 months. These backups
stored in a private cloud data repository. are stored in a private cloud data repository.
li. li.
The data collected and stored is the absolute minimum necessary for the functionality of the service. There are The data collected and stored is the absolute minimum necessary for the functionality of the service. There
no plans to &ldquo;monetize&rdquo; this service, and storing the minimum amount of information means that the are no plans to &ldquo;monetize&rdquo; this service, and storing the minimum amount of information means that
data we have is not interesting to purchasers (or those who may have more nefarious purposes). 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. li Access to servers and backups is strictly controlled and monitored for unauthorized access attempts.
hr hr
h3 Removing Your Data h3 Removing Your Data

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

@ -1,7 +1,12 @@
<template lang="pug"> <template lang="pug">
article md-content(role='main').mpj-main-content
page-title(title='Terms of Service') page-title(title='Terms of Service'
p: small: em (as of May 21, 2018) 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 h3 1. Acceptance of Terms
p. p.
By accessing this web site, you are agreeing to be bound by these Terms and Conditions, and that you are By accessing this web site, you are agreeing to be bound by these Terms and Conditions, and that you are
@ -10,9 +15,9 @@ article
h3 2. Description of Service and Registration h3 2. Description of Service and Registration
p. p.
myPrayerJournal is a service that allows individuals to enter and amend their prayer requests. It requires no 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 registration by itself, but access is granted based on a successful login with an external identity provider.
#[router-link(:to="{ name: 'PrivacyPolicy' }") our privacy policy] for details on how that information is accessed See #[router-link(:to="{ name: 'PrivacyPolicy' }") our privacy policy] for details on how that information is
and stored. accessed and stored.
h3 3. Third Party Services h3 3. Third Party Services
p. p.
This service utilizes a third-party service provider for identity management. Review the terms of service for This service utilizes a third-party service provider for identity management. Review the terms of service for
@ -21,8 +26,8 @@ article
#[a(href='https://policies.google.com/terms' target='_blank') Google]). #[a(href='https://policies.google.com/terms' target='_blank') Google]).
h3 4. Liability h3 4. Liability
p. p.
This service is provided "as is", and no warranty (express or implied) exists. The service and its developers may This service is provided "as is", and no warranty (express or implied) exists. The service and its developers
not be held liable for any damages that may arise through the use of this service. may not be held liable for any damages that may arise through the use of this service.
h3 5. Updates to Terms h3 5. Updates to Terms
p. p.
These terms and conditions may be updated at any time, and this service does not have the capability to notify These terms and conditions may be updated at any time, and this service does not have the capability to notify

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-icon='sentiment_dissatisfied'
md-label='No Active Requests' md-label='No Active Requests'
md-description='Your prayer journal has 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' request-list(v-if='requests.length !== 0'
title='Active Requests' title='Active Requests'
:requests='requests') :requests='requests')

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

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

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

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

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

@ -1,22 +1,24 @@
<template lang="pug"> <template lang="pug">
article.mpj-main-content(role='main') md-content(role='main').mpj-main-content
page-title(title='Full Prayer Request') page-title(title='Full Prayer Request'
template(v-if='request') hide-on-page=true)
p md-card(v-if='request')
span(v-if='isAnswered') Answered {{ formatDate(answered) }} (#[date-from-now(:value='answered')]) &nbsp; md-card-header
small: em.mpj-muted-text prayed {{ prayedCount }} times, open {{ openDays }} days .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 }} p.mpj-request-text {{ lastText }}
br md-table
table.mpj-request-log md-table-row
thead md-table-head Action
tr md-table-head Update / Notes
th Action md-table-row(v-for='item in log'
th Update / Notes :key='item.asOf')
tbody md-table-cell.mpj-valign-top {{ item.status }} on #[span.mpj-text-nowrap {{ formatDate(item.asOf) }}]
tr(v-for='item in log' :key='item.asOf') md-table-cell(v-if='item.text').mpj-request-text.mpj-valign-top {{ item.text }}
td {{ item.status }} on #[span.mpj-text-nowrap {{ formatDate(item.asOf) }}] md-table-cell(v-else) &nbsp;
td(v-if='item.text').mpj-request-text {{ item.text }}
td(v-else) &nbsp;
p(v-else) Loading request... p(v-else) Loading request...
</template> </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 md-autogrow
@blur='trimText()') @blur='trimText()')
md-dialog-actions md-dialog-actions
md-button(@click='saveNotes()').md-primary md-button(@click='saveNotes()').md-primary #[md-icon save] Save
md-icon save md-button(@click='closeDialog()') #[md-icon undo] Cancel
= ' Save'
md-button(@click='closeDialog()')
md-icon undo
= ' Cancel'
.mpj-dialog-content .mpj-dialog-content
div(v-if='hasPriorNotes') div(v-if='hasPriorNotes')
p.mpj-text-center: strong Prior Notes for This Request 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-if='noPriorNotes').mpj-text-center.mpj-muted-text There are no prior notes for this request
div(v-else).mpj-text-center div(v-else).mpj-text-center
hr hr
md-button(@click='loadNotes()'). md-button(@click='loadNotes()') #[md-icon cloud_download] Load Prior Notes
#[md-icon cloud_download] Load Prior Notes
</template> </template>
<script> <script>
@ -108,22 +103,16 @@ export default {
} }
</script> </script>
<style> <style lang="sass">
.mpj-note-dialog { .mpj-note-dialog
width: 40rem; width: 40rem
padding-bottom: 1.5rem; padding-bottom: 1.5rem
} @media screen and (max-width: 40rem)
@media screen and (max-width: 40rem) { @media screen and (max-width: 20rem)
@media screen and (max-width: 20rem) { .mpj-note-dialog
.mpj-note-dialog { width: 100%
width: 100%; .mpj-note-dialog
} width: 20rem
} .mpj-note-list p
.mpj-note-dialog { border-top: dotted 1px lightgray
width: 20rem;
}
}
.mpj-note-list p {
border-top: dotted 1px lightgray;
}
</style> </style>

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

@ -1,31 +1,27 @@
<template lang="pug"> <template lang="pug">
md-card.mpj-request-card(v-if='shouldDisplay' md-card(v-if='shouldDisplay'
md-with-hover) md-with-hover).mpj-request-card
md-card-actions(md-alignment='space-between') 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-icon done
md-tooltip(md-direction='top' md-tooltip(md-direction='top'
md-delay=1000) Mark as Prayed md-delay=1000) Mark as Prayed
span 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-icon edit
md-tooltip(md-direction='top' md-tooltip(md-direction='top'
md-delay=1000) Edit Request 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-icon comment
md-tooltip(md-direction='top' md-tooltip(md-direction='top'
md-delay=1000) Add Notes 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-icon schedule
md-tooltip(md-direction='top' md-tooltip(md-direction='top'
md-delay=1000) Snooze Request md-delay=1000) Snooze Request
md-card-content md-card-content
p.card-text.mpj-request-text p.mpj-request-text {{ request.text }}
| {{ request.text }} p.mpj-text-right: small.mpj-muted-text: em (last activity #[date-from-now(:value='request.asOf')])
p.as-of.mpj-text-right: small.mpj-muted-text: em
= '(last activity '
date-from-now(:value='request.asOf')
| )
</template> </template>
<script> <script>
@ -72,41 +68,11 @@ export default {
} }
</script> </script>
<style> <style lang="sass">
.mpj-request-card { .mpj-request-card
/* border: solid 1px darkgray; width: 20rem
border-radius: 5px; */ margin-bottom: 1rem
width: 20rem; @media screen and (max-width: 20rem)
margin-bottom: 1rem; .mpj-request-card
/* margin: .5rem; */ width: 100%
}
@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> </style>

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

@ -1,6 +1,6 @@
<template lang="pug"> <template lang="pug">
md-table-row 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-button(@click='viewFull').md-icon-button.md-raised
md-icon description md-icon description
md-tooltip(md-direction='top' md-tooltip(md-direction='top'
@ -16,20 +16,16 @@ md-table-row
md-tooltip(md-direction='top' md-tooltip(md-direction='top'
md-delay=250) Cancel Snooze md-delay=250) Cancel Snooze
template(v-if='isPending') 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-icon restore
md-tooltip(md-direction='top' md-tooltip(md-direction='top'
md-delay=250) Show Now md-delay=250) Show Now
md-table-cell.mpj-request-cell md-table-cell.mpj-valign-top
p.mpj-request-text p.mpj-request-text {{ request.text }}
| {{ request.text }}
br(v-if='isSnoozed || isPending || isAnswered') br(v-if='isSnoozed || isPending || isAnswered')
small(v-if='isSnoozed').mpj-muted-text: em. small(v-if='isSnoozed').mpj-muted-text: em Snooze expires #[date-from-now(:value='request.snoozedUntil')]
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='isPending').mpj-muted-text: em. small(v-if='isAnswered').mpj-muted-text: em Answered #[date-from-now(:value='request.asOf')]
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')]
</template> </template>
<script> <script>
@ -96,9 +92,4 @@ export default {
.mpj-action-cell .mpj-action-cell
width: 1% width: 1%
white-space: nowrap white-space: nowrap
vertical-align: top
.mpj-request-cell
vertical-align: top
p
margin-top: 0
</style> </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-immediately)
md-dialog-actions md-dialog-actions
md-button(:disabled='!isValid' md-button(:disabled='!isValid'
@click='snoozeRequest()').md-primary @click='snoozeRequest()').md-primary #[md-icon snooze] Snooze
md-icon snooze md-button(@click='closeDialog()') #[md-icon undo] Cancel
= ' Snooze'
md-button(@click='closeDialog()')
md-icon undo
= ' Cancel'
</template> </template>
<script> <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-icon='sentiment_dissatisfied'
md-label='No Snoozed Requests' md-label='No Snoozed Requests'
md-description='Your prayer journal has 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' request-list(v-if='requests.length !== 0'
title='Snoozed Requests' title='Snoozed Requests'
:requests='requests') :requests='requests')