cordova-template-framework7-vue-webpack
Version:
Cordova template with framework7, vue 2 and webpack 2.
171 lines (138 loc) • 4.68 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Device Router</title>
<style>
html {
background: #DDD;
font-size: 14px;
color: #222;
font-family: Arial, sans-serif;
}
html, body {
padding: 0;
margin: 0;
}
html * {
box-sizing: border-box;
}
#unavailable {
display: block;
}
#unavailable p {
display: none;
font-size: 15px;
background: #444;
color: #FFF;
padding: 20px;
margin: 10px;
border-radius: 10px;
line-height: 24px;
}
#status_text {
display: block;
background: #2196F3;
color: #FFF;
padding: 20px;
margin: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
input {
display: block;
background: #FFF;
border: 1px solid #CCCCCC;
font-size: 14px;
color: #222;
width: 100%;
height: 46px;
padding: 10px;
}
button {
display: block;
margin-top: 10px;
width: 100%;
height: 34px;
}
.input_wrap {
padding: 0 10px;
}
</style>
</head>
<body>
<div id="unavailable">
<p>
It seems we can't connect to<br>127.0.0.1:8081<br>
<script>document.write(localServerIp)</script>
:8081<br><br>
You can test yourself with next inputs:
</p>
<div id="status_text">
Waiting for device ready...
</div>
<div class="input_wrap">
<input type="text" placeholder="Server Ip:Port (like 192.168.0.2:8081)" disabled>
</div>
<div class="input_wrap">
<button type="button" onclick="tryConnect()" disabled>Connect</button>
</div>
</div>
<script>
var deviceReadyChecker = setTimeout(startRedirectChecks, 5000);
document.addEventListener("deviceready", function () {
clearTimeout(deviceReadyChecker);
if (typeof navigator.splashscreen !== "undefined" && typeof navigator.splashscreen.hide === "function")
navigator.splashscreen.hide();
startRedirectChecks();
});
function startRedirectChecks() {
testConnection('127.0.0.1:8081', goUrl, function () {
testConnection(localServerIp + ':8081', goUrl, ajaxErr)
})
}
function tryConnect() {
var ipTest = /^([0-9]{1,3}\.){3}[0-9]{1,3}(:[0-9]{1,6})?$/,
ipPort = document.querySelector("input").value;
if (ipTest.test(ipPort))
testConnection(ipPort, goUrl, ajaxErr);
}
function testConnection(ipPort, callback, errCallback) {
var xhr = new XMLHttpRequest();
document.querySelector("button").disabled = true;
document.querySelector("input").disabled = true;
document.querySelector("#status_text").innerText = "Trying to connect http://" + ipPort;
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
document.querySelector("#status_text").innerText = "Connection to 'http://" + ipPort + "/' success! Redirecting...";
if (typeof callback === "function")
callback(ipPort);
}
else if (xhr.readyState === 4 && xhr.status !== 200) {
document.querySelector("button").disabled = false;
document.querySelector("input").disabled = false;
document.querySelector("#status_text").innerText = "Connection to 'http://" + ipPort + "/' failed!";
if (typeof errCallback === "function")
errCallback(ipPort);
}
}
xhr.open('GET', 'http://' + ipPort + '/');
xhr.send(null);
}
function goUrl(ipPort) {
setTimeout(function () {
window.location.href = 'http://' + ipPort + '/'
}, 1500);
}
function ajaxErr(ipPort) {
document.querySelector("#unavailable p").style.display = "block";
console.log('Can\'t connect to http://' + ipPort + '/');
}
</script>
</body>
</html>