<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="./js/hammer.js"></script>
<script src="./js/es6-shim.min.js"></script>
<script src="./js/eve.js"></script>
<script src="./js/inputAgent.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script language="JavaScript">
var inputProxy;
</script>
<script src="./js/init.js"></script>
<script language="JavaScript">
// to run this, also have webHttp.js running in node.
eve.system.init({
transports: [
{
type: 'ws',
url: 'ws://agents/:id'
},
{
type: 'http'
}
]
});
var proxyAddress = 'ws://afternoon-beyond-2302.herokuapp.com/agents/proxy';
var proxyAddressHTTP = 'https://afternoon-beyond-2302.herokuapp.com/agents/proxy';
// proxyAddress = 'ws://127.0.0.1:5000/agents/proxy';
// proxyAddressHTTP = 'http://127.0.0.1:5000/agents/proxy';
inputProxy = new inputAgent('inputAgent', proxyAddress);
inputProxy.wakeProxy(proxyAddressHTTP);
inputProxy.connectToProxy();
inputProxy.getEventTypes().then(function (reply) {
initButtons(reply);
}).catch(function (err) {
console.error(err);
});
inputProxy.getTimelineEvents().then(function (reply) {
console.log(reply);
}).catch(function (err) {
console.error(err);
});
</script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<style>
div.newEvent {
position: relative;
margin: 10px;
padding: 10px;
width: 300px;
border: 1px solid #dddddd;
border-radius: 5px;
height: 200px;
background-color: #ffffff;
}
div.timelineEvent {
position: relative;
margin: 10px;
padding: 10px;
width: 300px;
border: 1px solid #dddddd;
border-radius: 5px;
height: 140px;
background-color: #ffffff;
}
div.resetEvents {
margin: -210px 10px 10px 320px;
padding: 10px;
width: 160px;
border: 1px solid #dddddd;
border-radius: 5px;
height: 200px;
}
p.alabel {
display: inline-block;
width: 90px;
}
div.content {
margin: 10px;
}
button {
margin: 5px;
}
#buttonBunch {
}
h3 {
margin-left: 10px;
}
div.overlay {
position: absolute;
top: 0px;
left: 0px;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 12;
}
html, body {
width: 100%;
height: 100%;
}
h1 {
color: #ffffff;
}
div.colors {
display: inline-block;
width: 30px;
height: 20px;
border: 0px solid #dddddd;
border-radius: 3px;
}
div.colors.red {background-color: #ff0000;}
div.colors.white {border-width:1px; background-color: #ffffff;}
div.colors.magenta {background-color: #ff21cb;}
div.colors.orange {background-color: #ffa42a;}
div.colors.green {background-color: #00ce34;}
button.red {background-color: #ff0000;}
button.white {color:#aaaaaa;border-width:1px; background-color: #ffffff;}
button.magenta {background-color: #ff21cb;}
button.orange {background-color: #ffa42a;}
button.green {background-color: #00ce34;}
div.colors.selected {
box-shadow: 0px 0px 5px #0bd1ff;
}
</style>
</head>
<body>
<div class="overlay" id="overlayNC">
<h1>Connection has been lost. Please refresh the page.</h1>
</div>
<div class="overlay" id="overlay">
<div class="timelineEvent" id="newTimelineEvent">
<h4>When does the event start?</h4>
Start event: <select id="delaySelect">
<option value="0">Now</option>
<option value="5">5 minutes</option>
<option value="15">15 minutes</option>
<option value="30">30 minutes</option>
<option value="45">45 minutes</option>
<option value="60">1 hour</option>
<option value="120">2 hours</option>
<option value="180">3 hours</option>
</select>
<br/>
<br/>
<button type="button" class="btn btn-danger pull-left" onclick="hideOverlay()">
cancel
</button>
<button type="button" class="btn btn-primary pull-right" onclick="newTimelineEvent()">
create Event
</button>
</div>
</div>
<div class="newEvent">
<h4>create new event type:</h4>
<p class="alabel">Name:</p><input id="newEvent"><br/>
<p class="alabel">Color:</p>
<div class="colors red" onclick="selectColor('red','colorRed');" id="colorRed"></div>
<div class="colors white selected" onclick="selectColor('white','colorWhite');" id="colorWhite"></div>
<div class="colors green" onclick="selectColor('green','colorGreen');" id="colorGreen"></div>
<div class="colors orange" onclick="selectColor('orange','colorOrange');" id="colorOrange"></div>
<div class="colors magenta" onclick="selectColor('magenta','colorMagenta');" id="colorMagenta"></div>
<br/>
<!--<p class="alabel">range:</p><input type="checkbox" id="range"><br />-->
<button type="button" class="btn btn-primary pull-right" onclick="newEvent()">
create
</button>
</div>
<div class="resetEvents">
<button type="button" class="btn btn-danger" onclick="resetEvents()">
Reset all events
</button>
<br/>
<br/>
<button type="button" class="btn btn-danger" onclick="resetTimelineData()">
Remove data
</button>
</div>
<h3>cick one of the buttons to create a new event on the timeline</h3>
<div class='content' id="buttonBunch">
</div>
</body>
</html>