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.

116 lines
3.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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 type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/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('http://localhost:8080');
var app = new Vue({
el: "#app",
delimiters: ['[[', ']]'],
data: {
channel: {{ channel }},
username: '{{ username }}',
messages: [
{% for message in chat %}
{
username: '{{ username }}',
text: '{{ message.message | replace("\n", " ") }}',
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) {
// 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
});
});
</script>
</body>
</html>