Socket working when creating new channel

Author: vdhug

project2/README.md

@@ -0,0 +1,3 @@
+# Project 2
+
+Web Programming with Python and JavaScript

project2/__pycache__/application.cpython-37.pyc

@@ -0,0 +1,126 @@
+import os
+
+import json
+
+from flask import Flask, session, render_template, request, session, jsonify
+from flask_session import Session
+from flask_socketio import SocketIO, emit
+from flask_sqlalchemy import SQLAlchemy
+
+
+from models import *
+
+app = Flask(__name__)
+
+database = SQLAlchemy()
+
+# Check for environment variable
+if not os.getenv("DATABASE_URL"):
+    raise RuntimeError("DATABASE_URL is not set")
+
+app.config["SQLALCHEMY_DATABASE_URI"] = os.getenv("DATABASE_URL")
+app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+db.init_app(app)
+
+app.config["SECRET_KEY"] = os.getenv("SECRET_KEY")
+socketio = SocketIO(app)
+
+# Configure session to use filesystem
+app.config["SESSION_PERMANENT"] = False
+app.config["SESSION_TYPE"] = "filesystem"
+Session(app)
+
+
+@app.route("/")
+def index():
+    if "user" not in session.keys() or session["user"] is None:
+        return render_template("login.html")
+    else:
+        return render_template("index.html")
+
+
+@app.route("/login", methods=["GET", "POST"])
+def login():
+
+    if request.method == "POST":
+        email = request.form.get("email")
+        password = request.form.get("password")
+        #Selec user
+        u = User.query.filter_by(email=email).first()
+        if u is None or u.password != password:
+        	return render_template("error.html", message="Username or password incorrect")
+        else:
+            session["user"] = u
+            return render_template("index.html")
+    
+    return render_template("login.html")
+
+
+@app.route("/logout")
+def logout():
+    """ Logout the user and clean the cache session"""
+    session["user"] = None
+    return render_template("login.html")
+
+
+@app.route("/register", methods=["GET", "POST"])
+def register():
+    if request.method == 'GET':
+        return render_template("register.html")
+    else:
+        name = request.form.get("name")
+        email = request.form.get("email")
+        password = request.form.get("password")
+        # Create new user
+        u = User(name=name, email=email, password=password)
+
+        #Add new user in the database
+        u.add_user()
+
+        return render_template("login.html")
+
+
+@socketio.on("create channel")
+def socket_create_channel(data):
+    c = Channel(name=data['name'], user_id=session['user'].id)
+    c = c.add_channel()
+    data['id'] = c.id 
+    emit("channel created", data, broadcast=True)
+    
+
+
+@app.route("/create_channel", methods=["GET"])
+def create_channel():
+    if request.method == "GET":
+       return render_template("create_channel.html")
+       
+
+@app.route("/join/<string:id>", methods=["GET"])
+def join(id):
+    if request.method == "GET":
+        c = Channel.query.get(id)
+        c.add_user_in_channel(session['user'].id)
+
+        return render_template("messages.html", channel=c)
+
+@app.route("/my_channels", methods=["GET"])
+def my_channels():
+    my_channels = Channel.query.filter_by(user_id=session["user"].id).all()
+    return render_template("my_channels.html", my_channels=my_channels)
+
+
+@app.route("/others_channels", methods=["GET"])
+def others_channels():
+    channels = User_has_channel.query.filter_by(user_id=session["user"].id)
+    my_channels = []
+    for channel in channels:
+        c = Channel.query.filter_by(id=channel.channel_id).first()
+        my_channels.append(c)
+    
+    others_channels = Channel.query.all()
+
+    
+    for channel in my_channels:
+        if channel in others_channels:
+            others_channels.remove(channel)
+    return render_template("others_channels.html", others_channels=others_channels)

project2/__pycache__/classes.cpython-37.pyc

@@ -0,0 +1,16 @@
+import os
+
+from flask import Flask, render_template, request
+from models import *
+
+app = Flask(__name__)
+app.config["SQLALCHEMY_DATABASE_URI"] = os.getenv("DATABASE_URL")
+app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+db.init_app(app)
+
+def main():
+    db.create_all()
+
+if __name__ == "__main__":
+    with app.app_context():
+        main()

project2/__pycache__/models.cpython-37.pyc

@@ -0,0 +1,62 @@
+import os
+
+from flask import Flask
+from flask_sqlalchemy import SQLAlchemy
+
+db = SQLAlchemy()
+
+class Channel(db.Model):
+    __tablename__ = "channels"
+    id = db.Column(db.Integer, primary_key=True)
+    name = db.Column(db.String, nullable=False)
+    user_id = db.Column(db.Integer, db.ForeignKey("users.id"), nullable=False)
+    messages = db.relationship("Message", backref="channel", lazy=True)
+    users = db.relationship("User_has_channel", backref="channel", lazy=True)
+    
+    def add_channel(self):
+        db.session.add(self)
+        db.session.commit()
+        return self
+
+    def add_user(self):
+        u = User_has_channel(user_id=self.user_id, channel_id=self.id)
+        db.session.add(u)
+        db.session.commit()
+
+    def add_message(self, message, user_id):
+        m = Message(message=message, channel_id=self.id, user_id=user_id)
+        db.session.add(m)
+        db.session.commit()
+    
+    def add_user_in_channel(self, user_id):
+        u = User_has_channel(user_id=user_id, channel_id=self.id)
+        db.session.add(u)
+        db.session.commit()
+    
+
+class User(db.Model):
+    __tablename__ = "users"
+    id = db.Column(db.Integer, primary_key=True)
+    name = db.Column(db.String, nullable=False)
+    email = db.Column(db.String, nullable=False)
+    password = db.Column(db.String, nullable=False)
+    channels = db.relationship("User_has_channel", backref="user", lazy=True)
+
+    def add_user(self):
+        db.session.add(self)
+        db.session.commit()
+
+
+class User_has_channel(db.Model):
+    __tablename__ = "users_has_channels"
+    id = db.Column(db.Integer, primary_key=True)
+    user_id = db.Column(db.Integer, db.ForeignKey("users.id"), nullable=False)
+    channel_id = db.Column(db.Integer, db.ForeignKey("channels.id"), nullable=False)
+
+
+class Message(db.Model):
+    __tablename__ = "messages"
+    id = db.Column(db.Integer, primary_key=True)
+    user_id = db.Column(db.Integer, db.ForeignKey("users.id"), nullable=False)
+    channel_id = db.Column(db.Integer, db.ForeignKey("channels.id"), nullable=False)
+    message = db.Column(db.String, nullable=False)

project2/application.py

@@ -0,0 +1,7 @@
+Flask
+Flask-SocketIO
+Flask
+Flask-Session
+psycopg2
+SQLAlchemy
+flask_sqlalchemy

project2/create.py

@@ -0,0 +1,35 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+    // Connect to websocket
+    var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);
+
+    // When connected, configure buttons
+    socket.on('connect', () => {
+
+        // Each button should emit a "submit vote" event
+        document.querySelectorAll('button').forEach(button => {
+            button.onclick = () => {
+                const name = document.getElementById("channelName").value;
+                alert("SOCKET TRIGGERED")
+                var result = socket.emit('create channel', {'id': 0, 'name': name});
+                
+            };
+        });
+    });
+
+    // When a new vote is announced, add to the unordered list
+    socket.on('channel created', data => {
+        alert("EMIT")
+        // Find a <table> element with id="channels":
+        var table = document.getElementById("channels");
+
+        // Create an empty <tr> element and add it to the 1st position of the table:
+        var row = table.insertRow(-1);
+
+        // Insert new cells (<td> elements) at the 1st position of the "new" <tr> element:
+        var cell1 = row.insertCell(0);
+
+        // Add some text to the new cell:
+        cell1.innerHTML = data["name"];
+    });
+});

project2/flask_session/04e8a9453479b242a24b9f0de44880fa

@@ -0,0 +1,11 @@
+document.addEventListener('DOMContentLoaded', () => {
+    
+    document.querySelectorAll('button').forEach(button => {
+        button.onclick = () => {
+            var channelName = document.querySelector('#channelName').value;
+            socket.emit('create channel', {'channelName': channelName});
+        };
+    });
+
+   
+});

project2/flask_session/2029240f6d1128be89ddc32729463129

@@ -0,0 +1,17 @@
+{% extends "layout.html" %}
+
+{% block title %}
+	Error
+{% endblock %}
+
+{% block body %}
+	<h1>Error</h1>
+	
+	<div class="form-group">
+		<h3> {{ message }} </h3>	
+	</div>
+
+	<div class="form-group">
+		<a href="{{ url_for('index') }}">Return to index</a>
+	</div>
+{% endblock %}

project2/flask_session/361259bbe02ac35864935a289a4f2e8c

@@ -0,0 +1,22 @@
+{% extends "layout.html" %}
+
+{% block title %}
+	Index
+{% endblock %}
+
+{% block body %}
+	<h1>Index</h1>
+
+
+	<div class="form-group">
+		<a href="{{ url_for('my_channels') }}">My Channels</a>
+	</div>
+
+	<div class="form-group">
+		<a href="{{ url_for('others_channels') }}">Others Channels</a>
+	</div>
+	
+	<div class="form-group">
+		<a href="{{ url_for('logout') }}">Log Out</a>
+	</div>
+{% endblock %}

project2/flask_session/382c2d77d5445403be7172ed57bb0a5e

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>{% block title %} {% endblock %}</title>
+		<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
+		<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
+		{% block head %} {% endblock %}
+	</head>
+	<body>
+		<div class="container">
+			{% block body %}
+			{% endblock %}
+		</div>
+
+	</body>
+</html>

project2/flask_session/46a37335276b11cd931a6961fbbb5332

@@ -0,0 +1,26 @@
+{% extends "layout.html" %}
+
+{% block title %}
+	Login
+{% endblock %}
+
+{% block body %}
+	<h1>Login</h1>
+	<form action="{{ url_for('login') }}" method="post">
+		<div class="form-group">
+			<input class="form-control" type="name" name="email" placeholder="email">
+		</div>
+		<div class="form-group">
+			<input class="form-control" type="password" name="password" placeholder="password">
+		</div>
+
+		<div class="form-group">
+			<button class="btn btn-primary">Login</button>
+		</div>
+	</form>
+
+	<div class="form-group">
+		<label>Does not have an account? <a href="{{ url_for('register') }}">Sign Up Here</a></label>
+	</div>
+	
+{% endblock %}

project2/flask_session/85fe581e5ee1d1de0b0cf6bfb79b4661

@@ -0,0 +1,21 @@
+{% extends "layout.html" %}
+
+
+{% block title %}
+	Channel {{channel.name}}
+{% endblock %}
+
+{% block body %}
+
+	<form>
+		<div class="form-group">
+			<input id="channelName" class="form-control" type="name" name="name" placeholder="name">
+		</div>
+	
+		<div class="form-group">
+			<button class="btn btn-primary">Send message</button>
+		</div>
+	</form>
+	<h1>Messages</h1>
+	
+{% endblock %}