145 lines
4.5 KiB
HTML
Executable File
145 lines
4.5 KiB
HTML
Executable File
<!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>
|