<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>XPPL</title> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <link rel="stylesheet" href="/static/css/style.css"> <link rel="stylesheet" href="/static/js/jquery-ui-1.12.1.custom/jquery-ui.css"> {% block css %} {% endblock%} </head> <body> <div id="newstext"> <div class='marquee'> <div class='marquee-text'> This is the XPPL ~ Library XPUB ~ Updates </div> </div> </div> {% block header %} <header> {% include "header.html" %} </header> {% endblock %} <main> <div class="container"> {% block main %}{% endblock %} </div> </main> <footer> <div class="container"> {% include "footer.html" %} </div> </footer> {% block js %} {% endblock%} <script src="{{ url_for("static", filename="js/jquery-3.3.1.min.js") }}"></script> <script src="{{ url_for("static", filename="js/jquery-ui-1.12.1.custom/jquery-ui.js") }}"></script> <script src="{{ url_for("static", filename="js/jquery.marquee.min.js") }}"></script> <script type="text/javascript" src="{{ url_for("static", filename="js/jquery.tablesorter.js") }}"></script> <script src="{{ url_for("static", filename="js/app.js") }}"></script> <script src="{{ url_for("static", filename="js/vendor/socket.io.slim.js") }}"></script> <script src="{{ url_for("static", filename="js/vendor/vue.min.js") }}"></script> <script> function convertTime(inTime){ var time = inTime; time = time.match(/(\d+)\-(\d+)\-(\d+)\s*(\d+):(\d+):(\d+)/); time = new Date(time[1], time[2]-1, time[3], time[4], time[5], time[6], 0); console.log(time) return ('0'+time.getDate()).slice(-2) + '.' + ('0'+(time.getMonth()+1)).slice(-2) + '.' + time.getFullYear() +" " + ('0'+time.getHours()).slice(-2)+":"+ ('0'+time.getMinutes()).slice(-2); } //change addr when ONLINE::::::-> var socket = io.connect('{{server}}'); var app = new Vue({ el: "#app", delimiters: ['[[', ']]'], data: { channel: {{ channel }}, username: '{{ username }}', messages: [ {% for message in chat %} { username: '{{ username }}', text: {{ message.message | replace("\n", " ") | tojson}}, time: convertTime("{{message.time}}") }{% if not loop.last %},{% endif %} {% endfor %} ], newMessage: '' }, methods: { sendMessage: () => { // Send new message socket.emit('new_message', { channel: app.channel, username: app.username, text: app.newMessage, time: app.time }); // Clear text app.$set(app, 'newMessage', ''); } } }); socket.on('connect', function() { console.log('Connect') }); socket.on('channel-' + app.channel, function(msg) { console.log("new: "+msg.text) $(".messageback1").each(function() { var oldColor = $(this).css("background-color"); var randomColor = colorHash(msg.text).rgb; console.log("old: "+oldColor) console.log("new: "+randomColor) $(this).css({ background: "-webkit-gradient(linear, left top, left bottom, from("+oldColor+"), to("+randomColor+"))", backgroundColor: randomColor }); $('.messageback2').animate({ opacity: 0 }, 1000, function() { $('.messageback2').css({background: "-webkit-gradient(linear, left top, left bottom, from("+oldColor+"), to("+randomColor+"))", opacity: 1}) }); }); // Add new message to HTML let my_messages = app.messages; my_messages.push({ username: msg.username, text: msg.text, time: msg.time }) app.$set(app, 'messages', my_messages); $('.messages').stop ().animate ({ scrollTop: $('.messages')[0].scrollHeight }); }); document.getElementById("file_import_csv").onchange = function() { document.getElementById("form_import_csv").submit(); }; </script> </body> </html>