167 lines
7.3 KiB
HTML
167 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Embed Example</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script type="text/javascript" src="embed.js"></script>
|
|
<style>
|
|
#embed-links .card-pf-body {
|
|
opacity: 0.3;
|
|
}
|
|
#embed-here {
|
|
display: block;
|
|
width: 1024px;
|
|
height: 768px;
|
|
}
|
|
#embed-address {
|
|
display: block;
|
|
margin-bottom: 20px;
|
|
}
|
|
a[target] {
|
|
cursor: pointer;
|
|
}
|
|
iframe {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid #ddd;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body id="content" class="cards-pf">
|
|
|
|
<!-- BOILERPLATE: Makes this look like another app -->
|
|
<main class="pf-c-page__main" tabindex="-1">
|
|
<section class="pf-c-page__main-section pf-m-light container-cards-pf">
|
|
<div class="row row-cards-pf">
|
|
<div id="embed-links" class="col-xs-3 col-sm-3 col-md-2">
|
|
<div class="row row-cards-pf">
|
|
<input id="embed-address" class="form-control" value="http://127.0.0.1"/>
|
|
</div>
|
|
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
<h2 class="card-pf-title">
|
|
<a id="embed-full" href="/cockpit/@localhost/system/index.html">
|
|
<span class="fa fa-server"></span>Full Server
|
|
</a>
|
|
</h2>
|
|
<div class="card-pf-body">
|
|
<p class="card-pf-aggregate-status-notifications">
|
|
<span class="card-pf-aggregate-status-notification">
|
|
<span class="pficon pficon-add-circle-o"></span></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-with-action">
|
|
<h2 class="card-pf-title">
|
|
<a id="embed-terminal" href="/cockpit/@localhost/system/terminal.html">
|
|
<span class="fa fa-terminal"></span>Server Terminal</a>
|
|
</h2>
|
|
<div class="card-pf-body">
|
|
<p class="card-pf-aggregate-status-notifications">
|
|
<span class="card-pf-aggregate-status-notification"><span
|
|
class="pficon pficon-error-circle-o"></span>4</span>
|
|
<span class="card-pf-aggregate-status-notification"><span
|
|
class="pficon pficon-warning-triangle-o"></span>1</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
<h2 class="card-pf-title">
|
|
<a id="embed-network" href="/cockpit/@localhost/network/index.html">
|
|
<span class="fa fa-plug"></span>Server Networking</a>
|
|
</h2>
|
|
<div class="card-pf-body">
|
|
<p class="card-pf-aggregate-status-notifications">
|
|
<span class="card-pf-aggregate-status-notification"><span
|
|
class="pficon pficon-error-circle-o"></span>1</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
<h2 class="card-pf-title">
|
|
<a id="embed-storage" href="/cockpit/@localhost/storage/index.html">
|
|
<span class="fa fa-hdd-o"></span>Server Storage</a>
|
|
</h2>
|
|
<div class="card-pf-body">
|
|
<p class="card-pf-aggregate-status-notifications">
|
|
<span class="card-pf-aggregate-status-notification"><span
|
|
class="pficon pficon-error-circle-o"></span>1</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
<h2 class="card-pf-title">
|
|
<a id="embed-auth" href="/cockpit+app/@localhost/shell/index.html">
|
|
<span class="fa fa-lock"></span>Separate Auth
|
|
</a>
|
|
</h2>
|
|
<div class="card-pf-body">
|
|
<p class="card-pf-aggregate-status-notifications">
|
|
<span class="card-pf-aggregate-status-notification"><span
|
|
class="pficon pficon-error-circle-o"></span>1</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-9 col-sm-9 col-md-10">
|
|
<div class="card-pf">
|
|
<div class="card-pf-heading">
|
|
<h2 id="embed-title" class="card-pf-title">
|
|
Embedded Cockpit Here
|
|
</h2>
|
|
</div>
|
|
<div id="embed-here" class="card-pf-body">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<<<<<<< HEAD:test/verify/files/embed-cockpit/index.html
|
|
</div>
|
|
</div><!-- /row -->
|
|
</div><!-- /container -->
|
|
=======
|
|
</div><!-- /row -->
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
var frames = { };
|
|
|
|
function click(ev) {
|
|
var href = ev.target.getAttribute("href");
|
|
ev.preventDefault();
|
|
|
|
var address = document.getElementById("embed-address").value;
|
|
if (address.indexOf(":") === -1)
|
|
address += ":9090";
|
|
var url = address + href;
|
|
|
|
var frame = frames[url];
|
|
if (!frame) {
|
|
frame = frames[url] = document.createElement("iframe");
|
|
frame.setAttribute("src", url)
|
|
frame.setAttribute("name", ev.target.getAttribute("id"));
|
|
document.getElementById("embed-here").appendChild(frame);
|
|
frame.addEventListener("load", function(ev) {
|
|
ev.target.setAttribute("loaded", "1");
|
|
});
|
|
}
|
|
|
|
var i, iframes = document.querySelectorAll("iframe");
|
|
for (i = 0; i < iframes.length; i++)
|
|
iframes[i].setAttribute("hidden", "hidden");
|
|
frame.removeAttribute("hidden");
|
|
document.getElementById("embed-title").innerText = ev.target.innerText;
|
|
return false;
|
|
}
|
|
|
|
var x, links = document.querySelectorAll("#embed-links a[href]");
|
|
for (x = 0; x < links.length; x++)
|
|
links[x].addEventListener("click", click);
|
|
</script>
|
|
>>>>>>> b64ab575d... Replace all usages of container-fluid class:test/verify/files/embed-cockpit.html
|
|
<div id="embed-loaded">
|
|
</div>
|
|
</body>
|
|
</html>
|