Skip to content

A
apollo
Commit 0d55b812 by lepdou
Options

navbar search app

parent cf0ab2f2
Showing with 211 additions and 19 deletions
apollo-portal/src/main/resources/static/app.html
......@@ -12,8 +12,7 @@
<body>
<div ng-include="'views/common/nav.html'"></div>
<apollonav></apollonav>
<div class="container-fluid apollo-container">
<div class="row">
......@@ -81,7 +80,9 @@
<script type="application/javascript" src="scripts/app.js"></script>
<script type="application/javascript" src="scripts/services/AppService.js"></script>
<script type="application/javascript" src="scripts/services/EnvService.js"></script>
<script type="application/javascript" src="scripts/AppUtils.js"></script>
<script type="application/javascript" src="scripts/directive.js"></script>
<script type="application/javascript" src="scripts/controller/CreateAppController.js"></script>
</body>
......
apollo-portal/src/main/resources/static/config.html
......@@ -12,7 +12,7 @@
<body>
<div ng-include="'views/common/nav.html'"></div>
<apollonav></apollonav>
<div class="container-fluid apollo-container">
<div class="app">
......@@ -413,9 +413,13 @@
<!--service-->
<script type="application/javascript" src="scripts/services/AppService.js"></script>
<script type="application/javascript" src="scripts/services/EnvService.js"></script>
<script type="application/javascript" src="scripts/services/ConfigService.js"></script>
<script type="application/javascript" src="scripts/AppUtils.js"></script>
<!--directive-->
<script type="application/javascript" src="scripts/directive.js"></script>
<!--controller-->
<script type="application/javascript" src="scripts/controller/app/ConfigNamespaceController.js"></script>
<script type="application/javascript" src="scripts/controller/app/ConfigBaseInfoController.js"></script>
......
apollo-portal/src/main/resources/static/config/sync.html
......@@ -12,7 +12,7 @@
<body>
<div ng-include="'../views/common/nav.html'"></div>
<apollonav></apollonav>
<div class="container-fluid apollo-container" ng-controller="SyncItemController">
<section class="panel col-md-offset-1 col-md-10">
......@@ -196,10 +196,12 @@
<!--biz-->
<script type="application/javascript" src="../scripts/app.js"></script>
<script type="application/javascript" src="../scripts/services/AppService.js"></script>
<script type="application/javascript" src="../scripts/services/EnvService.js"></script>
<script type="application/javascript" src="../scripts/services/ConfigService.js"></script>
<script type="application/javascript" src="../scripts/AppUtils.js"></script>
<script type="application/javascript" src="../scripts/controller/app/SyncConfigController.js"></script>
<script type="application/javascript" src="../scripts/PageCommon.js"></script>
<script type="application/javascript" src="../scripts/directive.js"></script>
</body>
</html>
apollo-portal/src/main/resources/static/namespace.html
<!doctype html>
<html ng-app="application">
<html ng-app="namespace">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- styles -->
......@@ -13,7 +13,7 @@
<body>
<div ng-include="'views/common/nav.html'"></div>
<apollonav></apollonav>
<div class="container-fluid apollo-container" ng-controller="LinkNamespaceController">
......@@ -121,9 +121,13 @@
<script type="application/javascript" src="scripts/app.js"></script>
<script type="application/javascript" src="scripts/services/AppService.js"></script>
<script type="application/javascript" src="scripts/services/EnvService.js"></script>
<script type="application/javascript" src="scripts/services/NamespaceService.js"></script>
<script type="application/javascript" src="scripts/AppUtils.js"></script>
<!--directive-->
<script type="application/javascript" src="scripts/directive.js"></script>
<script type="application/javascript" src="scripts/controller/NamespaceController.js"></script>
......
apollo-portal/src/main/resources/static/scripts/app.js
......@@ -4,15 +4,20 @@ var appService = angular.module('app.service', ['ngResource']);
/**utils*/
var appUtil = angular.module('app.util', []);
/** directive */
var directive_module = angular.module('apollo.directive', ['app.service']);
/** page module 定义*/
// 首页
var index_module = angular.module('index', ['toastr', 'app.service', 'app.util', 'angular-loading-bar']);
//项目主页
var application_module = angular.module('application', ['app.service', 'app.util', 'toastr', 'angular-loading-bar']);
var application_module = angular.module('application', ['app.service', 'apollo.directive', 'app.util', 'toastr', 'angular-loading-bar']);
//创建项目页面
var create_app_module = angular.module('create_app', ['ngResource', 'toastr', 'app.service', 'app.util', 'angular-loading-bar']);
var create_app_module = angular.module('create_app', ['ngResource', 'apollo.directive', 'toastr', 'app.service', 'app.util', 'angular-loading-bar']);
//配置同步页面
var sync_item_module = angular.module('sync_item', ['app.service', 'app.util', 'toastr', 'angular-loading-bar']);
var sync_item_module = angular.module('sync_item', ['app.service', 'apollo.directive', 'app.util', 'toastr', 'angular-loading-bar']);
//namespace
var namespace_module = angular.module('namespace', ['app.service', 'apollo.directive', 'app.util', 'toastr', 'angular-loading-bar']);
......
apollo-portal/src/main/resources/static/scripts/controller/CreateAppController.js
......@@ -5,7 +5,7 @@ create_app_module.controller('CreateAppController', ['$scope', '$window', 'toast
AppService.create('ALL', $scope.app).then(function (result) {
toastr.success('添加成功!');
setInterval(function () {
$window.location.href = '/views/config.html?#appid=' + result.appId;
$window.location.href = '/config.html?#appid=' + result.appId;
}, 1000);
}, function (result) {
toastr.error(AppUtil.errorMsg(result), '添加失败!');
......
apollo-portal/src/main/resources/static/scripts/controller/NamespaceController.js
application_module.controller("LinkNamespaceController",
namespace_module.controller("LinkNamespaceController",
['$scope', '$location', '$window', 'toastr', 'AppService', 'AppUtil', 'NamespaceService',
function ($scope, $location, $window, toastr, AppService, AppUtil, NamespaceService) {
......
apollo-portal/src/main/resources/static/scripts/directive.js 0 → 100644
directive_module.directive('apollonav', function ($compile, $window, AppService, EnvService) {
return {
restrict: 'E',
templateUrl: '../views/common/nav.html',
transclude: true,
replace: true,
link: function (scope, element, attrs) {
scope.sourceApps = [];
scope.copyedApps = [];
EnvService.find_all_envs().then(function (result) {
//default select first env
AppService.find_all_app(result[0]).then(function (result) {
result.forEach(function (app) {
app.selected = false;
scope.sourceApps.push(app);
});
scope.copyedApps = angular.copy(scope.sourceApps);
}, function (result) {
toastr.error(AppUtil.errorMsg(result), "load apps error");
});
}, function (result) {
toastr.error(AppUtil.errorMsg(result), "load env error");
});
scope.searchKey = '';
scope.shouldShowAppList = false;
var selectedApp = {};
scope.selectApp = function (app) {
select(app);
};
scope.changeSearchKey = function () {
scope.copyedApps = [];
scope.sourceApps.forEach(function (app) {
if (app.name.indexOf(scope.searchKey) > -1 || app.appId.indexOf(scope.searchKey) > -1) {
scope.copyedApps.push(app);
}
});
scope.shouldShowAppList = true;
};
scope.jumpToConfigPage = function () {
if (selectedApp.appId){
var needReloadPage = false;
if ($window.location.href.indexOf("config.html") > -1){
needReloadPage = true;
}
$window.location.href = '/config.html?#appid=' + selectedApp.appId;
if (needReloadPage){
$window.location.reload();
}
}
};
//up:38 down:40 enter:13
var selectedAppIdx = -1;
element.bind("keydown keypress", function (event) {
if (event.keyCode == 40) {
if (selectedAppIdx < scope.copyedApps.length - 1) {
clearAppsSelectedStatus();
scope.copyedApps[++selectedAppIdx].selected = true;
}
} else if (event.keyCode == 38) {
if (selectedAppIdx >= 1) {
clearAppsSelectedStatus();
scope.copyedApps[--selectedAppIdx].selected = true;
}
} else if (event.keyCode == 13) {
if (scope.shouldShowAppList){
select(scope.copyedApps[selectedAppIdx]);
event.preventDefault();
}else {
scope.jumpToConfigPage();
}
}
//强制刷新
scope.$apply(function () {
scope.copyedApps = scope.copyedApps;
});
});
$(".search-input").on("click", function (event) {
event.stopPropagation();
});
$(document).on('click', function () {
scope.$apply(function () {
scope.shouldShowAppList = false;
});
});
function clearAppsSelectedStatus() {
scope.copyedApps.forEach(function (app) {
app.selected = false;
})
}
function select(app) {
selectedApp = app;
scope.searchKey = app.name;
scope.shouldShowAppList = false;
clearAppsSelectedStatus();
selectedAppIdx = -1;
}
}
}
});
apollo-portal/src/main/resources/static/styles/common-style.css
......@@ -15,6 +15,12 @@ a {
cursor: pointer;
}
.logo {
width: 150px;
height: 50px;
background: url('../img/logo.png') no-repeat
}
.i-20 {
height: 20px;
width: 20px;
......@@ -109,9 +115,10 @@ table th {
margin-top: 20px;
}
.node-treeview{
.node-treeview {
color: #797979;
}
.apps .apps-description {
color: gray;
font-family: "Apple Color Emoji";
......@@ -184,9 +191,10 @@ table th {
padding-top: 19px;
}
.config-item-container .panel{
.config-item-container .panel {
border-radius: 0px;
}
.config-item-container .panel-heading b {
font-size: 18px;
}
......@@ -285,3 +293,46 @@ table th {
font-size: 16px;
}
/*搜索框*/
::-webkit-scrollbar {
width: 0;
height: 0;
background: rgba(255, 255, 255, 0);
}
::-webkit-scrollbar-thumb:vertical {
background: rgba(255, 255, 255, 0);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:vertical:hover {
background: rgba(255, 255, 255, 0);
}
.app-list {
width: 350px;
height: 200px;
position: absolute;
margin-left: 0px;
background: #ffffff;
border: 1px solid #ddd;
overflow-y: scroll;
z-index: 1000;
}
.app-list .app-item {
font-size: medium;
padding: 5px 10px;
}
.app-list .app-item:hover {
color: #ffffff;
background: #C3C3C3;
}
.app-list .app-selected {
color: #ffffff;
background: #c3c3c3;
}
apollo-portal/src/main/resources/static/views/common/nav.html
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="/">Apollo</a>
<a class="navbar-brand logo" href="/"></a>
</div>
<style>
<!-- Collect the nav links, forms, and other content for toggling -->
</style>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left" role="search">
<form class="navbar-form navbar-left form-inline" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="应用ID/应用名">
<input type="text" class="form-control search-input" placeholder="应用ID/应用名" style="width: 350px"
ng-model="searchKey" ng-change="changeSearchKey()" ng-focus="changeSearchKey()"
ng-click="xx()">
<div class="row app-list" ng-show="shouldShowAppList">
<div ng-repeat="app in copyedApps" class="app-item" ng-class="{'app-selected':app.selected}"
ng-click="selectApp(app)">{{app.appId}} / {{app.name}}
</div>
</div>
</div>
<button type="submit" class="btn btn-default">Go</button>
<button type="submit" class="btn btn-default" ng-click="jumpToConfigPage()">Go</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment