mirror of
https://github.com/bingohuang/docker-labs.git
synced 2025-07-14 18:27:25 +08:00
8e4981d24f
It fixes lots of bugs, can fallback to long polling, resize viewport of terminals and share clients state of the session, so they all see the same thing.
106 lines
4.7 KiB
HTML
106 lines
4.7 KiB
HTML
<!doctype html>
|
|
<html ng-app="DockerPlay" ng-controller="PlayController">
|
|
<head>
|
|
<title>Docker Playground</title>
|
|
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
|
|
<link rel="stylesheet" href="/assets/xterm.css" />
|
|
<link rel="stylesheet" href="/assets/style.css" />
|
|
</head>
|
|
<body>
|
|
<div layout="column" style="height:100%;" ng-cloak>
|
|
<section id="sessionEnd" layout="row" flex ng-if="!isAlive">
|
|
<md-content flex layout-padding ng-if="!instances.length">
|
|
<div layout="column" layout-align="top center">
|
|
<p>
|
|
<strong>Your session has expired.</strong>
|
|
</p>
|
|
</div>
|
|
<div flex></div>
|
|
</md-content>
|
|
</section>
|
|
<section id="popupContainer" layout="row" flex ng-if="isAlive">
|
|
<md-sidenav
|
|
class="md-sidenav-left"
|
|
md-component-id="left"
|
|
md-is-locked-open="$mdMedia('gt-sm')"
|
|
md-whiteframe="4" layout="column">
|
|
|
|
<md-toolbar class="md-theme-indigo">
|
|
<h1 class="md-toolbar-tools">Instances</h1>
|
|
</md-toolbar>
|
|
<md-content layout-padding>
|
|
<md-button ng-click="newInstance()" class="md-primary">
|
|
+ Add new instance
|
|
</md-button>
|
|
|
|
<md-list>
|
|
<md-list-item class="md-3-line" ng-repeat="instance in instances" ng-click="showInstance(instance)" ng-class="instance.name == selectedInstance.name ? 'selected' : false">
|
|
<div class="md-list-item-text">{{instance.name}}</div>
|
|
<md-divider ng-if="!$last"></md-divider>
|
|
</md-list-item>
|
|
</md-list>
|
|
</md-content>
|
|
|
|
</md-sidenav>
|
|
|
|
<md-content flex layout-padding ng-if="!instances.length">
|
|
<div layout="column" layout-align="top center">
|
|
<p>
|
|
Add instances to your playground.
|
|
</p>
|
|
<p>
|
|
<strong>Sessions and all their instances are deleted after 1 hour.</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<div flex></div>
|
|
</md-content>
|
|
<md-content flex layout="column" ng-repeat="instance in instances" ng-show="instance.name == selectedInstance.name">
|
|
<md-card md-theme="default" md-theme-watch>
|
|
<md-card-title>
|
|
<md-card-title-text>
|
|
<span class="md-headline">{{instance.name}}</span>
|
|
<span class="md-subhead">{{instance.ip}}</span>
|
|
<md-card-title-text>
|
|
</md-card-title>
|
|
<md-card-actions>
|
|
<md-button class="md-warn md-raised" ng-click="deleteInstance(instance)">Delete</md-button>
|
|
</md-card-actions>
|
|
</md-card>
|
|
<md-card flex md-theme="default" md-theme-watch >
|
|
<md-card-content flex id="terminal-{{instance.name}}" class="terminal">
|
|
</md-card-content>
|
|
</md-card>
|
|
</md-content>
|
|
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
|
|
<script src="https://cdn.socket.io/socket.io-1.3.7.js"></script>
|
|
<script src="/assets/app.js"></script>
|
|
<script src="/assets/xterm.js"></script>
|
|
<script src="/assets/xterm-addons/fit.js"></script>
|
|
<script src="/assets/attach.js"></script>
|
|
<script type="text/javascript" charset="utf-8">
|
|
window.onbeforeunload = function (e) {
|
|
e = e || window.event;
|
|
|
|
// For IE and Firefox prior to version 4
|
|
if (e) {
|
|
e.returnValue = 'Make sure you saved your session URL';
|
|
}
|
|
|
|
// For Safari
|
|
return 'Make sure you saved your session URL';
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|