Project

General

Profile

« Previous | Next » 

Revision 38045

Implementation tou AutoComplete widget
Allagi tou style tou filter me FormFieldSet kai TextBox

View differences:

modules/uoa-stats-config/trunk/src/main/java/eu/dnetlib/client/widgets/AutoCompleteWidget.java
1
package eu.dnetlib.client.widgets;
2

  
3

  
4
import com.google.gwt.core.client.JsonUtils;
5
import com.google.gwt.event.dom.client.ClickEvent;
6
import com.google.gwt.event.dom.client.ClickHandler;
7
import com.google.gwt.event.dom.client.KeyUpEvent;
8
import com.google.gwt.event.dom.client.KeyUpHandler;
9
import com.google.gwt.http.client.Request;
10
import com.google.gwt.http.client.RequestBuilder;
11
import com.google.gwt.http.client.RequestCallback;
12
import com.google.gwt.http.client.RequestException;
13
import com.google.gwt.http.client.Response;
14
import com.google.gwt.user.client.Timer;
15
import com.google.gwt.user.client.Window;
16
import com.google.gwt.user.client.ui.Anchor;
17
import com.google.gwt.user.client.ui.FlowPanel;
18
import com.google.gwt.user.client.ui.IsWidget;
19
import com.google.gwt.user.client.ui.Label;
20
import com.google.gwt.user.client.ui.TextBox;
21
import com.google.gwt.user.client.ui.Widget;
22

  
23
import eu.dnetlib.shared.FiltersData;
24

  
25
public class AutoCompleteWidget implements IsWidget{
26

  
27
	private FlowPanel masterPanel = new FlowPanel();
28
	private FlowPanel suggestionList = new FlowPanel();
29
	private TextBox inputTextBox = new TextBox();
30
	private static String BASE_URL = "http://dl114.madgik.di.uoa.gr/stats/";
31
	private FiltersData filtersData;
32
    private Timer timer;
33
    private String table = new String();
34
    private String field = new String();
35
	
36
	public String getTable() {
37
		return table;
38
	}
39

  
40
	public void setTable(String table) {
41
		this.table = table;
42
	}
43

  
44
	public String getField() {
45
		return field;
46
	}
47

  
48
	public void setField(String field) {
49
		this.field = field;
50
	}
51

  
52
	public AutoCompleteWidget(String type, String placeholder,String table, String field) {
53
		
54
		
55
		this.table = table;
56
		this.field = field;
57
		
58
		masterPanel.addStyleName("autoCompleteWidget");
59
		masterPanel.add(inputTextBox);
60
		
61
		inputTextBox.addStyleName("filterTextBox");
62
		inputTextBox.getElement().setAttribute("placeholder", placeholder);
63
		
64
		inputTextBox.addKeyUpHandler(new KeyUpHandler() {
65
			
66
			@Override
67
			public void onKeyUp(KeyUpEvent event) {
68
				if(timer==null) {
69

  
70
                    timer = new Timer() {
71

  
72
                        @Override
73
                        public void run() {
74
                            bringRecommendations();
75
                        }
76
                    };
77
                    timer.schedule(300);
78

  
79
                } else {
80

  
81
                    timer.cancel();
82
                    timer = new Timer() {
83

  
84
                        @Override
85
                        public void run() {
86
                            bringRecommendations();
87
                        }
88
                    };
89
                    timer.schedule(400);
90
                }
91
				bringRecommendations();
92
			}
93
		});
94
	}
95
	
96
	public void bringRecommendations(){
97
		if(!inputTextBox.getText().equals(""))
98
			AjaxRequest(BASE_URL + "ajaxRouter9.php?com=filterData&table="+this.table+"&field="+this.field+"&input="+inputTextBox.getText());
99
		else
100
			masterPanel.remove(AutoCompleteWidget.this.suggestionList);
101
	}
102
	
103
	private void AjaxRequest (final String URL){
104
		
105

  
106
		RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, URL);
107
	
108
		try {
109
			
110
			
111
			Request request = builder.sendRequest(null, new RequestCallback() {
112
				
113
				@Override
114
				public void onResponseReceived(Request request, Response response) {
115
					
116
					// TODO Auto-generated method stub
117
	
118
					if(response.getStatusCode()==200){
119
						FlowPanel suggestionList = new FlowPanel();
120
						filtersData = JsonUtils.safeEval(response.getText().toString());
121
						if(filtersData.getData().length()!=0){
122
							for(int i=0;i<filtersData.getData().length();i++){
123
								
124
								final Anchor anchor = new Anchor();
125
								anchor.setText(filtersData.getData().get(i).toString());
126
								anchor.addStyleName("suggestionItem");
127
								anchor.getElement().setId(filtersData.getData().get(i).toString());
128
								anchor.addClickHandler(new ClickHandler() {
129
									
130
									@Override
131
									public void onClick(ClickEvent event) {
132
										inputTextBox.setValue(anchor.getText());
133
										inputTextBox.setText(anchor.getText());
134
										masterPanel.remove(AutoCompleteWidget.this.suggestionList);
135
									}
136
								});
137
								suggestionList.add(anchor);
138
							}
139
						}else{
140
							Label label = new Label("No result found");
141
							label.addStyleName("suggestionInfoItem");
142
							suggestionList.add(label);
143
						}
144
						suggestionList.addStyleName("suggestionList");
145
						masterPanel.remove(AutoCompleteWidget.this.suggestionList);
146
						masterPanel.add(suggestionList);
147
						AutoCompleteWidget.this.suggestionList = suggestionList;
148
					}else{
149
						DisplayError("Could not retrieve JSON");
150
					}
151
				}
152
				
153
				@Override
154
				public void onError(Request request, Throwable exception) {
155
					DisplayError("Could not retrieve JSON2 ");
156
				}
157
			});
158
		} catch (RequestException e) {
159
			// TODO Auto-generated catch block
160
			e.printStackTrace();
161
			DisplayError("Could not retrieve JSON3");
162
		}
163
	}
164
	
165
	
166
	public void DisplayError(String msg){
167
		Window.alert(msg);
168
		
169
	}
170
	@Override
171
	public Widget asWidget() {
172
		return masterPanel;
173
	}
174

  
175
}
modules/uoa-stats-config/trunk/src/main/java/eu/dnetlib/client/leftColumn/DataserieWidget.java
33 33
import com.google.gwt.user.client.ui.Widget;
34 34

  
35 35
import eu.dnetlib.client.Generate;
36
import eu.dnetlib.client.widgets.AutoCompleteWidget;
36 37
import eu.dnetlib.client.widgets.DropdownListWidget;
37 38
import eu.dnetlib.client.widgets.FormFieldSet;
38 39
import eu.dnetlib.shared.Attribute;
......
170 171
		});
171 172
        ValuesOfFields.getInstance().getColumnsDataList().get(numberOfCurrentColumn).setDesignAs(designAs.getSelectedItemText());
172 173
		ValuesOfFields.getInstance().getColumnsDataList().get(numberOfCurrentColumn).setIndexOfDesignAs(designAs.getSelectedIndex());
173

  
174
        
174
		
175 175
        final AccordionGroup generalOptionsGroupPanel = new AccordionGroup();
176 176
        generalOptionsGroupPanel.addStyleName("accordionPanel");
177 177
        generalOptionsGroupPanel.setId("accordionGeneral");
modules/uoa-stats-config/trunk/src/main/java/eu/dnetlib/client/leftColumn/FilterWidget.java
1 1
package eu.dnetlib.client.leftColumn;
2 2

  
3 3
import java.util.ArrayList;
4
import java.util.Date;
5 4

  
6 5
import com.github.gwtbootstrap.client.ui.Button;
7 6
import com.github.gwtbootstrap.client.ui.CheckBox;
8 7
import com.github.gwtbootstrap.client.ui.Form;
9 8
import com.github.gwtbootstrap.client.ui.Tab;
10 9
import com.github.gwtbootstrap.client.ui.TabPanel;
11
import com.github.gwtbootstrap.client.ui.TextArea;
10
import com.github.gwtbootstrap.client.ui.TextBox;
12 11
import com.github.gwtbootstrap.client.ui.constants.ButtonType;
13 12
import com.github.gwtbootstrap.client.ui.constants.FormType;
14 13
import com.google.gwt.core.client.JsArray;
......
24 23
import com.google.gwt.http.client.RequestException;
25 24
import com.google.gwt.http.client.Response;
26 25
import com.google.gwt.user.client.Window;
26
import com.google.gwt.user.client.ui.Anchor;
27 27
import com.google.gwt.user.client.ui.FlowPanel;
28 28
import com.google.gwt.user.client.ui.HorizontalPanel;
29 29
import com.google.gwt.user.client.ui.IsWidget;
......
31 31
import com.google.gwt.user.client.ui.Tree;
32 32
import com.google.gwt.user.client.ui.TreeItem;
33 33
import com.google.gwt.user.client.ui.Widget;
34
import com.google.gwt.user.datepicker.client.CalendarUtil;
35 34

  
36
import eu.dnetlib.client.widgets.DataRangeSlider;
35
import eu.dnetlib.client.widgets.AutoCompleteWidget;
37 36
import eu.dnetlib.client.widgets.DropdownListWidget;
38 37
import eu.dnetlib.client.widgets.FormFieldSet;
39 38
import eu.dnetlib.shared.Attribute;
......
49 48
	private boolean isForEdit = false;
50 49
	private static String BASE_URL = "http://dl114.madgik.di.uoa.gr/stats/";
51 50
	private FiltersData filtersData;
52
	private TextArea fromTextArea = new TextArea();
53
	private TextArea toTextArea = new TextArea();
51
	private TextBox fromTextBox = new TextBox();
52
	private TextBox toTextBox = new TextBox();
54 53
	private FlowPanel flowPanelForDiscrete = new FlowPanel();
55 54
	private int numberOfCurrentColumn;
56 55
	private int indexForEdit;
......
59 58
	private Tab discreteTab = new Tab();
60 59
	private DropdownListWidget fieldsListBox = new DropdownListWidget();
61 60
	private SchemaAnswer schemaFromServer;
61
	private String selectedTable;
62
	private String selectedField;
62 63
	
63 64
	public void setIndexForEdit(int indexForEdit){
64 65
		this.indexForEdit = indexForEdit;
......
82 83
	public FilterWidget(SchemaAnswer schemaFromServer,int numberOfCurrentColumn){
83 84
		
84 85
		this.numberOfCurrentColumn = numberOfCurrentColumn;
85
		AjaxRequest(BASE_URL + "ajaxRouter9.php?com=filterData&table=result&field=year");
86 86
		this.schemaFromServer = schemaFromServer;
87 87
		designDiv();
88 88
	
......
91 91
	public FilterWidget(SchemaAnswer schemaFromServer,int numberOfCurrentColumn,boolean isForEdit,int numberOfFilter){
92 92
		
93 93
		this.numberOfCurrentColumn = numberOfCurrentColumn;
94
		if(!isForEdit)
95
			AjaxRequest(BASE_URL + "ajaxRouter9.php?com=filterData&table=result&field=year");
96 94
		this.schemaFromServer = schemaFromServer;
97 95
		this.isForEdit = isForEdit;
98 96
		this.numberOfFilter = numberOfFilter;
......
171 169
		
172 170
		if(isForEdit){
173 171
			if(ValuesOfFields.getInstance().getColumnsDataList().get(numberOfCurrentColumn).getFilters().get(indexForEdit).getType().equals("Continuous")){
174
				fromTextArea.setText(ValuesOfFields.getInstance().getColumnsDataList().get(numberOfCurrentColumn).getFilters().get(indexForEdit).getValueFrom());
175
				toTextArea.setText(ValuesOfFields.getInstance().getColumnsDataList().get(numberOfCurrentColumn).getFilters().get(indexForEdit).getValueTo());
172
				fromTextBox.setText(ValuesOfFields.getInstance().getColumnsDataList().get(numberOfCurrentColumn).getFilters().get(indexForEdit).getValueFrom());
173
				toTextBox.setText(ValuesOfFields.getInstance().getColumnsDataList().get(numberOfCurrentColumn).getFilters().get(indexForEdit).getValueTo());
176 174
			}
177 175
		}else{
178
			fromTextArea.setPlaceholder("From..");
179
			toTextArea.setPlaceholder("To..");
176
			fromTextBox.setPlaceholder("From..");
177
			toTextBox.setPlaceholder("To..");
180 178
		}
181 179
		
182 180
		
183 181
		
184 182
		fromPanel.add(from);
185
		fromPanel.add(fromTextArea);
183
		fromPanel.add(fromTextBox);
186 184
		
187 185
		toPanel.add(to);
188
		toPanel.add(toTextArea);
186
		toPanel.add(toTextBox);
189 187
		
190 188
		flowPanel.add(fromPanel);
191 189
		flowPanel.add(toPanel);
192 190
		
193
//		Date temp = new Date();
194
//		CalendarUtil.addDaysToDate(temp, 21);
195
//		flowPanel.add(new DataRangeSlider(new Date(), temp, new Date(), temp));
196 191
		
197 192
		continuousTab.add(flowPanel);
198 193
	}
199 194
	
200 195
	public void designDiscreteTab(Tab discreteTab){
201 196
		
197
		final String table = this.selectedTable;
198
		final String field = this.selectedField;
199
		AutoCompleteWidget autoComplete = new AutoCompleteWidget("", "Search value...",table , field);
202 200
		
203
		flowPanelForDiscrete.setHeight("300px");
204
		flowPanelForDiscrete.getElement().getStyle().setOverflow(Overflow.AUTO);
205
		
206
		if(isForEdit){
207
			checkBoxList.clear();
208
			for(int i=0;i<ValuesOfFields.getInstance().getColumnsDataList().get(numberOfCurrentColumn).getFilters().get(numberOfFilter).getListValuesBool().size();i++){
209
				CheckBox temp = new CheckBox();
210
				if(ValuesOfFields.getInstance().getColumnsDataList().get(numberOfCurrentColumn).getFilters().get(numberOfFilter).getListValuesBool().get(i)){
211
					temp.setText(ValuesOfFields.getInstance().getColumnsDataList().get(numberOfCurrentColumn).getFilters().get(numberOfFilter).getListValuesString().get(i));
212
					temp.setValue(true);
213
					checkBoxList.add(temp);
214
				}else{
215
					temp.setText(ValuesOfFields.getInstance().getColumnsDataList().get(numberOfCurrentColumn).getFilters().get(numberOfFilter).getListValuesString().get(i));
216
					temp.setValue(false);
217
					checkBoxList.add(temp);
218
				}
201
		final Form discreteTabForm = new Form();
202
		discreteTabForm.add(new FormFieldSet("Value", autoComplete.asWidget()));
203
		Anchor addAnother = new Anchor();
204
		addAnother.setText("Add another");
205
		addAnother.addClickHandler(new ClickHandler() {
206
			
207
			@Override
208
			public void onClick(ClickEvent event) {
209
				AutoCompleteWidget temp = new AutoCompleteWidget("", "Add value..", table , field);
210
				discreteTabForm.add(new FormFieldSet("", temp.asWidget()));
219 211
			}
220
		}
212
		});
221 213
		
222
		for(int i=0;i<checkBoxList.size();i++){
223
			flowPanelForDiscrete.add(checkBoxList.get(i));
224
		}
214
		flowPanelForDiscrete.setHeight("250px");
215
		flowPanelForDiscrete.getElement().getStyle().setOverflow(Overflow.AUTO);
225 216
		
226
		
217
		flowPanelForDiscrete.add(discreteTabForm);
218
		flowPanelForDiscrete.add(addAnother);
227 219
		discreteTab.add(flowPanelForDiscrete);
228 220
	}
229 221
	
......
244 236
		}
245 237
		String[] splitted = fieldsListBox.getMasterTree().getSelectedItem().getTitle().split(" type ");
246 238
		tempFilterClass.setFieldValue(splitted[0]);
247
		tempFilterClass.setValueFrom(fromTextArea.getText());
248
		tempFilterClass.setValueTo(toTextArea.getText());
239
		tempFilterClass.setValueFrom(fromTextBox.getText());
240
		tempFilterClass.setValueTo(toTextBox.getText());
249 241
		tempFilterClass.setListValuesBool(tempBool);
250 242
		tempFilterClass.setListValuesString(tempString);
251 243
		tempFilterClass.setGroupBy(splitted[0]);
......
263 255
		}
264 256

  
265 257
	}
266
	
267
	private void AjaxRequest (final String URL){
268
		
269 258

  
270
		RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, URL);
271
	
272
		try {
273
			
274
			
275
			Request request = builder.sendRequest(null, new RequestCallback() {
276
				
277
				@Override
278
				public void onResponseReceived(Request request, Response response) {
279
					
280
					// TODO Auto-generated method stub
281
	
282
					if(response.getStatusCode()==200){
283
						filtersData = JsonUtils.safeEval(response.getText().toString());
284
						checkBoxList.clear();
285
						flowPanelForDiscrete.clear();
286
						
287
						for(int i=0; i<filtersData.getData().length();i++){
288
							checkBoxList.add(new CheckBox(filtersData.getData().get(i).toString(),false));
289
							flowPanelForDiscrete.add(checkBoxList.get(i));
290
							if(i==0){
291
								fromTextArea.setText(filtersData.getData().get(i).toString());
292
							}else if(i==filtersData.getData().length()-1){
293
								toTextArea.setText(filtersData.getData().get(i-1).toString());
294
							}
295
					    }
296
					}else{
297
						DisplayError("Could not retrieve JSON");
298
					}
299
				}
300
				
301
				@Override
302
				public void onError(Request request, Throwable exception) {
303
					// TODO Auto-generated method stub
304
					DisplayError("Could not retrieve JSON2 ");
305
				}
306
			});
307
		} catch (RequestException e) {
308
			// TODO Auto-generated catch block
309
			e.printStackTrace();
310
			DisplayError("Could not retrieve JSON3");
311
		}
312
	}
313
	
314
	public void DisplayError(String msg){
315
		Window.alert(msg);
316
		
317
	}
318 259
	public void bringAllOfCertainTable(DropdownListWidget x_optionsListBox){
319 260
		
320 261
		
......
356 297
			public void onSelection(SelectionEvent<TreeItem> event) {
357 298
				if(event.getSelectedItem().getChildCount()==0){//ara den eimai se riza alla se fullo
358 299
					String[] splitted = event.getSelectedItem().getTitle().split(" type ");
359
					 AjaxRequest(BASE_URL+"ajaxRouter9.php?com=filterData&table="+ValuesOfFields.getInstance().getColumnsDataList().get(numberOfCurrentColumn).getDataSource()+"&field="+splitted[0]);
300
					selectedTable = ValuesOfFields.getInstance().getColumnsDataList().get(numberOfCurrentColumn).getDataSource();
301
					selectedField = splitted[0];
302
					flowPanelForDiscrete.clear();
303
					designDiscreteTab(discreteTab);
304
					AjaxRequest(BASE_URL + "ajaxRouter9.php?com=filterData&table="+selectedTable+"&field="+selectedField);
360 305
					 if(!splitted[1].equals("int") && !splitted[1].equals("date")){
361 306
						continuousTab.setEnabled(false);
362 307
					 }else{
......
432 377
		return contentString;
433 378
	}
434 379

  
380
private void AjaxRequest (final String URL){
381
		
382

  
383
		RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, URL);
384
	
385
		try {
386
			
387
			
388
			Request request = builder.sendRequest(null, new RequestCallback() {
389
				
390
				@Override
391
				public void onResponseReceived(Request request, Response response) {
392
					
393
					// TODO Auto-generated method stub
394
	
395
					if(response.getStatusCode()==200){
396
						filtersData = JsonUtils.safeEval(response.getText().toString());
397
						
398
						fromTextBox.setText(filtersData.getMin());
399
						toTextBox.setText(filtersData.getMax());
400
					}else{
401
						DisplayError("Could not retrieve JSON");
402
					}
403
				}
404
				
405
				@Override
406
				public void onError(Request request, Throwable exception) {
407
					DisplayError("Could not retrieve JSON2 ");
408
				}
409
			});
410
		} catch (RequestException e) {
411
			// TODO Auto-generated catch block
412
			e.printStackTrace();
413
			DisplayError("Could not retrieve JSON3");
414
		}
415
	}
416
	
417
	
418
	public void DisplayError(String msg){
419
		Window.alert(msg);
420
		
421
	}
422
	
435 423
	@Override
436 424
	public Widget asWidget() {
437 425
		// TODO Auto-generated method stub
modules/uoa-stats-config/trunk/src/main/webapp/StatsConfig.html
13 13
    <!-- Consider inlining CSS to reduce the number of requested files -->
14 14
    <!--                                                               -->
15 15
    <link type="text/css" rel="stylesheet" href="StatsConfig.css">
16
    <link type="text/css" rel="stylesheet" href="autocomplete.css">
16 17
    <link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
17 18

  
18 19
    <!--                                           -->
......
43 44
    <div id="block-main">
44 45
        <div id="optionsColumn" class="leftColumn"></div>
45 46
        <div class="rightColumn">
46
            <div id="highchart" class="chartContent"></div>
47
            <div id="highchart" class="chartContent"><div id="loading-div"></div></div>
47 48
            <div id="tableChart" class="chartContent"></div>
48 49
        </div>
49 50
    </div>
modules/uoa-stats-config/trunk/src/main/webapp/autocomplete.css
1
@CHARSET "UTF-8";
2

  
3
 .autoCompleteWidget {
4
    position: relative;
5
}
6

  
7
.filterTextBox {
8
    border-radius: 4px !important;
9
    /*margin-bottom: 25px !important;*/
10
    padding-left: 35px !important;
11
    background: url("./imgs/search.png") no-repeat 3% 50%;
12
    background-size: 10% 80%;
13
    width: 181px !important;
14
}
15

  
16
.suggestionList {
17
    border: 1px solid #dfd9d2;
18
    position: absolute;
19
    width: 221px !important;
20
    border-radius: 4px;
21
    top: 32px;
22
    background-color: #f4efe9;
23
    border-color: rgba(83, 68, 65, 0.8) !important;
24
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(83, 68, 65, 0.6) !important;
25
    outline: 0 none;
26
    z-index: 100;
27
    max-height: 200px;
28
    overflow-y: scroll;
29
}
30

  
31
.suggestionItem {
32
    padding: 5px 10px;
33
    display: block;
34
}
35

  
36
.suggestionItem:hover {
37
    background-color: rgba(83, 68, 65, 0.6) !important;
38
    /*background-color: #ee964a;*/
39
    color: #ffffff !important;
40
    text-decoration: none !important;
41
}
42

  
43
.suggestionInfoItem {
44
    padding: 5px 10px;
45
    background-color: #f4efe9;
46
}
modules/uoa-stats-config/trunk/src/main/webapp/StatsConfig.css
310 310
.infoParagraph{
311 311
	font-style: italic;
312 312
}
313

  

Also available in: Unified diff