Updated frontend from thebilly (#1)

GoogleCloudPlatform · Sep 28, 2018 · a9b9108 · a9b9108
1 parent 95044a8
commit a9b9108
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 68 deletions.
diff --git a/cloud-sql/servlet/src/main/java/com/example/cloudsql/ConnectionPoolContextListener.java b/cloud-sql/servlet/src/main/java/com/example/cloudsql/ConnectionPoolContextListener.java
@@ -45,7 +45,7 @@ private DataSource createConnectionPool(){
 
     // Configure the Cloud SQL JDBC Socket Factory to provide authentication
     config.addDataSourceProperty("socketFactory", "com.google.cloud.sql.mysql.SocketFactory");
-    config.addDataSourceProperty("cloudSqlInstance", "kvg-testing:us-central1:test1");
+    config.addDataSourceProperty("cloudSqlInstance", "first-bigtable-dashboard:us-central1:myinstance");
     config.addDataSourceProperty("useSSL", "false");
 
     config.setMaximumPoolSize(5); // Limit the maximum number of connections

diff --git a/cloud-sql/servlet/src/main/webapp/css/index.css b/cloud-sql/servlet/src/main/webapp/css/index.css
diff --git a/cloud-sql/servlet/src/main/webapp/index.jsp b/cloud-sql/servlet/src/main/webapp/index.jsp
@@ -19,55 +19,84 @@ limitations under the License.
 <html lang="en">
 <head>
     <title>Tabs VS Spaces</title>
-    <link rel="stylesheet" type="text/css" href="css/index.css">
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 </head>
 <body>
-    <div id="main" >
-        <aside> </aside>
-        <article>
-            <div id="title">
-                <h1 class="tabs">TABS</h1>
-                <p>vs</p>
-                <h1 class="spaces">SPACES</h1>
-            </div>
-            <div id="tally">
-                <p id="tabs-tally">Tabs: <%= request.getAttribute("tabVoteCt") %></p>
-                <p id="spaces-tally">Spaces: <%= request.getAttribute("spaceVoteCt") %></p>
-                <p id="winner">Currently <b><%= request.getAttribute("winningTeam") %></b> is winning by <%= request.getAttribute("voteDiff") %> votes</p>
+<nav>
+    <div class="nav-wrapper">
+        <a href="#" class="brand-logo center">Tabs vs. Spaces</a>
+    </div>
+</nav>
+
+<%
+    String tabsWinning = "";
+    if (request.getAttribute("winningTeam") == "TABS") {
+        tabsWinning = "green lighten-4";
+    }
+    String spacesWinning = "";
+    if (request.getAttribute("winningTeam") == "SPACES") {
+        spacesWinning = "green lighten-4";
+    }
+%>
+<div class="section">
+    <div class="row center">
+        <div class="col s6 m5 offset-m1">
+            <div class="card-panel <%= tabsWinning %>">
+                <h3>Tabs</h3>
+                <h3><%= request.getAttribute("tabVoteCt") %></h3>
             </div>
-            <div id="history">
-                <%
-                    List<String> votesTeam = (List<String>) request.getAttribute("votesTeam");
-                    List<Timestamp> votesTs = (List<Timestamp>) request.getAttribute("votesTs");
-                    for(int i = 0; i < votesTeam.size(); i+=1) { %>
-                    <div><%= votesTeam.get(i) %> received vote at <%= votesTs.get(i) %>. </div>
-                <% } %>
+        </div>
+        <div class="col s6 m5">
+            <div class="card-panel <%= spacesWinning %>">
+                <h3>Spaces</h3>
+                <h3><%= request.getAttribute("spaceVoteCt") %></h3>
             </div>
-            <button id="voteTabs" type="button">Vote for tabs!</button>
-            <button id="voteSpaces" type="button">Vote for spaces!</button>
-        </article>
-        <aside> </aside>
+        </div>
     </div>
+</div>
+<div class="section center">
+    <h4>Currently, <%= request.getAttribute("winningTeam") %> is winning by
+        <%= request.getAttribute("voteDiff") %> votes</h4>
+    <h4>Vote for your favorite:</h4>
+    <button id="voteTabs" class="btn">tabs</button>
+    <button id="voteSpaces" class="btn">spaces</button>
+</div>
+
+<ul class="collection with-header">
+    <li class="collection-header"><h4>Votes</h4></li>
+    <%
+        List<String> votesTeam = (List<String>) request.getAttribute("votesTeam");
+        List<Timestamp> votesTs = (List<Timestamp>) request.getAttribute("votesTs");
+        for (int i = 0; i < votesTeam.size(); i += 1) { %>
+    <li class="collection-item"><div><%= votesTeam.get(i) %> received vote at <%= votesTs.get(i) %></div></li>
+    <% } %>
+</ul>
 </body>
 <footer>
     <script>
-      function vote(team){
+      function vote(team) {
         var xhr = new XMLHttpRequest();
-        xhr.onreadystatechange = function() {
+        xhr.onreadystatechange = function () {
           var msg = "";
-          if (this.readyState == 4){
-            if(!window.alert(this.responseText)){
+          if (this.readyState == 4) {
+            if (!window.alert(this.responseText)) {
               window.location.reload();
             }
           }
         };
-        xhr.open("POST","/", true);
+        xhr.open("POST", "/", true);
         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-        xhr.send("team="+team);
+        xhr.send("team=" + team);
       }
 
-      document.getElementById("voteTabs").addEventListener("click", function() { vote("tabs"); });
-      document.getElementById("voteSpaces").addEventListener("click", function() { vote("spaces"); });
+      document.getElementById("voteTabs").addEventListener("click", function () {
+        vote("tabs");
+      });
+      document.getElementById("voteSpaces").addEventListener("click", function () {
+        vote("spaces");
+      });
     </script>
 </footer>
 </html>