fixed some styling errors

egoolsen · Feb 5, 2020 · d0e0c9a · d0e0c9a
1 parent a54685b
commit d0e0c9a
Show file tree

Hide file tree

Showing 10 changed files with 208 additions and 62 deletions.
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/website/application/database.py b/website/application/database.py
@@ -3,7 +3,6 @@
 from datetime import datetime
 import time
 
-
 # CONSTANTS
 
 FILE = "messages.db"
@@ -44,14 +43,19 @@ def _create_table(self):
         self.cursor.execute(query)
         self.conn.commit()
 
-    def get_all_messages(self, limit=100):
+    def get_all_messages(self, limit=100, name=None):
         """
         returns all messages
         :param limit: int
         :return: list[dict]
         """
-        query = f"SELECT * FROM {PLAYLIST_TABLE}"
-        self.cursor.execute(query)
+        if not name:
+            query = f"SELECT * FROM {PLAYLIST_TABLE}"
+            self.cursor.execute(query)
+        else:
+            query = f"SELECT * FROM {PLAYLIST_TABLE} WHERE NAME = ?"
+            self.cursor.execute(query, (name,))
+
         result = self.cursor.fetchall()
 
         # return messages in sorted order by date
@@ -63,6 +67,14 @@ def get_all_messages(self, limit=100):
 
         return list(reversed(results))
 
+    def get_messages_by_name(self, name, limit=100):
+        """
+        Gets a list of messages by user name
+        :param name: str
+        :return: list
+        """
+        return self.get_all_messages(limit, name)
+
     def save_message(self, name, msg):
         """
         saves the given message in the table

diff --git a/website/application/static/index.js b/website/application/static/index.js
@@ -47,10 +47,10 @@ async function load_messages() {
 
 $(function()
 {
-  $('#messages') .css({'height': (($(window).height()) * 0.8)+'px'});
+  $('.msgs') .css({'height': (($(window).height()) * 0.7)+'px'});
 
   $(window).bind('resize', function(){
-      $('#messages') .css({'height': (($(window).height()) - 200)+'px'});
+      $('.msgs') .css({'height': (($(window).height()) * 0.7)+'px'});
   });
 });
 
@@ -121,13 +121,12 @@ var socket = io.connect('http://' + document.domain + ':' + location.port);
       } )
     } )
   } )
-  socket.on( 'disconnect', async function( msg ) {
+  /*socket.on( 'disconnect', async function( msg ) {
       var usr_name = await load_name()
       socket.emit( 'event', {
       message: usr_name + ' just left the server...',
-      name: usr_name
     } )
-  })
+  })*/
   socket.on( 'message response', function( msg ) {
     add_messages(msg, true)
   })
@@ -139,5 +138,12 @@ window.onload = async function() {
     if (i == msgs.length-1) {scroll = true}
     add_messages(msgs[i], scroll)
   }
-
+
+  let name = await load_name()
+  if (name != ""){
+    $("#login").hide();
+  }else{
+    $("#logout").hide();
+  }
+
 }
diff --git a/website/application/templates/base.html b/website/application/templates/base.html
@@ -53,6 +53,7 @@
               float: left;
               color: #999;
             }
+
         </style>
         <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
@@ -70,9 +71,10 @@ <h1 class="navbar-brand" href="#">CHAT APP</h1>
           </button>
           <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
             <div class="navbar-nav">
-              <a class="nav-item nav-link active" href="/home">Chat <span class="sr-only">(current)</span></a>
-              <a class="nav-item nav-link" href="/login">Login</a>
-              <a class="nav-item nav-link" href="/logout">Logout</a>
+              <a class="nav-item nav-link" href="/home">Chat <span class="sr-only">(current)</span></a>
+                <a class="nav-item nav-link" href="/history">History</a>
+              <a class="nav-item nav-link" id="login" href="/login">Login</a>
+              <a class="nav-item nav-link" id="logout" href="/logout">Logout</a>
             </div>
           </div>
         </nav>
@@ -88,10 +90,8 @@ <h1 class="navbar-brand" href="#">CHAT APP</h1>
             {% endwith %}
         {% endblock %}
 
-        <div class="container">
-            {% block content %}
-            {% endblock %}
-        </div>
+        {% block content %}
+        {% endblock %}
 
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

diff --git a/website/application/templates/history.html b/website/application/templates/history.html
@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+
+{% block title %}Message History{% endblock %}
+
+{% block content %}
+
+<div class="row" style="padding-top:10px;" >
+    <div class="col"><hr></div>
+    <div class="col-auto"><p class="h3" align="center">View Message History</p></div>
+    <div class="col"><hr></div>
+</div>
+<div class="container">
+    <div class="overflow-auto" class="msgs" id="messagesHistory" style="overflow-y: scroll; height:500px;">
+        {% for msg in history %}
+            <div class="container darker"><b style="color:#000" class="left">{{msg["name"]}}</b><p> {{msg["message"]}}</p><span class="time-left">{{msg["time"]}}</span></div>
+        {% endfor %}
+    </div>
+</div>
+{% endblock %}
diff --git a/website/application/templates/index.html b/website/application/templates/index.html
@@ -18,14 +18,26 @@
 {% endblock %}
 
 {% block content %}
-<div id="messages" class="overflow-auto" style="overflow-y: scroll; height:500px;">
+<style>
+    .form button:hover,.form button:active,.form button:focus {
+        background: #43A047;
+    }
+</style>
+<div class="row" style="padding-top:10px;" >
+    <div class="col"><hr></div>
+    <div class="col-auto"><p class="h3" align="center">Start Chatting</p></div>
+    <div class="col"><hr></div>
 </div>
-<form id="msgForm" action="" method="POST" style="bottom:0; margin: 0% 0% 0% 0%;">
-    <div class="input-group mb-3">
-          <input type="text" class="form-control" placeholder="Message" aria-label="Message" id="msg">
-          <div class="input-group-append">
-            <button class="btn btn-outline-secondary" type="submit" id="sendBtn">Send</button>
-          </div>
+<div class="container">
+    <div id="messages" class="overflow-auto msgs" style="overflow-y: scroll; height:500px;">
     </div>
-</form>
+    <form id="msgForm" action="" method="POST" style="bottom:0; margin: 0% 0% 0% 0%;">
+        <div class="input-group mb-3">
+              <input type="text" class="form-control" placeholder="Message" aria-label="Message" id="msg">
+              <div class="input-group-append">
+                <button class="btn btn-success" type="submit" id="sendBtn">Send</button>
+              </div>
+        </div>
+    </form>
+</div>
 {% endblock %}
diff --git a/website/application/templates/login.html b/website/application/templates/login.html
@@ -22,19 +22,78 @@
     {% endwith %}
 {% endblock %}
 
-
 {% block content %}
-<form class="form-inline" action="#" method="POST">
-  <div class="form-group mb-2">
-    <label for="staticName2" class="sr-only">Name</label>
-    <input type="text" readonly class="form-control-plaintext" id="staticName2" value="Enter Your Name">
-  </div>
-  <div class="form-group mx-sm-3 mb-2">
-    <label for="inputName" class="sr-only">Name</label>
-    <input type="text" class="form-control" name="inputName" id="inputName" placeholder="First Name">
+<style type="text/css">
+@import url(https://fonts.googleapis.com/css?family=Roboto:300);
+
+.login-page {
+  width: 360px;
+  padding: 8% 0 0;
+  margin: auto;
+}
+.form {
+  position: relative;
+  z-index: 1;
+  background: #FFFFFF;
+  max-width: 360px;
+  margin: 0 auto 100px;
+  padding: 45px;
+  text-align: center;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+}
+.form input {
+  font-family: "Roboto", sans-serif;
+  outline: 0;
+  background: #f2f2f2;
+  width: 100%;
+  border: 0;
+  margin: 0 0 15px;
+  padding: 15px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+.form button {
+  text-transform: uppercase;
+  outline: 0;
+  width: 100%;
+  border: 0;
+  padding: 15px;
+  color: #FFFFFF;
+  font-size: 14px;
+  -webkit-transition: all 0.3 ease;
+  transition: all 0.3 ease;
+  cursor: pointer;
+}
+.form button:hover,.form button:active,.form button:focus {
+  background: #43A047;
+}
+.form .message {
+  margin: 15px 0 0;
+  color: #b3b3b3;
+  font-size: 12px;
+}
+.container {
+  position: relative;
+  z-index: 1;
+  max-width: 300px;
+  margin: 0 auto;
+}
+.container:before, .container:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+</style>
+
+<div class="login-page">
+  <div class="form">
+    <form class="login-form" action="#" method="POST">
+      <input type="text" name="inputName" id="inputName" placeholder="Your Name"/>
+      <button type="submit" class="btn btn-success mb-2">Submit</button>
+    </form>
   </div>
-  <button type="submit" class="btn btn-primary mb-2">Submit</button>
-</form>
+</div>
 
 <script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
 {% endblock %}