|
|
<!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">
|
|
|
{% 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>
|