diff options
| -rw-r--r-- | src/actions/app.js | 16 | ||||
| -rw-r--r-- | src/actions/firebaseFirestore.js | 37 | ||||
| -rw-r--r-- | src/components/forum-element.js | 88 | ||||
| -rw-r--r-- | src/components/mao-admin.js | 2 | ||||
| -rw-r--r-- | src/components/mao-forums.js | 71 |
5 files changed, 142 insertions, 72 deletions
diff --git a/src/actions/app.js b/src/actions/app.js index ef3f18e..aecefc4 100644 --- a/src/actions/app.js +++ b/src/actions/app.js @@ -26,8 +26,9 @@ export const navigate = (path) => (dispatch) => { dispatch(updateDrawerState(false)); }; -import { snapshotForums } from './firebaseFirestore.js'; -var hasSubscribedPosts = false; +import {snapshotForums} from './firebaseFirestore.js'; + +var isSubscribedForums = false; const loadPage = (page) => (dispatch) => { switch(page) { @@ -44,12 +45,11 @@ const loadPage = (page) => (dispatch) => { break; case 'forums': - import('../components/mao-forums.js').then((module) => { - if(!hasSubscribedPosts) { - dispatch(snapshotForums()); - hasSubscribedPosts = true; - } - }); + import('../components/mao-forums.js'); + if(!isSubscribedForums) { + dispatch(snapshotForums()); + isSubscribedForums = true; + } break; case 'account': diff --git a/src/actions/firebaseFirestore.js b/src/actions/firebaseFirestore.js index 636c944..feea51e 100644 --- a/src/actions/firebaseFirestore.js +++ b/src/actions/firebaseFirestore.js @@ -93,16 +93,8 @@ export const snapshotForums = () => (dispatch) => { docRef.onSnapshot((query) => { var forumPosts = []; query.forEach((doc) => { - var comments = []; - docRef.doc(doc.id).collection('comments') - .onSnapshot((queryComments)=> { - queryComments.forEach((comment) => { - comments.push(comment.data()); - }); - }); forumPosts.push({ ...doc.data(), - comments, postId: doc.id }); }); @@ -204,7 +196,8 @@ export const createForumPost = (_subject, _content) => (dispatch, getState) => { docRef.add({ email: userEmail, subject: _subject, - content: _content + content: _content, + day: new Date() }).then(()=> { alert("Successfuly posted forum with subject " + _subject + "."); }).catch((error) => { @@ -213,20 +206,24 @@ export const createForumPost = (_subject, _content) => (dispatch, getState) => { } } -export const createComment = (postId, subject, content) => (dispatch, getState) => { +export const createComment = (postId, content) => (dispatch, getState) => { if(getState().app.offline) { alert("Failed to create comment post. Please establish internet connection.") } else { - var docRef = firestore.collection('posts').doc(postId).collection('comments'); - var user = getState().firebaseAuth.userEmail.replace('@communityschoolnaples.org', ''); - docRef.add({ - subject, - content, - user, - date: new Date() - }).then(()=> { - alert("Successfuly posted comment."); - }).catch((error) => { + var docRef = firestore.collection('posts').doc(postId); + docRef.get().then((doc) => { + var comments = doc.data().comments ? doc.data().comments : []; + comments.push({ + content, + user : getState().firebaseAuth.userEmail.replace('@communityschoolnaples.org', ''), + date: new Date() + }); + console.log(comments); + docRef.update({ + comments + }); + }) + .catch((error) => { alert(error); }); } diff --git a/src/components/forum-element.js b/src/components/forum-element.js index 1c2585b..3177892 100644 --- a/src/components/forum-element.js +++ b/src/components/forum-element.js @@ -38,7 +38,8 @@ class ForumElement extends connect(store)(LitElement) { } .card-content > h4 { - text-align: right; + display: grid; + grid-template-columns: 1fr 1fr; font-weight: lighter; font-style: italic; word-break: break-all; @@ -57,6 +58,25 @@ class ForumElement extends connect(store)(LitElement) { margin-top: 5px; } + .comment-title { + text-align: center; + } + + .comment-author { + text-align: center; + font-weight: lighter; + font-style: italic; + word-break: break-all; + } + + .forum-date { + text-align: left; + } + + .forum-author { + text-align: right; + } + @media (min-width: 460px) { .button-grid { grid-template-columns: 1fr 1fr; @@ -76,28 +96,26 @@ class ForumElement extends connect(store)(LitElement) { <paper-card elevation="0"> <div class="card-content"> - <h4>${props.author}</h4> + <h4><span class="forum-date">${props.day ? props.day.toDate().toLocaleDateString("en-US"): ""}</span><span class="forum-author">${props.author}</span></h4> <h3>${props.subject}</h3> <p>${props.content}</p> </div> <div class="card-actions"> <div class="button-grid"> - <paper-button class="info" onclick="${() => this.showComments = !this.showComments}">Show Comments</paper-button> - <paper-button class="alert" onclick="${() => this.postComment = !this.postComment}">${this.postComment? "Hide Draft" : "Post Comment"}</paper-button> + <paper-button hidden=${props.comments.length == 0} class="info" onclick="${() => this.showComments = !this.showComments}">${this.showComments? "Hide Comments" : "Show Comments"}</paper-button> + <paper-button hidden=${!props.signedIn} class="alert" onclick="${() => this.postComment = !this.postComment}">${this.postComment? "Hide Draft" : "Post Comment"}</paper-button> </div> <div hidden="${!props.postComment}"> <hr> - <paper-input label="Comment Subject" id="comment-subject-field"></paper-input> <paper-textarea label="Comment Content" id="comment-content-field"></paper-textarea> <paper-button raised class="success" onclick="${() => this.submitComment()}">Submit Comment</paper-comment> </div> <div hidden="${!props.showComments}"> <hr hidden="${!props.showComments && !props.postComment}"> - <h4>Comments</h4> - - </div> + <h4 class="comment-title">Comments</h4> + <div id="comment-area"></div> </div> </div> </paper-card> @@ -110,6 +128,7 @@ class ForumElement extends connect(store)(LitElement) { author: String, subject: String, content: String, + day: Date, postId: String, comments: Array, @@ -122,13 +141,16 @@ class ForumElement extends connect(store)(LitElement) { this.signedIn = state.firebaseAuth.signedIn; } + _firstRendered() { + this.updateComments(); + } + constructor() { super(); this.signedIn = false; this.author = ""; - this.subject = ""; this.content = ""; this.postId = ""; @@ -139,23 +161,37 @@ class ForumElement extends connect(store)(LitElement) { } submitComment() { - var commentSubject = this.shadowRoot.getElementById('comment-subject-field'); - var commentContent = this.shadowRoot.getElementById('comment-content-field'); - //commentContent.value.replace('\n','<br>') - if( commentSubject && - commentSubject.value.trim().length > 0 && - commentContent.value.trim().length > 0) { - if(confirm('Are you sure you want to submit this comment on ' + this.author + "'s post about " + this.subject + '?')) { - store.dispatch(createComment(this.postId, commentSubject.value, commentContent.value)); - - commentSubject.value = ""; - commentContent.value = ""; - } - } else { - console.log(this.comments); - alert('Please fill out comment subject and content fields.'); - } - + var commentContent = this.shadowRoot.getElementById('comment-content-field'); + if( commentContent && + commentContent.value.trim().length > 0) { + if(confirm('Are you sure you want to submit this comment on ' + this.author + "'s post about " + this.subject + '?')) { + store.dispatch(createComment(this.postId, commentContent.value.replace('\n','<br>'))); + commentContent.value = ""; + } + } else { + alert('Please fill out comment subject and content fields.'); + } + } + + updateComments() { + var commentArea = this.shadowRoot.getElementById('comment-area'); + commentArea.innerHTML = ""; + + for(var i = this.comments.length-1; i >= 0; i--) { + var commentElement = document.createElement('div'); + + var authorElement = document.createElement('h4'); + authorElement.classList.add('comment-author'); + authorElement.innerHTML = this.comments[i].user; + + var contentElement = document.createElement('p'); + contentElement.innerHTML = this.comments[i].content; + + commentElement.appendChild(authorElement); + commentElement.appendChild(contentElement); + + commentArea.appendChild(commentElement); + } } } diff --git a/src/components/mao-admin.js b/src/components/mao-admin.js index 0e8825e..a8e7435 100644 --- a/src/components/mao-admin.js +++ b/src/components/mao-admin.js @@ -73,7 +73,7 @@ class MaoAdmin extends connect(store)(PageViewElement) { <div class="main-grid"> <paper-button raised class="info" id="toggleRequestsBtn" on-tap="${() => this.toggleRequests()}">Show Hours Requests</paper-button> <paper-button raised class="info" id="toggleRegistryBtn" on-tap="${() => this.toggleRegistry()}">Show Competitions And Registry</paper-button> - <paper-button raised class="info" id="toggleRegistryBtn" on-tap="${() => this.usersHidden = !this.usersHidden}">Show User Data</paper-button> + <paper-button raised class="info" id="toggleRegistryBtn" on-tap="${() => props.usersHidden = !props.usersHidden}">${props.usersHidden ? 'Show User Data' : 'Hide User Data'}</paper-button> </div> <br/> diff --git a/src/components/mao-forums.js b/src/components/mao-forums.js index 1d1b5f6..b7631d2 100644 --- a/src/components/mao-forums.js +++ b/src/components/mao-forums.js @@ -16,7 +16,7 @@ import { connect } from 'pwa-helpers/connect-mixin.js'; import { store } from '../store.js'; //These are the actions needed by this element. -import { createForumPost } from '../actions/firebaseFirestore.js'; +import { createForumPost, snapshotForums } from '../actions/firebaseFirestore.js'; // These are the shared styles needed by this element. import { SharedStyles } from './shared-styles.js'; @@ -34,7 +34,7 @@ import '@polymer/paper-button/paper-button.js'; import '@vaadin/vaadin-date-picker/vaadin-date-picker.js'; //import local customElements -import './forum-element.js' +import './forum-element.js'; class MaoForums extends connect(store)(PageViewElement) { _render(props) { @@ -44,6 +44,37 @@ class MaoForums extends connect(store)(PageViewElement) { <style> + paper-card { + display: block; + padding-bottom: 3px; + } + + paper-button { + display: block; + margin-left: auto; + margin-right: auto; + } + + .button-grid { + display: grid; + grid-template-rows: 1fr; + } + + .card-content > h4 { + text-align: right; + font-weight: lighter; + font-style: italic; + word-break: break-all; + } + + .card-content > h3 { + word-break: break-all; + } + + .card-content > h3, p { + text-align: center; + } + .post-grid { display: grid; grid-gap: 10px; @@ -104,18 +135,25 @@ class MaoForums extends connect(store)(PageViewElement) { super(); this.onceOnline = false; + this.forumPosts = []; + this.signedIn = false; } _stateChanged(state) { this.signedIn = state.firebaseAuth .signedIn; this.forumPosts = state.firebaseFirestore .forumPosts; - this.updateSection(); - + if(this.shadowRoot) { + this.updateSection(); + } + if(!state.app.offline) { this.onceOnline = true; } } + _firstRendered() { + } + submitForum() { if(this.shadowRoot) { var subjectElement = this.shadowRoot.getElementById('subject-field'); @@ -132,7 +170,7 @@ class MaoForums extends connect(store)(PageViewElement) { alert("Please fill out all fields when creating a form post."); } else { if(confirm('Are you sure you want to submit this to the forum page? It will be public to everyone.')) { - store.dispatch(createForumPost(subjectElement.value, contentElement.value)); + store.dispatch(createForumPost(subjectElement.value, contentElement.value.replace('\n','<br>'))); subjectElement.value = ""; contentElement.value = ""; @@ -143,22 +181,21 @@ class MaoForums extends connect(store)(PageViewElement) { } updateSection() { - if(this.shadowRoot) { - var postsGrid = this.shadowRoot.getElementById('posts-grid'); - postsGrid.innerHTML = ""; + var postsGrid = this.shadowRoot.getElementById('posts-grid'); + postsGrid.innerHTML = ""; - for(var i = this.forumPosts.length-1; i >=0; i--) { - var forumElement = document.createElement('forum-element'); + for(var i = this.forumPosts.length-1; i >=0; i--) { + var forumElement = document.createElement('forum-element'); - forumElement.author = this.forumPosts[i].email .replace('@communityschoolnaples.org', ''); - forumElement.subject = this.forumPosts[i].subject; - forumElement.content = this.forumPosts[i].content; - forumElement.postId = this.forumPosts[i].postId; - forumElement.comments = this.forumPosts[i].comments; + forumElement.author = this.forumPosts[i].email .replace('@communityschoolnaples.org', ''); + forumElement.subject = this.forumPosts[i].subject; + forumElement.content = this.forumPosts[i].content; + forumElement.day = this.forumPosts[i].day; + forumElement.postId = this.forumPosts[i].postId; + forumElement.comments = this.forumPosts[i].comments ? this.forumPosts[i].comments : []; - postsGrid.appendChild(forumElement); + postsGrid.appendChild(forumElement); } - } } } |