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