You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

143 lines
4.5 KiB
HTML

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

<!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>