diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/forum-element.js | 137 | ||||
| -rw-r--r-- | src/components/mao-forums.js | 53 |
2 files changed, 145 insertions, 45 deletions
diff --git a/src/components/forum-element.js b/src/components/forum-element.js new file mode 100644 index 0000000..138cc6a --- /dev/null +++ b/src/components/forum-element.js @@ -0,0 +1,137 @@ +/** +@license +Copyright (c) 2018 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +*/ + +import { LitElement, html } from '@polymer/lit-element'; +import { connect } from 'pwa-helpers/connect-mixin.js'; + +// This element is connected to the Redux store. +import { store } from '../store.js'; + +//These are the actions needed by this element. +import { adminApproveHours, adminRejectHours } from '../actions/firebaseAdmin.js'; + +// Import button styles +import { ButtonSharedStyles } from './button-shared-styles.js'; + +class ForumElement extends connect(store)(LitElement) { + _render(props) { + return html` + ${ButtonSharedStyles} + + <style> + + paper-card { + display: block; + padding-bottom: 3px; + } + + .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; + } + + .success { + width: 100%; + margin-top: 5px; + } + + @media (min-width: 460px) { + .button-grid { + grid-template-columns: 1fr 1fr; + } + + #comment-subject-field { + margin-left: auto; + margin-right: auto; + text-align: center; + width: 50%; + } + } + + + </style> + + <paper-card + elevation="0"> + <div class="card-content"> + <h4>${props.author}</h4> + <h3>${props.subject}</h3> + <p>${props.content}</p> + </div> + <div class="card-actions"> + <div class="button-grid"> + <paper-button class="info" raised onclick="${() => this.showComments = !this.showComments}">Show Comments</paper-button> + <paper-button raised 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 class="success">Submit Comment</paper-comment> + </div> + + <div hidden="${!props.showComments}"> + <hr hidden="${!props.showComments && !props.postComment}"> + <h4>Comments</h4> + + </div> + </div> + </div> + </paper-card> + `; + } + + static get properties() { return { + signedIn: Boolean, + + author: String, + subject: String, + content: String, + + showComments: Boolean, + postComment: Boolean + }}; + + _stateChanged(state) { + this.signedIn = state.firebaseAuth.signedIn; + } + + constructor() { + super(); + + this.signedIn = false; + + this.author = ""; + this.subject = ""; + this.content = ""; + + this.showComments = false; + this.postComment = false; + } + +} + +window.customElements.define('forum-element', ForumElement); diff --git a/src/components/mao-forums.js b/src/components/mao-forums.js index 0b2a4af..b85fa26 100644 --- a/src/components/mao-forums.js +++ b/src/components/mao-forums.js @@ -33,6 +33,9 @@ import '@polymer/paper-button/paper-button.js'; // Import other customElements import '@vaadin/vaadin-date-picker/vaadin-date-picker.js'; +//import local customElements +import './forum-element.js' + class MaoForums extends connect(store)(PageViewElement) { _render(props) { return html` @@ -41,33 +44,6 @@ class MaoForums extends connect(store)(PageViewElement) { <style> - paper-card { - display: block; - } - - .card-actions > paper-button { - margin-left: auto; - margin-right: auto; - display: block; - width: 50%; - } - - .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; @@ -107,7 +83,6 @@ class MaoForums extends connect(store)(PageViewElement) { </section> <section> - <h2 class="underline">Recent Posts</h2> <div hidden="${!props.onceOnline}" class="post-grid" id="posts-grid"></div> @@ -173,25 +148,13 @@ class MaoForums extends connect(store)(PageViewElement) { postsGrid.innerHTML = ""; for(var i = this.forumPosts.length-1; i >=0; i--) { - var paperCard = document.createElement('paper-card'); - var cardContent = document.createElement('div'); - var forumAuthor = document.createElement('h4'); - var forumSubject = document.createElement('h3'); - var forumContent = document.createElement('p'); - - forumAuthor.innerHTML = this.forumPosts[i].email .replace('@communityschoolnaples.org', ''); - forumSubject.innerHTML = this.forumPosts[i].subject; - forumContent.innerHTML = this.forumPosts[i].content; - - cardContent.classList.add('card-content'); - cardContent.appendChild( forumAuthor); - cardContent.appendChild( forumSubject); - cardContent.appendChild( forumContent); + var forumElement = document.createElement('forum-element'); - paperCard.elevation = 0; - paperCard.appendChild( cardContent); + forumElement.author = this.forumPosts[i].email .replace('@communityschoolnaples.org', ''); + forumElement.subject = this.forumPosts[i].subject; + forumElement.content = this.forumPosts[i].content; - postsGrid.appendChild(paperCard); + postsGrid.appendChild(forumElement); } } } |