Deployed on firebase using the firebase.json config file. Also, fixed a spelling issue with forums.

1 files changed, 199 insertions, 0 deletions

diff --git a/src/components/mao-forums.js b/src/components/mao-forums.js
new file mode 100644
index 0000000..d77329a
--- /dev/null
+++ b/src/components/mao-forums.js
@@ -0,0 +1,199 @@
+/**
+@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 { html } from '@polymer/lit-element';
+import { PageViewElement } from './page-view-element.js';
+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 { requestHours, createForumPost } from '../actions/firebase.js';
+
+// We are lazy loading its reducer.
+import firebase from '../reducers/firebase.js';
+
+store.addReducers({
+  firebase
+});
+
+// These are the shared styles needed by this element.
+import { SharedStyles }       from './shared-styles.js';
+import { ButtonSharedStyles } from './button-shared-styles.js'
+
+// Import paper elements
+import '@polymer/paper-input/paper-input.js';
+import '@polymer/paper-input/paper-textarea.js';
+import '@polymer/paper-card/paper-card.js';
+import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
+import '@polymer/paper-item/paper-item.js';
+import '@polymer/paper-slider/paper-slider.js';
+import '@polymer/paper-button/paper-button.js';
+
+// Import other customElements
+import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';
+
+class MaoForums extends connect(store)(PageViewElement) {
+  _render(props) {
+    return html`
+      ${SharedStyles}
+      ${ButtonSharedStyles}
+
+      <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, p {
+        word-break: break-all;
+      }
+
+      .card-content > h3, p {
+        text-align: center;
+      }
+
+
+      .post-grid {
+        display:  grid;
+        grid-gap: 10px;
+
+        grid-template-columns: 1fr;
+      }
+
+      @media (min-width: 460px) {
+        .post-grid {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+
+      </style>
+
+      <section hidden="${!props.signedIn}">
+
+        <paper-card elevation="0">
+
+          <div class="card-content">
+            <h3>Create Forum Post</h3>
+            <paper-input label="Subject" id="subject-field"></paper-input>
+            <paper-textarea label="Content" id="content-field"></paper-textarea>
+          </div>
+
+          <div class="card-actions">
+            <paper-button
+            raised
+            class   ="info"
+            on-tap  ="${() => this.submitForum()}">
+              Create Post
+            </paper-button>
+          </div>
+
+        </paper-card>
+
+      </section>
+
+      <section>
+
+        <h2 class="underline">Recent Posts</h2>
+
+        <div class="post-grid" id="posts-grid"></div>
+
+      </section>
+    `;
+  }
+
+  static get properties() { return {
+    // This is the data from the store.
+    signedIn:     Boolean,
+    authMessage:  String,
+    forumPosts:   Array
+  }}
+
+  _stateChanged(state) {
+    this.signedIn     = state.firebase.initialized;
+    this.authMessage  = state.firebase.authMessage;
+
+    this.forumPosts   = state.firebase.forumPosts;
+    this.updateSection();
+  }
+
+  submitForum() {
+    if(this.shadowRoot) {
+      var subjectElement  = this.shadowRoot.getElementById('subject-field');
+      var contentElement  = this.shadowRoot.getElementById('content-field');
+
+      if(!contentElement.value) {
+        contentElement.value  = "";
+      }
+
+      if( subjectElement.value.trim() === "" ||
+          contentElement.value.trim() === ""
+        )
+          {
+            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));
+
+              subjectElement.value  = "";
+              contentElement.value  = "";
+            }
+          }
+    }
+
+  }
+
+  updateSection() {
+    if(this.shadowRoot) {
+      var postsGrid       = this.shadowRoot.getElementById('posts-grid');
+      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);
+
+        paperCard.elevation     = 0;
+        paperCard.appendChild(  cardContent);
+
+        postsGrid.appendChild(paperCard);
+      }
+    }
+  }
+
+}
+
+window.customElements.define('mao-forums', MaoForums);