jenschr/combined.html

## combined.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" />
  <title>Konkurranse Nespresso</title>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js" integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g=" crossorigin="anonymous"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <!-- MQTT comms -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.1.0/paho-mqtt.min.js" type="text/javascript"></script>
  <script>
    // client, user and device details
    var serverUrl   = "my.mqtt.server.com"; // i.e. "great-server.cloudmqtt.com"
    var serverPort  = 443; // cloudmqtt only accepts WSS sockets on this port. Others will use 9001, 8883 or others
    var clientId    = "wsbrowser_"+new Date().getUTCMilliseconds(); // make client name unique
    var username    = "writeUsernameHere"; // fill in here
    var password    = "writePasswordHere"; // fill in here

    var undeliveredMessages = []; // keep track of undelivered messages in this object (so you can resend later)

    // configure the client to Cumulocity
    var client = new Paho.Client(serverUrl, Number(serverPort), clientId);
    client.onConnectionLost = onConnectionLost;
    client.onMessageArrived = onMessageArrived;
    client.onMessageDelivered = onMessageDelivered;

    function onConnectionLost(responseObject) {
      if (responseObject.errorCode !== 0){
        log("onConnectionLost:"+responseObject.errorMessage);
      }
    };

    // display all incoming messages
    function onMessageArrived(message) {
        log('Received message "' + message.payloadString + '"');
    };

    // display all delivered messages
    function onMessageDelivered (message) {
        log('Message "' + message.payloadString + '" delivered');
        var undeliveredMessage = undeliveredMessages.pop(); // Note that this just pops the last msg. Could be smarter!
        if (undeliveredMessage.onMessageDeliveredCallback) {
            undeliveredMessage.onMessageDeliveredCallback();
        }
    }

    function onConnected () {
        log("Connected");
    }

    // send a message
    function publish (topic, message, onMessageDeliveredCallback) {
        message = new Paho.Message(message);
        message.destinationName = topic;
        message.qos = 2;
        undeliveredMessages.push({
            message: message,
            onMessageDeliveredCallback: onMessageDeliveredCallback
        });
        client.send(message);
        log("sent: "+message+" to "+topic);
    }

    // connect the client to Cumulocity
    function init () {
        client.connect({
            userName: username,
            password: password,
            onSuccess: onConnected,
            useSSL: true
        });
    }

    // display all messages on the page
    function log (message) {
        console.log(message);
    }

    $( document ).ready(function() {
      $( "#sendit" ).click(function() {
        log("Send!");
        publish("/home/registrering","{sent:1}");
      });
    });


    init();
  </script>
</head>
<body>
    <div id="root">
        <div class="input"><input type="text" name="characters"><input type="button" name="Submit" id="sendit" value="Send"></div>
    </div>
</body>
	<!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" />
	<title>Konkurranse Nespresso</title>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js" integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g=" crossorigin="anonymous"></script>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<!-- MQTT comms -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.1.0/paho-mqtt.min.js" type="text/javascript"></script>
	<script>
	// client, user and device details
	var serverUrl = "my.mqtt.server.com"; // i.e. "great-server.cloudmqtt.com"
	var serverPort = 443; // cloudmqtt only accepts WSS sockets on this port. Others will use 9001, 8883 or others
	var clientId = "wsbrowser_"+new Date().getUTCMilliseconds(); // make client name unique
	var username = "writeUsernameHere"; // fill in here
	var password = "writePasswordHere"; // fill in here

	var undeliveredMessages = []; // keep track of undelivered messages in this object (so you can resend later)

	// configure the client to Cumulocity
	var client = new Paho.Client(serverUrl, Number(serverPort), clientId);
	client.onConnectionLost = onConnectionLost;
	client.onMessageArrived = onMessageArrived;
	client.onMessageDelivered = onMessageDelivered;

	function onConnectionLost(responseObject) {
	if (responseObject.errorCode !== 0){
	log("onConnectionLost:"+responseObject.errorMessage);
	}
	};

	// display all incoming messages
	function onMessageArrived(message) {
	log('Received message "' + message.payloadString + '"');
	};

	// display all delivered messages
	function onMessageDelivered (message) {
	log('Message "' + message.payloadString + '" delivered');
	var undeliveredMessage = undeliveredMessages.pop(); // Note that this just pops the last msg. Could be smarter!
	if (undeliveredMessage.onMessageDeliveredCallback) {
	undeliveredMessage.onMessageDeliveredCallback();
	}
	}

	function onConnected () {
	log("Connected");
	}

	// send a message
	function publish (topic, message, onMessageDeliveredCallback) {
	message = new Paho.Message(message);
	message.destinationName = topic;
	message.qos = 2;
	undeliveredMessages.push({
	message: message,
	onMessageDeliveredCallback: onMessageDeliveredCallback
	});
	client.send(message);
	log("sent: "+message+" to "+topic);
	}

	// connect the client to Cumulocity
	function init () {
	client.connect({
	userName: username,
	password: password,
	onSuccess: onConnected,
	useSSL: true
	});
	}

	// display all messages on the page
	function log (message) {
	console.log(message);
	}

	$( document ).ready(function() {
	$( "#sendit" ).click(function() {
	log("Send!");
	publish("/home/registrering","{sent:1}");
	});
	});


	init();
	</script>
	</head>
	<body>
	<div id="root">
	<div class="input"><input type="text" name="characters"><input type="button" name="Submit" id="sendit" value="Send"></div>
	</div>
	</body>