mirror of
https://github.com/bingohuang/docker-labs.git
synced 2025-07-13 17:42:53 +08:00
230 lines
12 KiB
HTML
230 lines
12 KiB
HTML
<!doctype html>
|
|
<html ng-app="DockerPlay" ng-controller="PlayController">
|
|
<head>
|
|
<title>Docker 在线实验室</title>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons" />
|
|
<link rel="stylesheet" href="https://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/xterm-addons/fullscreen.css" />
|
|
<link rel="stylesheet" href="/assets/style.css" />
|
|
<!--<script>-->
|
|
<!--(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){-->
|
|
<!--(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),-->
|
|
<!--m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)-->
|
|
<!--})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');-->
|
|
<!--ga('create', 'UA-89019737-1', 'auto');-->
|
|
<!--ga('send', 'pageview');-->
|
|
<!--</script>-->
|
|
<script src='/assets/baidu-tongji.js'></script>
|
|
</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>你的实验室关门了</strong>
|
|
</p>
|
|
</div>
|
|
<div flex></div>
|
|
</md-content>
|
|
</section>
|
|
|
|
<section ng-if="!connected" class="disconnected" layout="row" layout-align="center center">
|
|
<h1 class="md-headline">和实验室管理员失去联系，呼叫中...</h1>
|
|
<md-progress-circular class="md-hue-2" md-diameter="20px"></md-progress-circular>
|
|
</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">
|
|
|
|
<a href="http://163yun.com" class="m-logo" target="_blank">
|
|
<center><img src="/assets/163yun-logo.png" alt="网易云" title="网易云" width="160px"></center>
|
|
</a>
|
|
<md-toolbar class="md-theme-indigo">
|
|
<span class="clock">{{ttl}}</span>
|
|
<md-button class="md-warn md-raised" ng-click="closeSession()">关闭实验室</md-button>
|
|
<div class="md-toolbar-tools">
|
|
<h1 class="md-toolbar-tools">工作台</h1>
|
|
<settings-icon></settings-icon>
|
|
</div>
|
|
</md-toolbar>
|
|
<md-content layout-padding>
|
|
<md-button ng-click="newInstance()" ng-disabled="isInstanceBeingCreated" class="md-primary">{{newInstanceBtnText}}</md-button>
|
|
<md-list>
|
|
<md-list-item ng-switch on="instance.isManager" class="md-3-line" ng-repeat="instance in instances" ng-click="showInstance(instance)" ng-class="instance.name == selectedInstance.name ? 'selected' : false">
|
|
<md-icon ng-switch-when="true" style="color: blue" md-svg-icon="person"></md-icon>
|
|
<md-icon ng-switch-when="false" md-svg-icon="person-outline"></md-icon>
|
|
<p>{{instance.name}}</p>
|
|
<md-divider ng-if="!$last"></md-divider>
|
|
</md-list-item>
|
|
</md-list>
|
|
</md-content>
|
|
|
|
<div class="footer__copyright">
|
|
<b>© 2017 <a class="footer__link" href="https://163yun.com/" target="_blank">163yun</a> & <a class="footer__link" href="https://github.com/bingohuang" target="_blank">Bingo Huang</a></b><br><br>
|
|
</div>
|
|
|
|
</md-sidenav>
|
|
<md-content flex layout-padding ng-if="!instances.length">
|
|
<div layout="column" layout-align="top center">
|
|
<p>在你的实验室中添加工作台（独立的 Docker 环境）</p>
|
|
<p><strong>当前实验室和所属工作台将在 {{ttl}} 后删除</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 class="stats" md-theme="default" md-theme-watch>
|
|
<md-card-title>
|
|
<md-card-title-text>
|
|
<span class="md-headline">{{instance.name}}</span>
|
|
</md-card-title-text>
|
|
</md-card-title>
|
|
<md-card-content>
|
|
<div layout-gt-sm="row">
|
|
<md-input-container class="md-icon-float md-block">
|
|
<label>IP</label>
|
|
<input ng-model="instance.ip" type="text" readonly="readonly">
|
|
</md-input-container>
|
|
<md-chips ng-model="instance.ports" name="port" readonly="true" md-removable="false">
|
|
<md-chip-template>
|
|
<strong><a href="{{getProxyUrl(instance, $chip)}}" title="{{getProxyUrl(instance, $chip)}}" target="_blank">{{$chip}}</a></strong>
|
|
</md-chip-template>
|
|
</md-chips>
|
|
</div>
|
|
<div layout-gt-sm="row">
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<label>MEM</label>
|
|
<input ng-model="instance.mem" type="text" readonly="readonly">
|
|
</md-input-container>
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<label>CPU</label>
|
|
<input ng-model="instance.cpu" type="text" readonly="readonly">
|
|
</md-input-container>
|
|
</div>
|
|
</md-card-content>
|
|
<md-card-actions>
|
|
<md-button class="md-warn md-raised" ng-click="deleteInstance(instance)" ng-disabled="isInstanceBeingDeleted">{{deleteInstanceBtnText}}</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-container">
|
|
</md-card-content>
|
|
</md-card>
|
|
</md-content>
|
|
</section>
|
|
</div>
|
|
|
|
<script type="text/ng-template" id="settings-modal.html">
|
|
<md-toolbar>
|
|
<div class="md-toolbar-tools">
|
|
<h2>设置</h2>
|
|
<span flex></span>
|
|
<md-button class="md-icon-button" ng-click="$ctrl.close()">
|
|
<md-icon class="material-icon" aria-label="Close dialog">✘</md-icon>
|
|
</md-button>
|
|
</div>
|
|
</md-toolbar>
|
|
|
|
<md-dialog-content>
|
|
<div class="md-dialog-content" style="width:600px;">
|
|
<div layout="row">
|
|
<div flex="50">
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<label>快捷键预设</label>
|
|
<md-select ng-model="$ctrl.currentShortcutConfig" ng-model-options="{getterSetter: true}" placeholder="Keyboard shortcut prefix">
|
|
<md-option ng-repeat="preset in $ctrl.keyboardShortcutPresets" value="{{preset}}">
|
|
{{preset.name}}
|
|
</md-option>
|
|
</md-select>
|
|
</md-input-container>
|
|
</div>
|
|
<div flex="10"></div>
|
|
<div flex="40">
|
|
<div ng-if="$ctrl.selectedShortcutPreset">
|
|
预设详情:
|
|
<ul>
|
|
<li ng-if="$ctrl.selectedShortcutPreset.presets.length == 0">无</li>
|
|
<li ng-repeat="preset in $ctrl.selectedShortcutPreset.presets">
|
|
<code>{{preset.command}}</code> - {{preset.description}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div layout="row">
|
|
<div flex="50">
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<label>Instance Image</label>
|
|
<md-select ng-model="$ctrl.currentDesiredInstanceImage" ng-model-options="{getterSetter: true}" placeholder="New Instance Image">
|
|
<md-option ng-repeat="image in $ctrl.instanceImages" value="{{image}}">
|
|
{{ image }}
|
|
</md-option>
|
|
</md-select>
|
|
</md-input-container>
|
|
</div>
|
|
</div>
|
|
<div layout="row">
|
|
<div flex="50">
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<label>Terminal Font Size</label>
|
|
<md-select ng-model="$ctrl.currentTerminalFontSize" ng-model-options="{getterSetter: true}">
|
|
<md-option ng-repeat="size in $ctrl.terminalFontSizes" value="{{size}}">
|
|
{{ size }}
|
|
</md-option>
|
|
</md-select>
|
|
</md-input-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</md-dialog-content>
|
|
|
|
<md-dialog-actions layout="row">
|
|
<span flex></span>
|
|
<md-button ng-click="$ctrl.close()">
|
|
关闭
|
|
</md-button>
|
|
</md-dialog-actions>
|
|
</script>
|
|
|
|
<script
|
|
src="https://code.jquery.com/jquery-3.2.1.min.js"
|
|
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
|
crossorigin="anonymous"></script>
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.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/xterm-addons/fullscreen.js"></script>
|
|
<script src="/assets/attach.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.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>
|
|
|