ukmadlz/brumjs slackify

## brumjs slackify
<!DOCTYPE html(lang='en')>
<html>
  <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-->
    <meta name="description" content="How quick it is to write an offline webapp">
    <meta name="author" content="Mike Elsmore <mike.elsmore@uk.ibm.com>">
    <!-- Bootstrap core CSS-->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries-->
    <!--if lt IE 9script(src='https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js')
  script(src='https://oss.maxcdn.com/respond/1.4.2/respond.min.js')-->
  </head>
  <body>
    <div class="container" >
      <h1 class="text-center">Talk to me @ <span id="talktome" ><i class="fa fa-spinner fa-pulse" ></i></span>!</h1>
      <!-- Form -->
      <div class="row" >
        <div class="col-md-6 col-md-offset-3" >
          <form id="messageForm">
            <div class="form-group">
              <label for="user">User</label>
              <input type="text" class="form-control" id="user" placeholder="User" required="required">
            </div>
            <div class="form-group">
              <label for="message">Message</label>
              <textarea class="form-control" id="message" rows="3" required="required"></textarea>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
        </div>
      </dv>
    </div>

    <!-- Message Output -->
    <div class="row" >
      <div class="col-md-6 col-md-offset-3" id="messageOutput">

      </div>
    </div>
    <script type="text/javascript" src="bower_components/marked/marked.min.js" ></script>
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="bower_components/pouchdb/dist/pouchdb.min.js" ></script>
    <script type="text/javascript" >
    $(document).ready(function(){

      var database = 'brumjs';
      var db = PouchDB(database);

      $('#messageForm').on('submit', function(e) {
          var doc = {
              user: $('#user').val(),
              message: $('#message').val(),
              timestamp: (new Date()).toString()
          }
          db.post(doc, function(err, res) {
              if(err) console.log(err);
          });
          e.preventDefault();
          return false;
      });

      // Sync
      var remoteURL = 'https://7629945a-0968-4cf2-b98b-435bdd65d117-bluemix.cloudant.com/brumjs';
      PouchDB.sync(database, remoteURL);

      // Display all IM's
      db.allDocs({include_docs: true},function(err, resp){
        for (var i = 0; i <= resp.rows.length; i++) {
          var data = resp.rows[i];
          addMention(data);
          if(i==resp.rows.length-2) {
            sortMessage();
          }
        }
      });

      // Cheating Bit
      var changes = db.changes({
        since: 'now',
        live: true,
        include_docs: true
      }).on('change', function(change) {
        addMention(change);
        sortMessage();
      });

      // Tell people to go to
      $('#talktome').html(window.location.href);
    });
    var addMention = function(data) {
        var dateObj = new Date(data.doc.timestamp);
        var html = "<div class=\"row\" id=\"" +data.doc._id+ "\" data-timestamp=\"" +dateObj.getTime()+ "\">";
        html += "<p><strong>" + santise(data.doc.user) + ": " + dateObj.toString() + "</strong></p>";
        html += marked(data.doc.message);
        html += "<div class=\"\" ><a class=\"btn btn-default open\" ><i class=\"fa fa-search-plus\" ></i></a>";
        html += "<pre class=\"hide\" ><code>";
        html += JSON.stringify(data.doc.insights, null, ' ');
        html += "</code></pre>";
        html += "</div>";

        if(typeof $('#'+data.doc._id).html() == 'undefined') {
          $('#messageOutput').prepend(html);
        } else {
          $('#'+data.doc._id).html(html);
        }

        // View the extra data
        $('.open').on('click', function() {
          $(this).parent().children('pre').removeClass('hide');
        });

    }

    var sortMessage = function() {
      var ul = $("#messageOutput");
      var arr = $.makeArray(ul.children("div.row"));

      arr.sort(function(a, b) {
          var textA = +$(a).attr('data-timestamp');
          var textB = +$(b).attr('data-timestamp');

          if (textA < textB) return 1;
          if (textA > textB) return -1;

          return 0;
      });

      ul.empty();

      $.each(arr, function() {
          ul.append(this);
      });
    }

    var santise = function(str) {
      return str.replace(/(<([^>]+)>)/ig,"")
    }
    </script>
  </body>
</html>
	<!DOCTYPE html(lang='en')>
	<html>
	<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-->
	<meta name="description" content="How quick it is to write an offline webapp">
	<meta name="author" content="Mike Elsmore <mike.elsmore@uk.ibm.com>">
	<!-- Bootstrap core CSS-->
	<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries-->
	<!--if lt IE 9script(src='https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js')
	script(src='https://oss.maxcdn.com/respond/1.4.2/respond.min.js')-->
	</head>
	<body>
	<div class="container" >
	<h1 class="text-center">Talk to me @ <span id="talktome" ><i class="fa fa-spinner fa-pulse" ></i></span>!</h1>
	<!-- Form -->
	<div class="row" >
	<div class="col-md-6 col-md-offset-3" >
	<form id="messageForm">
	<div class="form-group">
	<label for="user">User</label>
	<input type="text" class="form-control" id="user" placeholder="User" required="required">
	</div>
	<div class="form-group">
	<label for="message">Message</label>
	<textarea class="form-control" id="message" rows="3" required="required"></textarea>
	</div>
	<button type="submit" class="btn btn-default">Submit</button>
	</form>
	</div>
	</dv>
	</div>

	<!-- Message Output -->
	<div class="row" >
	<div class="col-md-6 col-md-offset-3" id="messageOutput">

	</div>
	</div>
	<script type="text/javascript" src="bower_components/marked/marked.min.js" ></script>
	<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
	<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="bower_components/pouchdb/dist/pouchdb.min.js" ></script>
	<script type="text/javascript" >
	$(document).ready(function(){

	var database = 'brumjs';
	var db = PouchDB(database);

	$('#messageForm').on('submit', function(e) {
	var doc = {
	user: $('#user').val(),
	message: $('#message').val(),
	timestamp: (new Date()).toString()
	}
	db.post(doc, function(err, res) {
	if(err) console.log(err);
	});
	e.preventDefault();
	return false;
	});

	// Sync
	var remoteURL = 'https://7629945a-0968-4cf2-b98b-435bdd65d117-bluemix.cloudant.com/brumjs';
	PouchDB.sync(database, remoteURL);

	// Display all IM's
	db.allDocs({include_docs: true},function(err, resp){
	for (var i = 0; i <= resp.rows.length; i++) {
	var data = resp.rows[i];
	addMention(data);
	if(i==resp.rows.length-2) {
	sortMessage();
	}
	}
	});

	// Cheating Bit
	var changes = db.changes({
	since: 'now',
	live: true,
	include_docs: true
	}).on('change', function(change) {
	addMention(change);
	sortMessage();
	});

	// Tell people to go to
	$('#talktome').html(window.location.href);
	});
	var addMention = function(data) {
	var dateObj = new Date(data.doc.timestamp);
	var html = "<div class=\"row\" id=\"" +data.doc._id+ "\" data-timestamp=\"" +dateObj.getTime()+ "\">";
	html += "<p><strong>" + santise(data.doc.user) + ": " + dateObj.toString() + "</strong></p>";
	html += marked(data.doc.message);
	html += "<div class=\"\" ><a class=\"btn btn-default open\" ><i class=\"fa fa-search-plus\" ></i></a>";
	html += "<pre class=\"hide\" ><code>";
	html += JSON.stringify(data.doc.insights, null, ' ');
	html += "</code></pre>";
	html += "</div>";

	if(typeof $('#'+data.doc._id).html() == 'undefined') {
	$('#messageOutput').prepend(html);
	} else {
	$('#'+data.doc._id).html(html);
	}

	// View the extra data
	$('.open').on('click', function() {
	$(this).parent().children('pre').removeClass('hide');
	});

	}

	var sortMessage = function() {
	var ul = $("#messageOutput");
	var arr = $.makeArray(ul.children("div.row"));

	arr.sort(function(a, b) {
	var textA = +$(a).attr('data-timestamp');
	var textB = +$(b).attr('data-timestamp');

	if (textA < textB) return 1;
	if (textA > textB) return -1;

	return 0;
	});

	ul.empty();

	$.each(arr, function() {
	ul.append(this);
	});
	}

	var santise = function(str) {
	return str.replace(/(<([^>]+)>)/ig,"")
	}
	</script>
	</body>
	</html>