Merge pull request #3 from NokomisJROTC/master

Added Dashboard to Mobile

admin/admin.js

@@ -0,0 +1,63 @@
+function deleteAdmin(email) {
+  console.log(email)
+  var path = firebase.database().ref("users/"+email)
+  path.remove();
+  document.getElementById("emails").innerHTML = ''
+  pullAllEmails();
+}
+
+function addAdmin() {
+  var s = document.getElementById("email-input").value
+  sendData("users/"+s.replace("@","|").replace(".",","),true)
+  document.getElementById("emails").innerHTML = ''
+  pullAllEmails();
+}
+
+function pullAllEmails() {
+  database = firebase.database().ref("users");
+    database.once('value', function(snapshot) {
+        snapshot.forEach(function(child) {
+            firebase.database().ref("users/" + child["key"]).on('value', function(data) {
+                var data1 = data.val();
+                var unfiltered = data.key
+                var email = unfiltered.replace("|","@").replace(",",".")
+                var a = document.createElement("tr");
+                a.innerHTML = "<tr> <td class='mdl-data-table__cell--non-numeric no-under' id='email-close'><i class='material-icons clickable' onclick='deleteAdmin(\""+unfiltered+"\");'>delete</i></td> <td class='mdl-data-table__cell--non-numeric' id='sign-date'>"+email+"</td></tr>"
+                document.getElementById("emails").appendChild(a)
+                componentHandler.upgradeAllRegistered();
+            });
+        });
+    });
+}
+
+
+function externalOnLoad() {
+  verify();
+  pullAllEmails();
+  timeChange();
+  updatePage();
+  readData("company", function(data) {
+        document.getElementById("alphacurrentpoints").innerHTML = data.alphapoints
+        document.getElementById("bravocurrentpoints").innerHTML = data.bravopoints
+  });
+  window.setInterval(verify(),1000);
+}
+
+// Verify if the user has access
+function verify() {
+  firebase.auth().onAuthStateChanged(function(user) {
+     if (user) {
+        readData("users", function(array) {
+               if (array[firebase.auth().currentUser.email.replace("@","|").replace(".",",")]) {
+               document.getElementById("page-content").style.display = "block"
+               document.getElementById("unauthorized").style.display = "none"
+               } else {
+               document.getElementById("unauthorized").style.display = "block"
+               document.getElementById("page-content").style.display = "none"
+        }});
+        } else {
+        document.getElementById("unauthorized").style.display = "block"
+        document.getElementById("page-content").style.display = "none"
+        }
+  })
+}

admin/authentication.js

@@ -0,0 +1,79 @@
+// Firebase Check Log In Status
+function checkLogin() {
+  firebase.auth().onAuthStateChanged(function(user) {
+     if (user) {
+        readData("users", function(array) {
+        if (array[firebase.auth().currentUser.email.replace("@","|").replace(".",",")]) {
+                   document.getElementById("loginbutton").innerHTML = "<a href='dashboard.html'>Dashboard</a>"
+                   var logoutnode = document.createElement("li");
+                   document.getElementById("logoutbutton").style.display = "block"
+        } else {
+                   document.getElementById("loginbutton").innerHTML = "Welcome, "+firebase.auth().currentUser.displayName
+                   document.getElementById("logoutbutton").style.display = "block"
+        }
+  })} else {
+          document.getElementById("loginbutton").innerHTML = "<a href='javascript:logIn();'>Log In</a>"
+          document.getElementById("logoutbutton").style.display = "none"
+        }
+  })
+}
+
+// Firebase Log In
+function logIn() {
+ firebase.auth().setPersistence("local")
+    // No user is signed in.
+    var provider = new firebase.auth.GoogleAuthProvider();
+    firebase.auth().signInWithPopup(provider).then(function(result) {
+      // This gives you a Google Access Token. You can use it to access the Google API.
+      var token = result.credential.accessToken;
+      // The signed-in user info.
+      var user = result.user;
+      readData("users", function(array) {
+        checkLogin();
+      });
+      // ...
+    }).catch(function(error) {
+      // Handle Errors here.
+      var errorCode = error.code;
+      var errorMessage = error.message;
+      // The email of the user's account used.
+      var email = error.email;
+      // The firebase.auth.AuthCredential type that was used.
+      var credential = error.credential;
+      console.log(errorCode)
+      console.log(errorMessage)
+// ...
+    });
+}
+
+// Firebase Log Out
+function logOut() {
+   firebase.auth().signOut().then(function() {
+   checkLogin();
+}, function(error) {
+   console.log("ERROR")
+   console.log(error)
+});
+}
+
+
+// Firebase Interaction Scripts
+function readData(ref, callback) {
+  var nextformation = firebase.database().ref(ref);
+  nextformation.on("value", function(data) {
+    var array = data.val();
+    callback(array)
+  });
+}
+// global read data and place on page function
+function setData(ref, element, read1) {
+  var array = readData(ref, function(array) {
+    document.getElementById(element).innerHTML = array[read1]
+  });
+}
+
+// Firebase Interaction Scripts
+function sendData(ref, data) {
+  var database = firebase.database();
+  firebase.database().ref(ref).set(data);
+}

admin/firebasescript.js

@@ -0,0 +1,95 @@
+// JROTC Firebase Interaction Script
+// Bravo Company Comment Send
+function bravoComment() {
+  sendData("company/bravocomments",document.getElementById("bravocomments").value)
+  document.getElementById('bravocomments').value = '';
+}
+// Alpha Company Comment Send
+function alphaComment() {
+  sendData("company/alphacomments",document.getElementById("alphacomments").value)
+  document.getElementById('alphacomments').value = '';
+}
+// Commanders Cup Point Send
+function alphaSend() {
+  sendData("company/alphapoints", document.getElementById("alpha").value);
+  document.getElementById('alpha').value = '';
+}
+
+// Bravo Point Send
+function bravoSend() {
+  sendData("company/bravopoints", document.getElementById("bravo").value);
+  document.getElementById('bravo').value = '';
+}
+
+
+// Time Change Function (Global)
+function timeConvert(timestring) {
+  var year = timestring.substring(0,4)
+  var month = timestring.substring(5,7)
+  var day = timestring.substring(8,10)
+  var fulldate = month+"-"+day+"-"+year
+  return fulldate
+}
+
+// Specific Webpage Scripts
+function timeChange() {
+  var data = document.getElementById("time").value
+  if (data == "RTI") {
+    document.getElementById("customtimebox").style.display = 'none'
+  } else {
+    document.getElementById('customtimebox').style.display = 'block'
+  }
+}
+
+function updatePage() {
+  var data = document.getElementById("event").value
+  if (data == "UNI") {
+    document.getElementById("event_type").innerHTML = "Uniform Day"
+    document.getElementById("locationbox").style.display = 'none'
+    document.getElementById("timebox").style.display = 'none'
+    document.getElementById("messagebox").style.display = 'none'
+    document.getElementById("datebox").style.display = 'block'
+    document.getElementById("uniformbox").style.display = 'block'
+  } else if (data == "FOR") {
+    document.getElementById("event_type").innerHTML = "Formation"
+    document.getElementById("locationbox").style.display = 'block'
+    document.getElementById("timebox").style.display = 'block'
+    document.getElementById("messagebox").style.display = 'none'
+    document.getElementById("datebox").style.display = 'block'
+    document.getElementById("uniformbox").style.display = 'block'
+  } else if (data == "CUS") {
+    document.getElementById("locationbox").style.display = 'none'
+    document.getElementById("timebox").style.display = 'none'
+    document.getElementById("datebox").style.display = 'none'
+    document.getElementById("uniformbox").style.display = 'none'
+    document.getElementById("messagebox").style.display = 'block'
+  }
+  document.getElementById("event_uniform").innerHTML = document.getElementById("uniformtype").value
+  document.getElementById("event_date").innerHTML = timeConvert(document.getElementById("date").value)
+  if (document.getElementById("time").value === "RTI") {
+    document.getElementById("event_time").innerHTML = "RTI"
+  } else {
+    document.getElementById("event_time").innerHTML = document.getElementById("customtime").value
+  }
+  document.getElementById("event_place").innerHTML = document.getElementById("location").value
+}
+
+// Key handle sending functions
+
+function eventSend() {
+  var array = {
+    event: document.getElementById("event").value,
+    date: timeConvert(document.getElementById("date").value),
+    uniform: document.getElementById("uniformtype").value,
+    location: document.getElementById('location').value,
+    time: document.getElementById('time').value,
+    custom: document.getElementById('custommessage').value
+  }
+  sendData("nextevent/", array);
+  document.getElementById('date').value = '';
+  document.getElementById('uniformtype').value = '';
+  document.getElementById('time').value = '';
+  document.getElementById('location').value = '';
+  //document.getElementById('event').value = '';
+  document.getElementById('custommessage').value = '';
+}

admin/index.html

@@ -0,0 +1,233 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <title>Nokomis JROTC - Admin</title>
+  <script src="//cdn.letreach.com/js/main/a99d6ff3dec6106a641e37d249ac4762.js"></script>
+  <link rel="manifest" href="../manifest.json">
+  <link rel="stylesheet" href="../css/font.css">
+  <link rel="stylesheet" href="../css/material.indigo-red.min.css">
+  <link rel="stylesheet" href="../css/style.css">
+  <script src="../js/material.min.js"></script>
+  <script src="../js/firebase.js"></script>
+  <script src="admin.js"></script>
+  <script src="authentication.js"></script>
+  <script src="firebasescript.js"></script>
+  <link rel="apple-touch-icon" sizes="57x57" href="/LAX18/General/messaging2/assets/favicons/apple-touch-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="/LAX18/General/messaging2/assets/favicons/apple-touch-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="/LAX18/General/messaging2/assets/favicons/apple-touch-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="/LAX18/General/messaging2/assets/favicons/apple-touch-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="/LAX18/General/messaging2/assets/favicons/apple-touch-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="/LAX18/General/messaging2/assets/favicons/apple-touch-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="/LAX18/General/messaging2/assets/favicons/apple-touch-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="/LAX18/General/messaging2/assets/favicons/apple-touch-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/LAX18/General/messaging2/assets/favicons/apple-touch-icon-180x180.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/LAX18/General/messaging2/assets/favicons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="194x194" href="/LAX18/General/messaging2/assets/favicons/favicon-194x194.png">
+  <link rel="icon" type="image/png" sizes="192x192" href="/LAX18/General/messaging2/assets/favicons/android-chrome-192x192.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/LAX18/General/messaging2/assets/favicons/favicon-16x16.png">
+  <link rel="mask-icon" href="/LAX18/General/messaging2/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="apple-mobile-web-app-title" content="JROTC">
+  <meta name="application-name" content="JROTC">
+  <meta name="msapplication-TileColor" content="#3f51b5">
+  <script>
+    function onLoad() {
+      // Initialize Firebase
+      var config = {
+        apiKey: "AIzaSyB0keF26uKYDOR2o-8HYkgoOGWhsPyHdkg",
+        authDomain: "jrotc-database.firebaseapp.com",
+        databaseURL: "https://jrotc-database.firebaseio.com",
+        projectId: "jrotc-database",
+        storageBucket: "jrotc-database.appspot.com",
+        messagingSenderId: "787128694744"
+      };
+      firebase.initializeApp(config);
+      externalOnLoad();
+    };
+  </script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="theme-color" content="#3f51b5">
+</head>
+
+<body onload="onLoad()">
+  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+    <header class="mdl-layout__header">
+      <button class="mdl-layout__drawer-button mdl-button mdl-js-button mdl-button--icon" onclick="history.go(-1);">
+        <i class="material-icons">arrow_back</i>
+      </button>
+      <div class="mdl-layout__header-row">
+        <!-- Title -->
+        <span class="mdl-layout-title">Admin Dashboard</span>
+        <!-- Add spacer, to align navigation to the right -->
+        <div class="mdl-layout-spacer"></div>
+      <!-- Navigation -->
+      <nav class="mdl-navigation">
+        <a href="../help/index.html" class="mdl-navigation__link" href="">Help</a>
+      </nav>
+      </div>
+    </header>
+    <main class="mdl-layout__content">
+      <div id="unauthorized">
+        <h1>
+          You do not have permission to be on this page
+        </h1>
+      </div>
+      <div id="page-content" class="page-content" style="display: none">
+        <table>
+          <tr>
+            <td>
+              <div class="mdl-card mdl-shadow--2dp">
+                <div class="mdl-card__title">
+                  Add Event
+                </div>
+                <div class="mdl-card__actions">
+                  Event Type:
+                  <select id="event" onchange="updatePage()">
+  <option value="FOR" selected>Formation</option>
+  <option value="UNI">Uniform Only</option>
+  <option value="CUS">Custom Message</option>
+    </select><br>
+                  <div id="uniformbox">
+                    Uniform Type:
+                    <select id="uniformtype" onchange="updatePage()">
+  <option value="ACU" selected>ACU</option>
+  <option value="ASU (Class A)">ASU (Class A)</option>
+  <option value="Class B">ASU (No Tie / Class B)</option>
+  <option value="T-Shirt" >T-Shirt</option>
+                <option value="Civilian Clothes">Civilian Clothes</option>
+    </select><br></div>
+                  <div id="datebox">
+                    Date:
+                    <input type="date" id="date"><br></div>
+                  <div id="timebox">
+                    Time of Formation:
+                    <select id="time" onchange="timeChange()">
+                  <option value="RTI" selected>RTI</option>
+                  <option value="Custom">Custom</option>
+              </select>
+                    <br><span id="customtimebox">Custom Time Value:
+    <input type="text" id="customtime"></span>
+                  </div>
+                  <div id="locationbox">
+                    Location (i.e Gym, etc):
+                    <input type="text" id="location"><br></div>
+                  <div id="messagebox">
+                    Custom Message:
+                    <input type="text" id="custommessage"><br></div>
+                  <input type="button" value="Update" onclick="eventSend()">
+                  <input type="button" value="Preview" onclick="updatePage()">
+                </div>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <div class="calendar mdl-card mdl-shadow--2dp">
+                <div class="mdl-card__title mdl-card--expand">
+                  <h3><span id="event_type">Loading...</span></h3>
+                  <h4><span id="event_uniform">Loading...</span></h4>
+                  <br><i class="material-icons" style="font-size: 18px;padding-right: 5px;">access_time</i><span id="event_time">Loading...</span>
+                  <br><i class="material-icons" style="font-size: 18px;padding-right: 5px;">date_range</i><span id="event_date">Loading</span>
+                  <br><i class="material-icons" style="font-size: 18px;padding-right: 5px;">room</i><span id="event_place">Loading...</span>
+                </div>
+                <div class="mdl-card__actions mdl-card--border">
+                  <h6>(Preview)</h6>
+                  <div class="mdl-layout-spacer"></div>
+                  <i class="material-icons">event</i>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </table>
+        <table>
+          <tr>
+            <td>
+              <div class="mdl-card mdl-shadow--2dp" style="">
+                <div class="mdl-card__actions" style="text-align: center;margins: auto">
+                  Alpha Company Points:<br>
+                  <h3>
+                    Current:
+                  </h3>
+                  <h4>
+                    <div id="alphacurrentpoints">Loading</div>
+                  </h4>
+                  New Point Total:
+                  <input type="text" id="alpha"><br>
+                  <input type="submit" value="Update" onclick="alphaSend()"><br> Comments:
+                  <br>
+                  <textarea id="alphacomments"></textarea><br>
+                  <input type="submit" value="Send Comment" onclick="alphaComment()">
+                </div>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <div class="mdl-card mdl-shadow--2dp">
+                <div class="mdl-card__title" style="text-align: center;margins: auto">
+                  External Resources
+                </div>
+                <div class="mdl-card__actions" style="text-align: center;margins: auto">
+                  Push Notifications<br>
+                  Login with NokomisJROTC Google Account to Push Notifications<br>
+                  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" onclick="window.open('https://app.letreach.com/5d5daebbddb25e461d8b465c');">
+                  Open Notification Manager
+                </button><br><br>
+                  Nokomis JROTC Blog<br>
+                  Login with NokomisJROTC Google Account to add blog post
+                  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" onclick="window.open('https://wordpress.com/block-editor/post/nokomisjrotc992024420.wordpress.com');">
+                  New Blog Post
+                </button>
+                </div>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <div class="mdl-card mdl-shadow--2dp" style="">
+                <div class="mdl-card__actions" style="text-align: center;margins: auto">
+                  Bravo Company Points:<br>
+                  <h3>
+                    Current:
+                  </h3>
+                  <h4>
+                    <div id="bravocurrentpoints">Loading</div>
+                  </h4>
+                  New Point Total:
+                  <input type="text" id="bravo"><br>
+                  <input type="submit" value="Update" onclick="bravoSend()"><br> Comments:
+                  <br>
+                  <textarea id="bravocomments"></textarea><br>
+                  <input type="submit" value="Send Comment" onclick="bravoComment()">
+                </div>
+              </div>
+            </td>
+          </tr>
+        </table>
+        <div class="mdl-card mdl-shadow--2dp" style="width: 75%;margin: auto">
+          <div class="mdl-card__title">
+            Add Admins
+          </div>
+          <div class="mdl-card__actions">
+            <table>
+              <tr>
+                <td style="text-align: center;width: 15%">
+                  Email <br>
+                  <input id="email-input" type="text"><br>
+                  <input type="button" onclick="addAdmin();" value="Add Admin"></td>
+                <td style="width: 85%">
+                  <div>
+                    <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" id="emails" style="overflow: scroll;width: 100%">
+                    </table>
+                  </div>
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</body>
+
+</html>

index.html

@@ -1,3 +1,4 @@
+<!DOCTYPE HTML>
 <html>
 
 <head>
@@ -11,6 +12,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://www.gstatic.com/firebasejs/5.5.3/firebase.js"></script>
   <script src="https://lax18.github.io/MobileJROTC/js/script.js"></script>
+  <script src="js/authentication.js"></script>
   <meta name="theme-color" content="#3f51b5">
   <link rel="apple-touch-icon" sizes="57x57" href="/MobileJROTC/assets/favicons/apple-touch-icon-57x57.png">
   <link rel="apple-touch-icon" sizes="60x60" href="/MobileJROTC/assets/favicons/apple-touch-icon-60x60.png">
@@ -88,7 +90,7 @@
 </head>
 
 <body onload="onLoad()">
-  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--no-desktop-drawer-button">
+  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
     <header class="mdl-layout__header">
       <div class="mdl-layout__header-row">
         <!-- Title -->
@@ -98,6 +100,21 @@
         <div class="clickable"><i class="material-icons" onclick="location.href='info.html'">info</i></div>
       </div>
     </header>
+    <div class="mdl-layout__drawer">
+      <span class="mdl-layout-title">Nokomis JROTC</span>
+      <nav class="mdl-navigation">
+        <div id="loginbutton" class="accountbutton">
+          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" onclick="logIn();">
+          Log In
+          </button>
+        </div>
+        <div id="logoutbutton" class="accountbutton" style="display: none;">
+          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" onclick="logOut();">
+          Log Out
+        </button>
+        </div>
+      </nav>
+    </div>
     <main class="mdl-layout__content">
       <div class="page-content">
         <div class="ad2hs-prompt" style="display: none">Install Nokomis JROTC</div>

js/authentication.js

@@ -0,0 +1,62 @@
+// Redirect to Dashboard
+function dashboard() {
+  location.href = "admin/index.html"
+}
+
+// Firebase Check Log In Status
+function checkLogin() {
+  firebase.auth().onAuthStateChanged(function(user) {
+     if (user) {
+        readData("users", function(array) {
+        if (array[firebase.auth().currentUser.email.replace("@","|").replace(".",",")]) {
+                   document.getElementById("loginbutton").innerHTML = "<button class='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect' onclick='dashboard();'>Dashboard</button>";
+                   document.getElementById("logoutbutton").style.display = "block"
+                   componentHandler.upgradeDom();
+        } else {
+                   document.getElementById("loginbutton").innerHTML = "Welcome, "+firebase.auth().currentUser.displayName
+                   document.getElementById("logoutbutton").style.display = "block"
+        }
+  })} else {
+          document.getElementById("loginbutton").innerHTML = "<button class='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect' onclick='logIn();'> Log In</button>"
+          document.getElementById("logoutbutton").style.display = "none"
+        }
+  })
+}
+
+// Firebase Log In
+function logIn() {
+ firebase.auth().setPersistence("local")
+    // No user is signed in.
+    var provider = new firebase.auth.GoogleAuthProvider();
+    firebase.auth().signInWithPopup(provider).then(function(result) {
+      // This gives you a Google Access Token. You can use it to access the Google API.
+      var token = result.credential.accessToken;
+      // The signed-in user info.
+      var user = result.user;
+      readData("users", function(array) {
+        checkLogin();
+      });
+      // ...
+    }).catch(function(error) {
+      // Handle Errors here.
+      var errorCode = error.code;
+      var errorMessage = error.message;
+      // The email of the user's account used.
+      var email = error.email;
+      // The firebase.auth.AuthCredential type that was used.
+      var credential = error.credential;
+      console.log(errorCode)
+      console.log(errorMessage)
+// ...
+    });
+}
+
+// Firebase Log Out
+function logOut() {
+   firebase.auth().signOut().then(function() {
+   checkLogin();
+}, function(error) {
+   console.log("ERROR")
+   console.log(error)
+});
+}