github/docker-labs
1
0
Fork 0
mirror of https://github.com/bingohuang/docker-labs.git synced 2025-10-04 17:33:21 +08:00
Code Issues Releases Wiki Activity

Huge refactor to have everything working with socket.io

Browse Source 
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.
This commit is contained in:
Jonathan Leibiusky (@xetorthio)
2016-11-10 10:42:08 -03:00
parent 9b6991f130
commit 8e4981d24f
16 changed files with 566 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
www/index.html
View File

@@ -2,81 +2,91 @@
<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="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>
<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">
<section id="popupContainer" layout="row" flex>
<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
class="md-sidenav-left"
md-component-id="left"
md-is-locked-open="$mdMedia('gt-sm')"
md-whiteframe="4">
</md-sidenav>
<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-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>
</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-padding 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 layout="row">
<md-button class="md-warn md-raised" ng-click="deleteInstance(instance)">Delete</md-button>
</md-card-actions>
<md-card-content>
<div id="terminal-{{instance.name}}"></div>
</md-card-content>
</md-card>
</md-content>
<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>
</section>
</div>
</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="/assets/app.js"></script>
<script src="/assets/main.js"></script>
<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) {