foofoodog/index.htm

## index.htm
<html>
<head>
    <script>
     var printers = [
        {name: "folger", key: "raspberry"},
        {name: "simple", key: "raspberry"},
        {name: "solid", key: "raspberry"},
        {name: "printrbot", key: "raspberry"}
    ];
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
</head>
<body>
    <!--UI-->
    <div id="printers">
        <div data-bind="template: { name: 'printer-template', foreach: printers }"></div>
    </div>
    <!--Template-->
    <script type="text/html" id="printer-template">
        <div>
            <h2 data-bind="text: name"></h2>
            <b>Printer:</b> <span data-bind="text: ko.toJSON($data.printer)"></span>
            <hr />
            <b>Connection:</b> <span data-bind="text: ko.toJSON($data.connection)"></span>
            <hr />
            <b>Job:</b> <span data-bind="text: ko.toJSON($data.job)"></span>
            <hr />
            <!--<b>Files:</b> <span data-bind="text: ko.toJSON($data.files)"></span><hr />-->
        </div>
    </script>
    <!--Script-->
    <script>
    var api = {
        interval: 5000,
        calls: ["printer","job","connection" /*, "files" */],
        printers: printers,
        add: function (name, key) {
            api.printers.push({name: name, key: key})
        },
        get: function(printer, call) {
            var url = "http://" + printer.name + "/api/" + call + "?apikey=" + printer.key;
            return $.get(url).done(function(data) {
                 printer[call] = data;
             });
        },
        refresh: function() {
            api.printers.forEach(function(printer) {
                api.calls.forEach(function(call) {
                    api.get(printer, call).then(function() {
                        api.onRefresh(api.printers);
                    });
                });
            });
        },
        onRefresh: function() {} // default: NOOP
    }
    var viewModel  = function(elementId) {
        var self = this;
        self.element = document.getElementById(elementId);
        self.printers = ko.observableArray();
        self.bind = function(printers) {
            self.printers(printers);
            ko.cleanNode(self.element); // hackish
            ko.applyBindings(self, self.element) ;
        }
        api.onRefresh = function(printers) {self.bind(printers)};
        api.refresh();
        window.setInterval(api.refresh, api.interval);
    }
    var vm = new viewModel("printers");
    </script>
</body>
</html>
	<html>
	<head>
	<script>
	var printers = [
	{name: "folger", key: "raspberry"},
	{name: "simple", key: "raspberry"},
	{name: "solid", key: "raspberry"},
	{name: "printrbot", key: "raspberry"}
	];
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
	</head>
	<body>
	<!--UI-->
	<div id="printers">
	<div data-bind="template: { name: 'printer-template', foreach: printers }"></div>
	</div>
	<!--Template-->
	<script type="text/html" id="printer-template">
	<div>
	<h2 data-bind="text: name"></h2>
	<b>Printer:</b> <span data-bind="text: ko.toJSON($data.printer)"></span>
	<hr />
	<b>Connection:</b> <span data-bind="text: ko.toJSON($data.connection)"></span>
	<hr />
	<b>Job:</b> <span data-bind="text: ko.toJSON($data.job)"></span>
	<hr />
	<!--<b>Files:</b> <span data-bind="text: ko.toJSON($data.files)"></span><hr />-->
	</div>
	</script>
	<!--Script-->
	<script>
	var api = {
	interval: 5000,
	calls: ["printer","job","connection" /, "files" /],
	printers: printers,
	add: function (name, key) {
	api.printers.push({name: name, key: key})
	},
	get: function(printer, call) {
	var url = "http://" + printer.name + "/api/" + call + "?apikey=" + printer.key;
	return $.get(url).done(function(data) {
	printer[call] = data;
	});
	},
	refresh: function() {
	api.printers.forEach(function(printer) {
	api.calls.forEach(function(call) {
	api.get(printer, call).then(function() {
	api.onRefresh(api.printers);
	});
	});
	});
	},
	onRefresh: function() {} // default: NOOP
	}
	var viewModel = function(elementId) {
	var self = this;
	self.element = document.getElementById(elementId);
	self.printers = ko.observableArray();
	self.bind = function(printers) {
	self.printers(printers);
	ko.cleanNode(self.element); // hackish
	ko.applyBindings(self, self.element) ;
	}
	api.onRefresh = function(printers) {self.bind(printers)};
	api.refresh();
	window.setInterval(api.refresh, api.interval);
	}
	var vm = new viewModel("printers");
	</script>
	</body>
	</html>