Skip to content

Commit

Permalink
add react js
Browse files Browse the repository at this point in the history
  • Loading branch information
@allwefantasy
allwefantasy committed Jun 28, 2016
1 parent 82f509b commit d0127e3
Show file tree
Hide file tree
Showing 8 changed files with 610 additions and 1 deletion.
1 change: 1 addition & 0 deletions doc/components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,7 @@ if timeFormat configured,then the index name will be es.resource_yyyyMMdd
```
convert java map to JSON. So we can use `JSONTableCompositor` to register table.


### SparkStreamingStrategy (strategy)

```
Expand Down
2 changes: 2 additions & 0 deletions src/main/java/streaming/core/LocalSparkApp.scala
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
package streaming.core

import org.apache.velocity.app.Velocity

/**
* 5/11/16 WilliamZhu([email protected])
*/
Expand Down
2 changes: 1 addition & 1 deletion src/main/resources-debug/application.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ serviceframework:
template:
loader:
classpath:
enable: true
enable: false
static:
loader:
classpath:
Expand Down
1 change: 1 addition & 0 deletions src/main/resources-debug/rest/index.vm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<title>Hello React!</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="react/browser.min.js"></script>
</head>
<body>
<div id="body"></div>
Expand Down
44 changes: 44 additions & 0 deletions src/main/resources-debug/streamingpro/assets/react/browser.min.js
View file

Large diffs are not rendered by default.

19 changes: 19 additions & 0 deletions template/rest/index.vm
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="react/browser.min.js"></script>
</head>
<body>
<div id="body"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Welcome to StreamingPro!</h1>,
document.getElementById('body')
);
</script>
</body>
</html>
338 changes: 338 additions & 0 deletions template/rest/sqlui-result.vm
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,338 @@
<!DOCTYPE html>
<html lang="UTF-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Spark-Sql查询工具</title>

<meta name="description" content="Dynamic tables and grids using jqGrid plugin" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="/ace/css/bootstrap.min.css" />
<link rel="stylesheet" href="/ace/css/font-awesome.min.css" />

<!-- page specific plugin styles -->
<link rel="stylesheet" href="/ace/css/jquery-ui.min.css" />
<link rel="stylesheet" href="/ace/css/datepicker.css" />
<link rel="stylesheet" href="/ace/css/ui.jqgrid.css" />

<!-- text fonts -->
<link rel="stylesheet" href="/ace/css/ace-fonts.css" />

<!-- ace styles -->
<link rel="stylesheet" href="/ace/css/ace.min.css" id="main-ace-style" />

<!--[if lte IE 9]>
<link rel="stylesheet" href="/ace/css/ace-part2.min.css" />
<![endif]-->
<link rel="stylesheet" href="/ace/css/ace-skins.min.css" />
<link rel="stylesheet" href="/ace/css/ace-rtl.min.css" />

<!--[if lte IE 9]>
<link rel="stylesheet" href="/ace/css/ace-ie.min.css" />
<![endif]-->

<!-- inline styles related to this page -->

<!-- ace settings handler -->
<script src="/ace/js/ace-extra.min.js"></script>

<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

<!--[if lte IE 8]>
<script src="/ace/js/html5shiv.min.js"></script>
<script src="/ace/js/respond.min.js"></script>
<![endif]-->
</head>

<body class="no-skin">
<!-- #section:basics/navbar.layout -->
<!-- /section:basics/navbar.layout -->
<div class="main-container" id="main-container">
<script type="text/javascript">
try{ace.settings.check('main-container' , 'fixed')}catch(e){}
</script>


<!-- /section:basics/sidebar -->
<div class="main-content">
<!-- /section:basics/content.breadcrumbs -->
<div class="page-content">

<!-- /section:settings.box -->
<div class="page-content-area">
<div class="row">
<div class="col-xs-12">

<table id="grid-table"></table>

<div id="grid-pager"></div>

<script type="text/javascript">
var $path_base = "..";//in Ace demo this will be used for editurl parameter
</script>

<!-- PAGE CONTENT ENDS -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.page-content-area -->
</div><!-- /.page-content -->
</div><!-- /.main-content -->

<div class="footer">
<div class="footer-inner">
<!-- #section:basics/footer -->


<!-- /section:basics/footer -->
</div>
</div>

<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a>
</div><!-- /.main-container -->

<!-- basic scripts -->

<!--[if !IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='/ace/js/jquery.min.js'>"+"<"+"/script>");
</script>

<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='/ace/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script type="text/javascript">
if('ontouchstart' in document.documentElement) document.write("<script src='/ace/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="/ace/js/bootstrap.min.js"></script>

<!-- page specific plugin scripts -->
<script src="/ace/js/date-time/bootstrap-datepicker.min.js"></script>
<script src="/ace/js/jqGrid/jquery.jqGrid.min.js"></script>
<script src="/ace/js/jqGrid/i18n/grid.locale-cn.js"></script>

<!-- ace scripts -->
<script src="/ace/js/ace-elements.min.js"></script>
<script src="/ace/js/ace.min.js"></script>

<!-- inline scripts related to this page -->
<script type="text/javascript">
var grid_data = [$feeds];




jQuery(function($) {

var colModels=$.map(grid_data[0],function(k,v){
return {name:v,index:v, width:80,editable: false};
});
var cols=$.map(grid_data[0],function(k,v){
return v;
});
console.log(cols);

var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";

//resize to fit page size
$(window).on('resize.jqGrid', function () {
$(grid_selector).jqGrid( 'setGridWidth', $(".page-content").width() );
})
//resize on sidebar collapse/expand
var parent_column = $(grid_selector).closest('[class*="col-"]');
$(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
//setTimeout is for webkit only to give time for DOM changes and then redraw!!!
setTimeout(function() {
$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
}, 0);
}
})



jQuery(grid_selector).jqGrid({
//direction: "rtl",

//subgrid options
subGrid : false,



data: grid_data,
datatype: "local",
height: 350,
colNames:cols,
colModel:colModels,

viewrecords : true,
rowNum:10,
rowList:[10,20,30],
pager : pager_selector,
altRows: true,
//toppager: true,

multiselect: true,
//multikey: "ctrlKey",
multiboxonly: true,

loadComplete : function() {
var table = this;
setTimeout(function(){
styleCheckbox(table);

updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},

editurl: "/dummy.html",//nothing is saved
caption: "查询结果"

//,autowidth: true,


/**
,
grouping:true,
groupingView : {
groupField : ['name'],
groupDataSorted : true,
plusicon : 'fa fa-chevron-down bigger-110',
minusicon : 'fa fa-chevron-up bigger-110'
},
caption: "Grouping"
*/

});
$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size



//enable search/filter toolbar
//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
//jQuery(grid_selector).filterToolbar({});


//switch element when editing inline
function aceSwitch( cellvalue, options, cell ) {
setTimeout(function(){
$(cell) .find('input[type=checkbox]')
.addClass('ace ace-switch ace-switch-5')
.after('<span class="lbl"></span>');
}, 0);
}
//enable datepicker
function pickDate( cellvalue, options, cell ) {
setTimeout(function(){
$(cell) .find('input[type=text]')
.datepicker({format:'yyyy-mm-dd' , autoclose:true});
}, 0);
}


//navButtons
jQuery(grid_selector).jqGrid('navGrid',pager_selector,
{ //navbar options
edit: false,
editicon : 'ace-icon fa fa-pencil blue',
add: false,
addicon : 'ace-icon fa fa-plus-circle purple',
del: false,
delicon : 'ace-icon fa fa-trash-o red',
search: false,
searchicon : 'ace-icon fa fa-search orange',
refresh: false,
refreshicon : 'ace-icon fa fa-refresh green',
view: true,
viewicon : 'ace-icon fa fa-search-plus grey',
},
{
//view record form
recreateForm: true,
width:500,
beforeShowForm: function(e){
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
}
}
)


//it causes some flicker when reloading or navigating grid
//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
//or go back to default browser checkbox styles for the grid
function styleCheckbox(table) {
/**
$(table).find('input:checkbox').addClass('ace')
.wrap('<label />')
.after('<span class="lbl align-top" />')


$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
.find('input.cbox[type=checkbox]').addClass('ace')
.wrap('<label />').after('<span class="lbl align-top" />');
*/
}


//unlike navButtons icons, action icons in rows seem to be hard-coded
//you can change them like this in here if you want
function updateActionIcons(table) {
/**
var replacement =
{
'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
'ui-icon-disk' : 'ace-icon fa fa-check green',
'ui-icon-cancel' : 'ace-icon fa fa-times red'
};
$(table).find('.ui-pg-div span.ui-icon').each(function(){
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
})
*/
}

//replace icons with FontAwesome icons like above
function updatePagerIcons(table) {
var replacement =
{
'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
};
$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
})
}

function enableTooltips(table) {
$('.navtable .ui-pg-button').tooltip({container:'body'});
$(table).find('.ui-pg-div').tooltip({container:'body'});
}

//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

$(document).on('ajaxloadstart', function(e) {
$(grid_selector).jqGrid('GridUnload');
$('.ui-jqdialog').remove();
});
});
</script>
</body>
</html>
Loading

0 comments on commit d0127e3

Please sign in to comment.