Merge pull request #1 from danswick/master

Master
danswick · Mar 19, 2015 · 7e58eae · 7e58eae
2 parents cec7864 + 5229a5e
commit 7e58eae
Show file tree

Hide file tree

Showing 10 changed files with 168 additions and 71 deletions.
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+deltalumin.com
diff --git a/about/index.html b/about/index.html
@@ -28,6 +28,7 @@
             <nav>
                 <a href="../index.html">HOME</a>
                 <a href="index.html" class="current-link">ABOUT</a>
+                <a href="../user-portal/index.html">DASHBOARD</a>
             </nav>
 
             <h1>DELTA<span id="lumin">LUMIN</span></h1>
@@ -69,5 +70,17 @@ <h4>Helping you make smarter decisions about energy use.</h4>
         </footer>
     </div>
 
+    <script>
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+        ga('create', 'UA-19653615-3', 'auto');
+        ga('send', 'pageview');
+
+    </script>
+
+
 </body>
 </html>
diff --git a/css/main.css b/css/main.css
@@ -42,12 +42,21 @@ body {
 
 #idForm * {
     margin: 10px 0px;
-    color: #fff;
     font-weight: 600;
 }
 
-#idForm #submit-button {
+#idForm span {
+    height: 40px;
+    margin: 10px 0px;
+}
+
+#idForm #survey-button {
     font-weight: 600;
+    color: #fff;
+}
+
+.textInput {
+   color: #000;
 }
 
 /*.shadow {
@@ -144,7 +153,7 @@ header h4 {
     padding: 12px 19px;
     border: 4px solid #fff;
     display: inline-block;
-    margin: 0px 0px 35px 0px;
+    /*margin: 0px 0px 35px 0px;*/
     background-color: #98bdce;
     transition-duration: 200ms;
 }

diff --git a/doc/resources.md b/doc/resources.md
@@ -0,0 +1,9 @@
+## On getting URL variables
+
+- http://css-tricks.com/snippets/javascript/get-url-variables/
+- http://w3lessons.info/2013/02/25/how-to-get-url-parameters-values-using-jquery/
+
+## On D3
+
+- Binding data - http://alignedleft.com/tutorials/d3/binding-data/
+- Simple example of working with JSON in a variable - http://jsfiddle.net/fg9MU/1/ 
diff --git a/index.html b/index.html
@@ -28,6 +28,7 @@
             <nav>
                 <a href="index.html" class="current-link">HOME</a>
                 <a href="about/index.html">ABOUT</a>
+                <a href="user-portal/index.html">DASHBOARD</a>
             </nav>
 
             <h1>DELTA<span id="lumin">LUMIN</span></h1>
@@ -66,5 +67,16 @@ <h3>Questions?</h3>
         </footer>
     </div>
 
+    <script>
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+        ga('create', 'UA-19653615-3', 'auto');
+        ga('send', 'pageview');
+
+    </script>
+
 </body>
 </html>
diff --git a/js/main.js b/js/main.js
@@ -1,6 +1,20 @@
 $('#idForm').submit(function( e ) {
 	e.preventDefault();
-	console.log( $(this).serialize() );
-	location.href = 'http://deltalumin.com/webpage/?' + $(this).serialize();
-	console.log(ID);
-});
+	// check for valid ID. During testing, only < 5. 
+	if( ( parseInt($('#idForm .textInput').val()) > 0 ) && ( parseInt($('#idForm .textInput').val() ) < 5 )) {
+		console.log( $(this).serialize() );
+		location.href = 'http://deltalumin.com/webpage/?' + $(this).serialize();
+		console.log(ID);
+	} else {
+		document.getElementById('warningText').innerHTML = "Please enter a valid ID number (1-4 for now)."; 
+	}
+});
+
+// put text box in focus on page load
+function setup() {
+	var textInput;
+	textInput = $('#idForm .textInput');
+	textInput.focus();
+}
+
+$(window).on('load', setup());
diff --git a/user-portal/index.html b/user-portal/index.html
@@ -27,7 +27,8 @@
         <header>
             <nav>
                 <a href="../index.html">HOME</a>
-                <a href="index.html" class="current-link">ABOUT</a>
+                <a href="../about/index.html">ABOUT</a>
+                <a href="index.html" class="current-link">DASHBOARD</a>
             </nav>
 
             <h1>DELTA<span id="lumin">LUMIN</span></h1>
@@ -46,7 +47,9 @@ <h4>Helping you make smarter decisions about energy use.</h4>
                 <form id="idForm">
                     <span>User ID:<span>
                     <br>
-                    <input type="text" name="userID">
+                    <input class="textInput" type="text" name="userID">
+                    <br>
+                    <span id="warningText"></span>
                     <br>
                     <input id="survey-button" type="submit" value="Go to your dashboard">
                 </form>
@@ -70,7 +73,18 @@ <h4>Helping you make smarter decisions about energy use.</h4>
             <p>1-312-487-1087 - <a href="mailto:[email protected]">[email protected]</a></p>
         </footer>
     </div>
-<script type="text/javascript" src="../js/jquery-2.1.3.js"></script>
-<script src="../js/main.js"></script> 
+    <script type="text/javascript" src="../js/jquery-2.1.3.js"></script>
+    <script src="../js/main.js"></script> 
+    <script>
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+        ga('create', 'UA-19653615-3', 'auto');
+        ga('send', 'pageview');
+
+    </script>
+
 </body>
 </html>
diff --git a/webpage/css/customTheme.css b/webpage/css/customTheme.css
@@ -15,13 +15,22 @@ body {
 }
 
 .make-it-proper-width{
-	width: 95%;
+	width: 100%;
+}
+
+.container, .navbar, .navbar-inverse {
+	background-color: #687079;
+	background-image: none;
 }
+
 .container-fluid{
 	  border-style: none;
 	  width: 100%;
 	  padding-right: 0px;
 	  padding-left: 0px;
+	  float: left;
+	  width: 48%;
+	  margin: 1%;
 }
 .navbar-default{ /* assigning the top bar to the entire navbar div element */
     text-align: center;
@@ -43,7 +52,6 @@ body {
 }
 
 .navbar-inverse{
-	background-color: #00ff00;
 	border:none;
 	margin-bottom: 0;
 }
@@ -58,12 +66,11 @@ body {
 
 
 .visualizationSection {
-  padding: 0px 0px;
-  text-align: center;
-    background: #ffffff;
-    margin-left: auto; 
+	padding: 0px 0px;
+	text-align: center;
+	background: #ffffff;
+	margin-left: auto; 
 	margin-right: auto;
-	width: 95%;
 }
 .vizDivider {
   margin-left: auto;
@@ -175,7 +182,7 @@ border-radius: 0px;
 }
 
 .nav-tabs-app-tab{
-	width: 33.333%;
+	width: 50%;
 	height: 30px;
 }
 
@@ -338,3 +345,16 @@ border-radius: 0px;
 .c3-chart-text{
 	c
 }
+
+
+/*===========================================
+MEDIA QUERIES 
+===========================================*/
+
+@media screen and (max-width: 620px) {
+	.container-fluid{
+	  float: none;
+	  width: 97%;
+	  margin: 1%;
+	}
+}
diff --git a/webpage/index.html b/webpage/index.html
@@ -31,7 +31,7 @@
             <div class="navbar-header">
                 <!-- <div class="navbar-brand">Usage Dashboard</div> -->
                 <div id="topLogo">
-                    <img src="images/logo-01.png" height="15" width="141">
+                    <a href="http://deltalumin.com/" alt="homepage"><img src="images/logo-01.png" height="15" width="141"></a>
                 </div>
             </div>
         </div>
@@ -66,53 +66,45 @@
     </div>
     <div class="make-it-white" id="forecastToday"></div>
     <div class="vertical-line" /></div>
-    </div>
+
     <div class="vizDivider"></div>
 
-    <div class="visualizationSection">
-        <div id="calendarChart-header" class="module-header">Usage History</div>
-
-        <ul class="nav nav-tabs nav-tabs-app" role="tablist">
-            <li role="presentation" class=" active nav-tabs-app-tab"><a class="tab-left" href="#Today" role="tab" data-toggle="tab">Today</a>
-            </li>
-            <li role="presentation" class=" nav-tabs-app-tab tab-center"><a class="tab-center" href="#Week" role="tab" data-toggle="tab">Weekly</a>
-            </li>
-            <li role="presentation" class=" nav-tabs-app-tab"><a class="tab-right" href="#Month" role="tab" data-toggle="tab">Monthly</a>
-            </li>
-        </ul>
-        <!-- Tab panes -->
-        <div class="tab-content">
-            <div role="tabpanel" class="tab-pane active" id="Today">
-                <!-- <div class="dayGraphSpacer"></div> -->
-                <div id="dayDateLabel" class="dayGraphSpacer smallLabelFonts"></div>
-
-                <div id="dayGraph"></div>
-                <div id="soFarHighlight" class="soFarFloatingClass"></div>
-                <div id="dayGraphAMPM" class="AMPMSpacer"></div>
-            </div>
-            <div role="tabpanel" class="tab-pane " id="Week">
-                <div id="weekDateLabel" class="barGraphSpacer smallLabelFonts"></div>
-                <div id="weekGraph"></div>
-                <div class="AMPMSpacer"></div>
+    <div class="container-fluid">
+        <div class="visualizationSection">
+            <div id="calendarChart-header" class="module-header">Usage History</div>
+
+            <ul class="nav nav-tabs nav-tabs-app" role="tablist">
+                <!-- removed daily li -->
+                <li role="presentation" class="active nav-tabs-app-tab tab-center"><a class="tab-center" href="#Week" role="tab" data-toggle="tab">Weekly</a>
+                </li>
+                <li role="presentation" class=" nav-tabs-app-tab"><a class="tab-right" href="#Month" role="tab" data-toggle="tab">Monthly</a>
+                </li>
+            </ul>
+            <!-- Tab panes -->
+            <div class="tab-content">
+                <!-- removed daily div -->
+                <div role="tabpanel" class="tab-pane active" id="Week">
+                    <div id="weekDateLabel" class="barGraphSpacer smallLabelFonts"></div>
+                    <div id="weekGraph"></div>
+                    <div class="AMPMSpacer"></div>
 
-            </div>
-            <div role="tabpanel" class="tab-pane " id="Month">
-                <div id="monthDateLabel" class="barGraphSpacer smallLabelFonts"></div>
-                <div id="monthGraph"></div>
-                <div class="AMPMSpacer"></div>
+                </div>
+                <div role="tabpanel" class="tab-pane " id="Month">
+                    <div id="monthDateLabel" class="barGraphSpacer smallLabelFonts"></div>
+                    <div id="monthGraph"></div>
+                    <div class="AMPMSpacer"></div>
 
+                </div>
             </div>
         </div>
-    </div>
-
-    <div id="viz2" class="visualizationSection">
+        <div id="viz2" class="visualizationSection">
         <div id="pieChartLabel" class="pieChartLabelSpacer smallLabelFonts"></div>
         <div id="pieChart"></div>
     </div>
+    </div>
 
     <!-- <image src="images/test.png" id="testImage" /> -->
 
-    </div>
     <!-- /.container -->
 
 
@@ -144,6 +136,17 @@
     <script src="js/tabs.js"></script>
     <script src="js/parse.js"></script> -->
 
+    <script>
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+        ga('create', 'UA-19653615-3', 'auto');
+        ga('send', 'pageview');
+
+    </script>
+
 </body>
 
 </html>