WU-51

app.py

@@ -1,4 +1,7 @@
-from flask import Flask, render_template, request, json, session, redirect
+from flask import Flask, render_template, request, json, session, redirect, Blueprint, url_for
+from flask_wtf import Form
+from wtforms.fields import StringField, SubmitField
+from wtforms.validators import Required
 #from flaskext.mysql import MySQL
 #from pony.orm import *
 import cv2
@@ -6,13 +9,18 @@ import logging as log
 import datetime as dt
 from time import sleep
 from flask_socketio import SocketIO
+from flask_socketio import emit, join_room, leave_room
 import smtplib
 
 
+main = Blueprint('main', __name__)
+
 app = Flask(__name__)
 app.secret_key = '523tvb6h3nio6r21cc4r1qx'
-
+app.debug = True
-socketio = SocketIO(app) 
+socketio = SocketIO()
+app.register_blueprint(main)
+socketio.init_app(app)
 
 # MySQL configurations
 #app.config['MYSQL_DATABASE_USER'] = 'root'
@@ -22,6 +30,67 @@ socketio = SocketIO(app)
 #mysql = MySQL()
 #mysql.init_app(app)
 
+
+@app.route('/groupChat', methods=['GET', 'POST'])
+def indexChat():
+    if "user" in session:
+        """Login form to enter a room."""
+        form = LoginForm()
+        if form.validate_on_submit():
+            session['name'] = session["user"]  #form.name.data
+            session['room'] = "Czat grupowy"    #form.room.data
+            return redirect(url_for('.chat'))
+        elif request.method == 'GET':
+            form.name.data = session.get('name', '')
+            form.room.data = session.get('room', '')
+        return render_template('indexChat.html', form=form)
+    else:
+        return render_template("error.html", error = "Brak dostępu!")
+
+@app.route('/chat')
+def chat():
+    if "user" in session:
+        """Chat room. The user's name and room must be stored in
+        the session."""
+        name = session["user"] #session.get('name', '')
+        room = "Czat grupowy"   #session.get('room', '')
+        if name == '' or room == '' or name == None:
+            return redirect("index.html")
+        return render_template('chat.html', name=name, room=room)
+    else:
+        return render_template("error.html", error = "Brak dostępu!")
+
+@socketio.on('joined', namespace='/chat')
+def joined(message):
+    """Sent by clients when they enter a room.
+    A status message is broadcast to all people in the room."""
+    room = "Czat grupowy"   #session.get('room')
+    join_room(room)
+    emit('status', {'msg': session.get('user').split('@')[0] + ' wszedł na czat'}, room=room)
+
+
+@socketio.on('text', namespace='/chat')
+def text(message):
+    """Sent by a client when the user entered a new message.
+    The message is sent to all people in the room."""
+    room = "Czat grupowy"   #session.get('room')
+    emit('message', {'msg': session.get('user').split('@')[0] + ':' + message['msg']}, room=room)
+
+
+@socketio.on('left', namespace='/chat')
+def left(message):
+    """Sent by clients when they leave a room.
+    A status message is broadcast to all people in the room."""
+    room = "Czat grupowy" #session.get('room')
+    leave_room(room)
+    emit('status', {'msg': session.get('user').split('@')[0] + ' opuścił czat'}, room=room)
+
+class LoginForm(Form):
+    """Accepts a nickname and a room."""
+    name = StringField('Name', validators=[Required()])
+    room = StringField('Room', validators=[Required()])
+    submit = SubmitField('Wejdź na czat')
+
 faces_list = []
 testing_face = 0
  
@@ -130,7 +199,7 @@ def validateLogin():
         server = smtplib.SMTP_SSL('smtp.gmail.com', 465)
         server.ehlo()
         server.login(gmail_username, gmail_password)
-        session['user'] = gmail_username
+        session['user'] = gmail_username.split('@')[0]
         return render_template('userHome.html', user=gmail_username.split('@')[0])            
     except:
         return render_template('error.html',error = 'Zły email lub hasło!')
@@ -180,7 +249,7 @@ def validateLoginENG():
         server = smtplib.SMTP_SSL('smtp.gmail.com', 465)
         server.ehlo()
         server.login(gmail_username, gmail_password)
-        session['user'] = gmail_username
+        session['user'] = gmail_username.split('@')[0]
         return render_template('userHomeENG.html', user=gmail_username.split('@')[0])            
     except:
         return render_template('errorENG.html',error = 'Wrong email or password!')
@@ -499,4 +568,5 @@ def signInWithFaceENG():
 if __name__ == "__main__":
     #app.run(host='0.0.0.0')
     # Port: 5000
-    socketio.run(app, debug=True)
+    #socketio.run(app, debug=True)
+    socketio.run(app)

templates/chat.html

@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<!--<html lang="en">-->
+<html lang="pl-PL">
+ 
+<head>
+    <meta charset="UTF-8">
+    <title>Python Flask App</title>
+ 
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="signup.css">
+    <!-- <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> -->
+ 
+    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
+    <link href="../static/css/signup.css" rel="stylesheet">
+    <link rel="stylesheet" href="../static/css/calendar.css">
+  <style>
+table, td, th {    
+    border: 1px solid;
+    text-align: left;
+}
+
+table {
+    border-collapse: collapse;
+    /*width: 100%;*/
+}
+
+th, td {
+    padding: 5px;
+}
+
+ul {list-style-type: none;}
+body {font-family: Verdana, sans-serif;}
+
+/* Month header */
+.month {
+    /*padding: 70px 25px;*/
+    width: 100%;
+    background: #1abc9c;
+    text-align: center;
+}
+
+/* Month list */
+.month ul {
+    margin: 0;
+    padding: 0;
+}
+
+.month ul li {
+    color: white;
+    font-size: 20px;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+}
+
+/* Previous button inside month header */
+.month .prev {
+    float: left;
+    padding-top: 10px;
+}
+
+/* Next button */
+.month .next {
+    float: right;
+    padding-top: 10px;
+}
+
+/* Weekdays (Mon-Sun) */
+.weekdays {
+    margin: 0;
+    padding: 10px 0;
+    background-color:#ddd;
+}
+
+.weekdays li {
+    display: inline-block;
+    width: 13.6%;
+    color: #666;
+    text-align: center;
+}
+
+/* Days (1-30) */
+.days {
+    padding: 10px 0;
+    background: cyan;
+    margin: 0;
+}
+
+.days li {
+    list-style-type: none;
+    display: inline-block;
+    width: 13.6%;
+    text-align: center;
+    margin-bottom: 5px;
+    font-size:12px;
+    color: #777;
+}
+
+/* Highlight the "current" day */
+.days li .active {
+    padding: 5px;
+    background: #1abc9c;
+    color: white !important
+}
+</style>
+
+<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
+        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
+        <script type="text/javascript" charset="utf-8">
+            var socket;
+            $(document).ready(function(){
+                socket = io.connect('http://' + document.domain + ':' + location.port + '/chat');
+                socket.on('connect', function() {
+                    socket.emit('joined', {});
+                });
+                socket.on('status', function(data) {
+                    $('#chat').val($('#chat').val() + '<' + data.msg + '>\n');
+                    $('#chat').scrollTop($('#chat')[0].scrollHeight);
+                });
+                socket.on('message', function(data) {
+                    if (data.msg != "") {
+                        $('#chat').val($('#chat').val() + data.msg + '\n');
+                        $('#chat').scrollTop($('#chat')[0].scrollHeight);
+                    }
+                });
+                $('#text').keypress(function(e) {
+                    var code = e.keyCode || e.which;
+                    if (code == 13) {
+                        text = $('#text').val();
+                        $('#text').val('');
+                        socket.emit('text', {msg: text});
+                    }
+                });
+            });
+            function leave_room() {
+                socket.emit('left', {}, function() {
+                    socket.disconnect();
+
+                    // go back to the login page
+                    window.location.href = "{{ url_for('userHome') }}";
+                });
+            }
+        </script>
+
+ 
+</head>
+ 
+<body>
+ 
+    <div class="container">
+        <div class="header">
+            <nav>
+                <ul class="nav nav-pills pull-left">
+                    <!--<form><input type="button" value="Back" onClick="history.go(-1);return true;"></form>-->
+                    <!--<li role="presentation" class="active"><input type="button" value="Back" onClick="history.go(-1);return true;">
+                    </li>-->
+                    <!--<li role="presentation" class="active"><form action="http://google.com"><input type="button" value="Wstecz" onClick="history.go(-1);return true;"></form></li>-->
+                    <li role="presentation" class="active"><a href="/userHome">Wstecz</a>
+                    </li>
+                </ul>
+                <ul class="nav nav-pills pull-right">
+                    <li role="presentation" class="active"><a href="/logout">Wyloguj</a>
+                    </li>
+                </ul>
+            </nav>
+            <h3 class="text-muted"><center>Python Flask</center></h3>
+        </div>
+ 
+        <div class="jumbotron" style="height: 550px;">
+           <h1>{{ room }}</h1>
+        <textarea readonly id="chat" cols="80" rows="15"></textarea><br><br>
+        <input id="text" size="80" placeholder="Tutaj wpisz swoją wiadomość"><br><br>
+        <a href="#" onclick="leave_room();" style="border:1px;">Wyjdź z czatu</a>
+        
+ 
+        
+ 
+    </div><footer class="footer">
+            <p>&copy; UAM 2018</p>
+        </footer>
+</body>
+ 
+</html>

templates/indexChat.html

@@ -0,0 +1,14 @@
+<html>
+    <head>
+        <title>Czat grupowy</title>
+    </head>
+    <body>
+        <h1>Czat grupowy</h1>
+        <form method="POST">
+            {{ form.hidden_tag() }}
+            {{ form.name.label }}: {{ form.name() }} {% for error in form.name.errors %}{{ error }}{% endfor %}<br>
+            {{ form.room.label }}: {{ form.room() }} {% for error in form.room.errors %}{{ error }}{% endfor %}<br>
+            {{ form.submit() }}
+        </form>
+    </body>
+</html>

templates/userHome.html

@@ -115,8 +115,6 @@ body {font-family: Verdana, sans-serif;}
                     <!--<li role="presentation" class="active"><input type="button" value="Back" onClick="history.go(-1);return true;">
                     </li>-->
                     <!--<li role="presentation" class="active"><form action="http://google.com"><input type="button" value="Wstecz" onClick="history.go(-1);return true;"></form></li>-->
-                    <li role="presentation" class="active"><a href="javascript:history.back()">Wstecz</a>
-                    </li>
                     <li role="presentation" class="active"><a href="userHomeENG">ENG</a>
                     </li>
                 </ul>
@@ -183,6 +181,10 @@ body {font-family: Verdana, sans-serif;}
             <a class="btn btn-lg btn-success" href="#" role="button">Moje zajęcia</a>
             <a class="btn btn-lg btn-success" href="#" role="button">Test</a>
             <a class="btn btn-lg btn-success" href="#" role="button">Wyniki</a>
+            <a class="btn btn-lg btn-success" href="chat" role="button" style="margin-top:5px;">Czat grupowy</a>
+            <!-- <form action="ch"> -->
+            <!-- <input type="submit" value="Wejdź na czat grupowy" /> -->
+        <!-- </form> -->
            </p>
  <table>
   <tr>
@@ -209,26 +211,12 @@ body {font-family: Verdana, sans-serif;}
     <td>12:00</td>
     <td>brak</td>
   </tr>
-  <tr>
-    <td>13:00</td>
-    <td>brak</td>
-  </tr>
-  <tr>
-    <td>14:00</td>
-    <td>brak</td>
-  </tr>
-  <tr>
-    <td>15:00</td>
-    <td>brak</td>
-  </tr>
-  <tr>
-    <td>16:00</td>
-    <td>brak</td>
-  </tr>
 </table>
         </div>
         
         
+        
+ 
         <footer class="footer">
             <p>&copy; UAM 2018</p>
         </footer>