Selaa lähdekoodia

1、WebIDE交互重构;
2、左侧菜单选中逻辑优化;
3、滚动到顶部插件优化

xueli.xue 8 vuotta sitten
vanhempi
commit
54dc233738

+ 5 - 0
xxl-job-admin/src/main/java/com/xxl/job/admin/controller/JobCodeController.java

@@ -31,6 +31,11 @@ public class JobCodeController {
 	public String index(Model model, int jobId) {
 		XxlJobInfo jobInfo = xxlJobInfoDao.loadById(jobId);
 		List<XxlJobLogGlue> jobLogGlues = xxlJobLogGlueDao.findByJobId(jobId);
+
+		if (jobInfo == null) {
+			throw new RuntimeException("抱歉,任务不存在.");
+		}
+
 		model.addAttribute("jobInfo", jobInfo);
 		model.addAttribute("jobLogGlues", jobLogGlues);
 		return "jobcode/jobcode.index";

+ 8 - 10
xxl-job-admin/src/main/webapp/WEB-INF/template/common/common.macro.ftl

@@ -23,9 +23,7 @@
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
-  
-	<!-- scrollup -->
-	<link rel="stylesheet" href="${request.contextPath}/static/plugins/scrollup/image.css">
+
 	<!-- pace -->
 	<link rel="stylesheet" href="${request.contextPath}/static/plugins/pace/themes/pace-theme-flash.css">
 </#macro>
@@ -39,9 +37,9 @@
 	<script src="${request.contextPath}/static/adminlte/plugins/fastclick/fastclick.js"></script>
 	<!-- AdminLTE App -->
 	<script src="${request.contextPath}/static/adminlte/dist/js/app.min.js"></script>
+	<#-- jquery.slimscroll -->
+	<script src="${request.contextPath}/static/adminlte/plugins/slimScroll/jquery.slimscroll.min.js"></script>
 
-    <!-- scrollup -->
-    <script src="${request.contextPath}/static/plugins/scrollup/jquery.scrollUp.min.js"></script>
     <!-- pace -->
     <script src="${request.contextPath}/static/plugins/pace/pace.min.js"></script>
     <#-- jquery cookie -->
@@ -75,7 +73,7 @@
 	</header>
 </#macro>
 
-<#macro commonLeft>
+<#macro commonLeft pageName >
 	<!-- Left side column. contains the logo and sidebar -->
 	<aside class="main-sidebar">
 		<!-- sidebar: style can be found in sidebar.less -->
@@ -83,10 +81,10 @@
 			<!-- sidebar menu: : style can be found in sidebar.less -->
 			<ul class="sidebar-menu">
 				<li class="header">常用模块</li>
-				<li class="nav-click" ><a href="${request.contextPath}/jobinfo"><i class="fa fa-circle-o text-red"></i> <span>调度管理</span></a></li>
-				<li class="nav-click" ><a href="${request.contextPath}/joblog"><i class="fa fa-circle-o text-yellow"></i><span>调度日志</span></a></li>
-                <li class="nav-click" ><a href="${request.contextPath}/jobgroup"><i class="fa fa-circle-o text-aqua"></i> <span>执行器管理</span></a></li>
-				<li class="nav-click" ><a href="${request.contextPath}/help"><i class="fa fa-circle-o text-red"></i><span>使用教程</span></a></li>
+				<li class="nav-click <#if pageName == "jobinfo">active</#if>" ><a href="${request.contextPath}/jobinfo"><i class="fa fa-circle-o text-red"></i> <span>调度管理</span></a></li>
+				<li class="nav-click <#if pageName == "joblog">active</#if>" ><a href="${request.contextPath}/joblog"><i class="fa fa-circle-o text-yellow"></i><span>调度日志</span></a></li>
+                <li class="nav-click <#if pageName == "jobgroup">active</#if>" ><a href="${request.contextPath}/jobgroup"><i class="fa fa-circle-o text-aqua"></i> <span>执行器管理</span></a></li>
+				<li class="nav-click <#if pageName == "help">active</#if>" ><a href="${request.contextPath}/help"><i class="fa fa-circle-o text-red"></i><span>使用教程</span></a></li>
 			</ul>
 		</section>
 		<!-- /.sidebar -->

+ 1 - 1
xxl-job-admin/src/main/webapp/WEB-INF/template/help.ftl

@@ -10,7 +10,7 @@
 	<!-- header -->
 	<@netCommon.commonHeader />
 	<!-- left -->
-	<@netCommon.commonLeft />
+	<@netCommon.commonLeft "help" />
 	
 	<!-- Content Wrapper. Contains page content -->
 	<div class="content-wrapper">

+ 81 - 70
xxl-job-admin/src/main/webapp/WEB-INF/template/jobcode/jobcode.index.ftl

@@ -8,85 +8,97 @@
 	<link rel="stylesheet" href="${request.contextPath}/static/plugins/codemirror/addon/hint/show-hint.css">
 	<style type="text/css">
 		.CodeMirror {
-      		border: 0px solid black;
       		font-size:16px;
+            width: 100%;
       		height: 100%;
+            /*bottom: 0;
+            top: 0px;*/
+            position: absolute;
 		}
     </style>
 </head>
-<body class=" layout-top-nav">
+<body class="skin-blue fixed layout-top-nav">
 
-<#if !jobInfo?exists>
 	<div class="wrapper">
-		<div class="content-wrapper">
-			<section class="content-header">
-				<h1>抱歉,任务不存在.</small></h1>
-			</section>
-		</div>
-	</div>
-<#else>
-	<div class="wrapper">
-		
-		<div class="content-wrapper">
-			<!-- Content Header (Page header) -->
-			<#--<section class="content-header">
-				<h1>任务调度中心<small>任务GLUE管理</small></h1>
-			</section>-->
-			<!-- Main content -->
-		    <section class="content">
-		    	<div class="row">
-		    		<div class="col-xs-4">
-						<div class="input-group margin">
-	                    	<div class="input-group-btn">
-	                      		<button type="button" class="btn btn-info">版本回溯</button>
-	                    	</div>
-	                    	<select class="form-control" id="glue_version" >
-	            				<option value="glue_now" >${jobInfo.glueRemark}【线上】</option>
-	            				<#if jobLogGlues?exists && jobLogGlues?size gt 0 >
-			                  	<#list jobLogGlues as glue>
-			                  		<option value="glue_log_${glue.id}" >${glue.glueRemark}</option>
-			                  	</#list>
-			                  	</#if>
-		                  	</select>
-		                  	
-		                  	<textarea id="glue_now" style="display:none;" >${jobInfo.glueSource}</textarea>
-		                  	<#if jobLogGlues?exists && jobLogGlues?size gt 0 >
-		                  	<#list jobLogGlues as glue>
-		                  		<textarea id="glue_log_${glue.id}" style="display:none;" >${glue.glueSource}</textarea>
-		                  	</#list>
-		                  	</#if>
-		                  	
-						</div>
-		            </div>
-		            <div class="col-xs-4">
-		            	<div class="input-group margin">
-	                    	<div class="input-group-btn">
-	                      		<button type="button" class="btn btn-info">备注</button>
-	                    	</div>
-	                    	<input type="text" class="form-control" id="glueRemark" value="" autocomplete="on" >
-	                  	</div>
-		            </div>
-		            <div class="col-xs-2">
-		            	<div class="input-group margin">
-	                    	<div class="input-group-btn">
-	                      		<button type="button" class="btn btn-primary" id="save" >保存</button>
-	                    	</div>
-	                  	</div>
-		            </div>
-	          	</div>
-		    	
-				<div class="row" id="glueSource" >
-					<#--<div class="col-xs-12">
-						<div class="box callout callout-info">
-							<textarea id="glueSource" ></textarea>
-						</div>
-					</div>-->
-				</div>
-		    </section>
-		</div>
+
+        <header class="main-header">
+            <nav class="navbar navbar-static-top">
+                <div class="container">
+					<#-- icon -->
+                    <div class="navbar-header">
+                        <a href="../../index2.html" class="navbar-brand"><b>Web</b>IDE</a>
+                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
+                            <i class="fa fa-bars"></i>
+                        </button>
+                    </div>
+
+                    <#-- left nav -->
+                    <div class="collapse navbar-collapse pull-left" id="navbar-collapse">
+                        <ul class="nav navbar-nav">
+                            <li class="active" ><a href="#">任务:${jobInfo.jobDesc}<span class="sr-only">(current)</span></a></li>
+                        </ul>
+                    </div>
+
+					<#-- right nav -->
+                    <div class="navbar-custom-menu">
+                        <ul class="nav navbar-nav">
+                            <li class="dropdown">
+                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">版本回溯 <span class="caret"></span></a>
+                                <ul class="dropdown-menu" role="menu">
+                                    <li><a href="javascript:;" class="source_version" version="version_now" >${jobInfo.glueRemark}【OnLine】</a></li>
+                                    <textarea id="version_now" style="display:none;" >${jobInfo.glueSource}</textarea>
+									<#if jobLogGlues?exists && jobLogGlues?size gt 0 >
+										<#list jobLogGlues as glue>
+                                            <li><a href="javascript:;" class="source_version" version="version_${glue.id}" >${glue.glueRemark}</a></li>
+                                            <textarea id="version_${glue.id}" style="display:none;" >${glue.glueSource}</textarea>
+										</#list>
+									</#if>
+                                </ul>
+                            </li>
+                            <li id="save" >
+								<a href="javascript:;" >
+									<i class="fa fa-fw fa-save" ></i>
+                                    保存
+								</a>
+							</li>
+                        </ul>
+                    </div>
+
+                </div>
+            </nav>
+        </header>
+
+		<div class="content-wrapper" id="ideWindow" ></div>
+
 		<!-- footer -->
 		<#--<@netCommon.commonFooter />-->
 	</div>
+
+    <!-- 保存.模态框 -->
+    <div class="modal fade" id="saveModal" tabindex="-1" role="dialog"  aria-hidden="true">
+        <div class="modal-dialog ">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title" ><i class="fa fa-bars"></i>保存</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal form" role="form" >
+                        <div class="form-group">
+                            <label for="lastname" class="col-sm-2 control-label">源码备注<font color="red">*</font></label>
+                            <div class="col-sm-10"><input type="text" class="form-control" id="glueRemark" placeholder="请输入备注信息" maxlength="64" ></div>
+                        </div>
+                        <hr>
+                        <div class="form-group">
+                            <div class="col-sm-offset-3 col-sm-6">
+                                <button type="button" class="btn btn-primary ok" >保存</button>
+                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
 	
 <@netCommon.commonScript />
 <script src="${request.contextPath}/static/plugins/codemirror/lib/codemirror.js"></script>
@@ -98,6 +110,5 @@ var id = '${jobInfo.id}';
 </script>
 <script src="${request.contextPath}/static/js/jobcode.index.1.js"></script>
 
-</#if>
 </body>
 </html>

+ 1 - 1
xxl-job-admin/src/main/webapp/WEB-INF/template/jobgroup/jobgroup.index.ftl

@@ -14,7 +14,7 @@
 	<!-- header -->
 	<@netCommon.commonHeader />
 	<!-- left -->
-	<@netCommon.commonLeft />
+	<@netCommon.commonLeft "jobgroup" />
 	
 	<!-- Content Wrapper. Contains page content -->
 	<div class="content-wrapper">

+ 1 - 1
xxl-job-admin/src/main/webapp/WEB-INF/template/jobinfo/jobinfo.index.ftl

@@ -19,7 +19,7 @@
 	<!-- header -->
 	<@netCommon.commonHeader />
 	<!-- left -->
-	<@netCommon.commonLeft />
+	<@netCommon.commonLeft "jobinfo" />
 	
 	<!-- Content Wrapper. Contains page content -->
 	<div class="content-wrapper">

+ 1 - 1
xxl-job-admin/src/main/webapp/WEB-INF/template/joblog/joblog.index.ftl

@@ -14,7 +14,7 @@
 	<!-- header -->
 	<@netCommon.commonHeader />
 	<!-- left -->
-	<@netCommon.commonLeft />
+	<@netCommon.commonLeft "joblog" />
 	
 	<!-- Content Wrapper. Contains page content -->
 	<div class="content-wrapper">

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 16 - 0
xxl-job-admin/src/main/webapp/static/adminlte/plugins/slimScroll/jquery.slimscroll.min.js


+ 49 - 22
xxl-job-admin/src/main/webapp/static/js/common.1.js

@@ -1,20 +1,5 @@
 $(function(){
-	
-	// 导航栏,选中样式处理,js遍历匹配url(遗弃)
-	$(".nav-click").removeClass("active");
-	$(".nav-click").each(function(){
-		if( window.location.href.indexOf( $(this).find("a").attr("href") ) > -1){
-			$(this).addClass("active");
-			$(this).parents(".nav-click").addClass("active");
-		}
-	});
-	
-	// scrollup
-	$.scrollUp({
-		animation: 'fade',	// fade/slide/none
-		scrollImg: true
-	});
-	
+
 	// logout
 	$("#logoutBtn").click(function(){
 		ComConfirm.show("确认注销登录?", function(){
@@ -29,7 +14,49 @@ $(function(){
 			});
 		});
 	});
-	
+
+	// slideToTop
+	var slideToTop = $("<div />");
+	slideToTop.html('<i class="fa fa-chevron-up"></i>');
+	slideToTop.css({
+		position: 'fixed',
+		bottom: '20px',
+		right: '25px',
+		width: '40px',
+		height: '40px',
+		color: '#eee',
+		'font-size': '',
+		'line-height': '40px',
+		'text-align': 'center',
+		'background-color': '#222d32',
+		cursor: 'pointer',
+		'border-radius': '5px',
+		'z-index': '99999',
+		opacity: '.7',
+		'display': 'none'
+	});
+	slideToTop.on('mouseenter', function () {
+		$(this).css('opacity', '1');
+	});
+	slideToTop.on('mouseout', function () {
+		$(this).css('opacity', '.7');
+	});
+	$('.wrapper').append(slideToTop);
+	$(window).scroll(function () {
+		if ($(window).scrollTop() >= 150) {
+			if (!$(slideToTop).is(':visible')) {
+				$(slideToTop).fadeIn(500);
+			}
+		} else {
+			$(slideToTop).fadeOut(500);
+		}
+	});
+	$(slideToTop).click(function () {
+		$("body").animate({
+			scrollTop: 0
+		}, 100);
+	});
+
 	// 左侧菜单状态,js + 后端 + cookie方式(新)
 	$('.sidebar-toggle').click(function(){
 		var adminlte_settings = $.cookie('adminlte_settings');	// 左侧菜单展开状态[adminlte_settings]:on=展开,off=折叠
@@ -42,10 +69,10 @@ $(function(){
 	});
 	// 左侧菜单状态,js + cookie方式(遗弃)
 	/*
-	var adminlte_settings = $.cookie('adminlte_settings');
-	if (adminlte_settings == 'off') {
-		$('body').addClass('sidebar-collapse');
-	}
-	*/
+	 var adminlte_settings = $.cookie('adminlte_settings');
+	 if (adminlte_settings == 'off') {
+	 $('body').addClass('sidebar-collapse');
+	 }
+	 */
 	
 });

+ 13 - 11
xxl-job-admin/src/main/webapp/static/js/jobcode.index.1.js

@@ -6,25 +6,27 @@ $(function() {
 		lineNumbers : true,
 		matchBrackets : true
 	});*/
-	var codeEditor = CodeMirror(document.getElementById("glueSource"), {
+	var codeEditor = CodeMirror(document.getElementById("ideWindow"), {
 		mode : "text/x-java",
 		lineNumbers : true,
-		matchBrackets : true
+		matchBrackets : true,
+		value: $("#version_now").val()
 	});
-	codeEditor.setValue( $("#glue_now").val() );
-	
+
 	// code change
-	$("#glue_version").change(function(){
-		var temp = $( "#" + $(this).val() ).val();
+	$(".source_version").click(function(){
+		var sourceId = $(this).attr('version');
+		var temp = $( "#" + sourceId ).val();
 		codeEditor.setValue( temp );
 	});
-	
-	// editor height
-	var height = Math.max(document.documentElement.clientHeight, document.body.offsetHeight);
-	$(".CodeMirror").attr('style', 'height:'+ height +'px');
-	
+
 	// code source save
 	$("#save").click(function() {
+		$('#saveModal').modal({backdrop: false, keyboard: false}).modal('show');
+	});
+
+	$("#saveModal .ok").click(function() {
+
 		var glueSource = codeEditor.getValue();
 		var glueRemark = $("#glueRemark").val();
 		

+ 0 - 8
xxl-job-admin/src/main/webapp/static/plugins/scrollup/image.css

@@ -1,8 +0,0 @@
-/* Image style */
-#scrollUp {
-    background-image: url('top.png');
-    bottom: 20px;
-    right: 20px;
-    width: 38px;    /* Width of image */
-    height: 38px;   /* Height of image */
-}

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 7
xxl-job-admin/src/main/webapp/static/plugins/scrollup/jquery.scrollUp.min.js


BIN
xxl-job-admin/src/main/webapp/static/plugins/scrollup/top.png