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-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,14 +18,15 @@
:md-duration='snackbar.interval' :md-duration='snackbar.interval'
ref='snackbar') ref='snackbar')
| {{ snackbar.message }} | {{ snackbar.message }}
p.mpj-muted-text.mpj-text-right footer
| myPrayerJournal v{{ version }} p.mpj-muted-text.mpj-text-right
br | myPrayerJournal v{{ version }}
em: small. br
#[router-link(:to="{ name: 'PrivacyPolicy' }") Privacy Policy] • em: small.
#[router-link(:to="{ name: 'TermsOfService' }") Terms of Service] • #[router-link(to='/legal/privacy-policy') Privacy Policy] •
#[a(href='https://github.com/bit-badger/myprayerjournal' target='_blank') Developed] and hosted by #[router-link(to='/legal/terms-of-service') Terms of Service] •
#[a(href='https://bitbadger.solutions' target='_blank') Bit Badger Solutions] #[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> </template>
<script> <script>
@ -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>

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

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

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

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

125
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 @blur='trimText()'
textarea(v-model='form.requestText' md-autogrow
:rows='10' autofocus).mpj-full-width
@blur='trimText()' br
autofocus).mpj-full-width template(v-if='!isNew')
label Also Mark As
br br
template(v-if='!isNew') md-radio(v-model='form.status'
label Also Mark As value='Updated') Updated
br md-radio(v-model='form.status'
label.normal value='Prayed') Prayed
input(v-model='form.status' md-radio(v-model='form.status'
type='radio' value='Answered') Answered
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...
br br
label.normal label Recurrence
input(v-model='form.recur.typ' | &nbsp; &nbsp;
type='radio' em.mpj-muted-text After prayer, request reappears...
name='recur' br
value='Immediate') .md-layout
| Immediately .md-layout-item.md-size-30
| &nbsp; &nbsp; md-radio(v-model='form.recur.typ'
label.normal value='Immediate') Immediately
input(v-model='form.recur.typ' .md-layout-item.md-size-20
type='radio' md-radio(v-model='form.recur.typ'
name='recur' value='other') Every...
value='other') .md-layout-item.md-size-10
| Every... md-field(md-inline)
input(v-model='form.recur.count' label Count
type='number' md-input(v-model='form.recur.count'
:disabled='!showRecurrence').mpj-recur-count type='number'
select(v-model='form.recur.other' :disabled='!showRecurrence')
:disabled='!showRecurrence').mpj-recur-type .md-layout-item.md-size-20
option(value='Hours') hours md-field
option(value='Days') days label Interval
option(value='Weeks') weeks md-select(v-model='form.recur.other'
.mpj-text-right :disabled='!showRecurrence')
button(:disabled='!isValidRecurrence' md-option(value='Hours') hours
@click.stop='saveRequest()').primary. md-option(value='Days') days
#[md-icon save] Save md-option(value='Weeks') weeks
| &nbsp; &nbsp; .mpj-text-right
button(@click.stop='goBack()'). md-button(:disabled='!isValidRecurrence'
#[md-icon arrow_back] Cancel @click.stop='saveRequest()').md-primary.md-raised #[md-icon save] Save
md-button(@click.stop='goBack()').md-raised #[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>

38
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
p.mpj-request-text {{ lastText }} .md-subhead
br span(v-if='isAnswered') Answered {{ formatDate(answered) }} (#[date-from-now(:value='answered')]) !{' &bull; '}
table.mpj-request-log | Prayed {{ prayedCount }} times &bull; Open {{ openDays }} days
thead md-card-content.mpj-full-page-card
tr p.mpj-request-text {{ lastText }}
th Action md-table
th Update / Notes md-table-row
tbody md-table-head Action
tr(v-for='item in log' :key='item.asOf') md-table-head Update / Notes
td {{ item.status }} on #[span.mpj-text-nowrap {{ formatDate(item.asOf) }}] md-table-row(v-for='item in log'
td(v-if='item.text').mpj-request-text {{ item.text }} :key='item.asOf')
td(v-else) &nbsp; 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... 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')