Initial App Commit (v.1)
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 288 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 98 KiB |
|
After Width: | Height: | Size: 85 KiB |
|
After Width: | Height: | Size: 342 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
@@ -0,0 +1,23 @@
|
||||
/* fallback */
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
.ad2hs-prompt {
|
||||
background-color: green;
|
||||
color: white;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.mdl-card {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.resources > .mdl-card__title {
|
||||
color: #000;
|
||||
background: url('../assets/resources.png') bottom right 15% no-repeat #46B6AC;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.youtube > .mdl-card__title {
|
||||
color: #000;
|
||||
background: url('../assets/youtube.png') bottom right 15% no-repeat #46B6AC;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.facebook > .mdl-card__title {
|
||||
color: #000;
|
||||
background: url('../assets/facebook.png') bottom right 15% no-repeat #46B6AC;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.signups > .mdl-card__title {
|
||||
color: #000;
|
||||
background: url('../assets/signup.png') bottom right 15% no-repeat #46B6AC;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.ribbons > .mdl-card__title {
|
||||
color: #000;
|
||||
background: url('../assets/ribbon.png') top left 15% no-repeat #46B6AC;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.calendar.mdl-card {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
background: #3E4EB8;
|
||||
}
|
||||
|
||||
.calendar > .mdl-card__actions {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.calendar > .mdl-card__title {
|
||||
align-items: flex-start;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.calendar > .mdl-card__title > h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.calendar > .mdl-card__actions {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.calendar > .mdl-card__actions > .material-icons {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.calendar > .mdl-card__title,
|
||||
.calendar > .mdl-card__actions,
|
||||
.calendar > .mdl-card__actions > .mdl-button {
|
||||
color: #fff;
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>JROTC Push Notifications</title>
|
||||
<script src="//cdn.letreach.com/js/main/a99d6ff3dec6106a641e37d249ac4762.js"></script>
|
||||
<link rel="manifest" href="https://s.codetasty.com/LAX18/General/mobile/manifest.json">
|
||||
<link rel="stylesheet" href="https://s.codetasty.com/LAX18/General/mobile/css/font.css">
|
||||
<link rel="stylesheet" href="https://s.codetasty.com/LAX18/General/mobile/css/material.indigo-red.min.css">
|
||||
<link rel="stylesheet" href="https://s.codetasty.com/LAX18/General/mobile/css/style.css">
|
||||
<script src="https://s.codetasty.com/LAX18/General/mobile/js/material.min.js"></script>
|
||||
<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://s.codetasty.com/LAX18/General/mobile/js/script.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">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/MobileJROTC/assets/favicons/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="/MobileJROTC/assets/favicons/apple-touch-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="/MobileJROTC/assets/favicons/apple-touch-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="/MobileJROTC/assets/favicons/apple-touch-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="/MobileJROTC/assets/favicons/apple-touch-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/MobileJROTC/assets/favicons/apple-touch-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/MobileJROTC/assets/favicons/apple-touch-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/MobileJROTC/assets/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="194x194" href="/MobileJROTC/assets/favicons/favicon-194x194.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/MobileJROTC/assets/favicons/android-chrome-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/MobileJROTC/assets/favicons/favicon-16x16.png">
|
||||
<link rel="mask-icon" href="/MobileJROTC/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);
|
||||
navigator.serviceWorker.register('sw.js');
|
||||
externalOnLoad();
|
||||
}
|
||||
|
||||
var deferredPrompt;
|
||||
|
||||
window.addEventListener('beforeinstallprompt', function(e) {
|
||||
// Prevent Chrome 67 and earlier from automatically showing the prompt
|
||||
e.preventDefault();
|
||||
// Stash the event so it can be triggered later.
|
||||
deferredPrompt = e;
|
||||
|
||||
showAddToHomeScreen();
|
||||
|
||||
});
|
||||
|
||||
function showAddToHomeScreen() {
|
||||
|
||||
var a2hsBtn = document.querySelector(".ad2hs-prompt");
|
||||
|
||||
a2hsBtn.style.display = "block";
|
||||
|
||||
a2hsBtn.addEventListener("click", addToHomeScreen);
|
||||
|
||||
}
|
||||
|
||||
function addToHomeScreen() {
|
||||
var a2hsBtn = document.querySelector(".ad2hs-prompt"); // hide our user interface that shows our A2HS button
|
||||
a2hsBtn.style.display = 'none'; // Show the prompt
|
||||
deferredPrompt.prompt(); // Wait for the user to respond to the prompt
|
||||
deferredPrompt.userChoice
|
||||
.then(function(choiceResult) {
|
||||
|
||||
if (choiceResult.outcome === 'accepted') {
|
||||
console.log('User accepted the A2HS prompt');
|
||||
} else {
|
||||
console.log('User dismissed the A2HS prompt');
|
||||
}
|
||||
|
||||
deferredPrompt = null;
|
||||
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="onLoad()">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--no-desktop-drawer-button">
|
||||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Nokomis JROTC</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="page-content">
|
||||
<div class="ad2hs-prompt" style="display: none">Install Nokomis JROTC</div>
|
||||
<table>
|
||||
<tbody>
|
||||
|
||||
<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">
|
||||
<a href="../WebJROTC/calendar/index.html" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||
Go to Calendar
|
||||
</a>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<i class="material-icons">event</i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="ribbons mdl-card mdl-shadow--2dp">
|
||||
<div class="mdl-card__title mdl-card--expand">
|
||||
<h2 class="mdl-card__title-text">Ribbon Rack Builder</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
You can arrange your ribbons here, and the generator will tell you how to place them on your uniform.
|
||||
</div>
|
||||
<div class="mdl-card__actions mdl-card--border">
|
||||
<a href="../WebJROTC/ribbon/index.html" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||
Open Ribbon Rack Builder
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="demo-card-square mdl-card mdl-shadow--2dp">
|
||||
<div class="mdl-card__title mdl-card--expand">
|
||||
<h2 class="mdl-card__title-text">Resources</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
Important documents to have are located here.
|
||||
</div>
|
||||
<div class="mdl-card__actions mdl-card--border">
|
||||
<a href="../WebJROTC/resources/index.html" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||
Access Documents
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="signups mdl-card mdl-shadow--2dp">
|
||||
<div class="mdl-card__title mdl-card--expand">
|
||||
<h2 class="mdl-card__title-text">Sign Ups</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
Access digital sign up sheets here.
|
||||
</div>
|
||||
<div class="mdl-card__actions mdl-card--border">
|
||||
<a href="../WebJROTC/signups/index.html" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||
View Activities
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="facebook mdl-card mdl-shadow--2dp">
|
||||
<div class="mdl-card__title mdl-card--expand">
|
||||
<h2 class="mdl-card__title-text">Facebook Page</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
Like Nokomis JROTC on Facebook.
|
||||
</div>
|
||||
<div class="mdl-card__actions mdl-card--border">
|
||||
<a href="https://www.facebook.com/pages/category/Campus-Building/Nokomis-JROTC-333767570596/" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||
Go to Facebook
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="youtube mdl-card mdl-shadow--2dp">
|
||||
<div class="mdl-card__title mdl-card--expand">
|
||||
<h2 class="mdl-card__title-text">YouTube</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
Like and Subscribe to the Nokomis JROTC YouTube channel.
|
||||
</div>
|
||||
<div class="mdl-card__actions mdl-card--border">
|
||||
<a href="https://www.youtube.com/channel/UCTVAQI5GtjblRjos2y1WwlQ" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||
Go to YouTube
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
function externalOnLoad() {
|
||||
console.log("[index.html] LOADED")
|
||||
var data = readData("nextevent", function(data) {
|
||||
if (data.event === "FOR") {
|
||||
document.getElementById("event_type").innerHTML = "Formation"
|
||||
document.getElementById("event_uniform").innerHTML = data.uniform
|
||||
document.getElementById("event_time").innerHTML = data.time
|
||||
document.getElementById("event_date").innerHTML = data.date
|
||||
document.getElementById("event_place").innerHTML = data.location
|
||||
} else if (data.event === "UNI") {
|
||||
document.getElementById("event_type").innerHTML = "Uniform Day"
|
||||
document.getElementById("event_uniform").innerHTML = data.uniform
|
||||
document.getElementById("event_time").innerHTML = "N/A"
|
||||
document.getElementById("event_date").innerHTML = data.date
|
||||
document.getElementById("event_place").innerHTML = "N/A"
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Firebase Scripts
|
||||
// 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]
|
||||
});
|
||||
}
|
||||
|
||||
function readData(ref, callback) {
|
||||
var nextformation = firebase.database().ref(ref);
|
||||
nextformation.on("value", function(data) {
|
||||
var array = data.val();
|
||||
callback(array)
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"short_name": "JROTC",
|
||||
"name": "Nokomis JROTC",
|
||||
"icons": [
|
||||
{
|
||||
"src": "assets/icon-192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "assets/icon-512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": "/MobileJROTC/index.html",
|
||||
"scope": "/",
|
||||
"background_color": "#3f51b5",
|
||||
"display": "standalone",
|
||||
"theme_color": "#3f51b5"
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
// Offline SW
|
||||
const filesToCache = [
|
||||
'index.html',
|
||||
'manifest.json',
|
||||
'sw.js',
|
||||
'https://s.codetasty.com/LAX18/General/mobile/css/style.css',
|
||||
'https://s.codetasty.com/LAX18/General/mobile/css/font.css',
|
||||
'https://s.codetasty.com/LAX18/General/mobile/css/material.indigo-red.min.css',
|
||||
'https://s.codetasty.com/LAX18/General/mobile/js/firebase.js',
|
||||
'https://s.codetasty.com/LAX18/General/mobile/js/material.min.js',
|
||||
'https://s.codetasty.com/LAX18/General/mobile/js/script.js'
|
||||
];
|
||||
|
||||
const staticCacheName = 'NokomisJROTC';
|
||||
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
console.log('Attempting to install service worker and cache static assets');
|
||||
event.waitUntil(
|
||||
caches.open(staticCacheName)
|
||||
.then(cache => {
|
||||
return cache.addAll(filesToCache);
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', event => {
|
||||
console.log('Fetch event for ', event.request.url);
|
||||
event.respondWith(
|
||||
caches.match(event.request)
|
||||
.then(response => {
|
||||
if (response) {
|
||||
console.log('Found ', event.request.url, ' in cache');
|
||||
return response;
|
||||
}
|
||||
console.log('Network request for ', event.request.url);
|
||||
return fetch(event.request)
|
||||
|
||||
// TODO 4 - Add fetched files to the cache
|
||||
|
||||
}).catch(error => {
|
||||
|
||||
// TODO 6 - Respond with custom offline page
|
||||
|
||||
})
|
||||
);
|
||||
});
|
||||