root / hci / trunk / eneraptor-web-app / grails-app / views / statistics / newGraph.gsp @ 66
History | View | Annotate | Download (6.27 KB)
1 | 42 | alexbesir | <html> |
---|---|---|---|
2 | |||
3 | <head> |
||
4 | <title>Statistics</title> |
||
5 | <meta name="layout" content="main" /> |
||
6 | </head> |
||
7 | |||
8 | <body> |
||
9 | |||
10 | <erptr:box title="New graph"> |
||
11 | |||
12 | <form name="newGraphForm" action="newGraphDo"> |
||
13 | |||
14 | <fieldset> |
||
15 | <legend>General information</legend> |
||
16 | <label for="graphName">Graph name (short description)</label> |
||
17 | <g:textField name="graphName" style="width:500px;" /> |
||
18 | <br /><br /> |
||
19 | <label for="deviceId">Device</label> |
||
20 | <g:select name="deviceId" from="${devicesFriendly}" keys="${devices}" /> |
||
21 | </fieldset> |
||
22 | |||
23 | <fieldset> |
||
24 | <legend>Graph type</legend> |
||
25 | |||
26 | <label for="graphType">Calculation type</label> |
||
27 | <g:select from="${graphTypesFriendly}" value="${params.graphType}" name="graphType" keys="${graphTypes}" /> |
||
28 | <br /><br /> |
||
29 | |||
30 | <label for="timeFrameType">Time frame type</label> |
||
31 | 43 | alexbesir | <select name="timeFrameType" id="timeFrameType" > |
32 | 50 | alexbesir | <option onclick="changeTimeFrameType('day')" value="day" >Daily</option> |
33 | <option onclick="changeTimeFrameType('month')" value="month" >Monthly</option> |
||
34 | <option onclick="changeTimeFrameType('year')" value="year" >Yearly</option> |
||
35 | <option onclick="changeTimeFrameType('custom')" value="custom" >Custom</option> |
||
36 | 42 | alexbesir | </select> |
37 | <br /> |
||
38 | |||
39 | <label for="timeFrameTypeDesc"> </label> |
||
40 | <p name="timeFrameTypeDesc" id="timeFrameTypeDesc"> <i>Calculations will be made for custom inner time intervals separately.</i></p> |
||
41 | |||
42 | </fieldset> |
||
43 | |||
44 | <fieldset> |
||
45 | <legend>Main time frame</legend> |
||
46 | <div style="display:none;" id="dayMainTimeFrame" name="dayMainTimeFrame"> |
||
47 | <label for="dayMainTimeFrameStart">From</label> |
||
48 | <g:datePicker name="dayMainTimeFrameStart" precision="day" /> |
||
49 | <br /><br /> |
||
50 | <label for="dayMainTimeFrameEnd">From</label> |
||
51 | <g:datePicker name="dayMainTimeFrameEnd" precision="day" /> |
||
52 | <br /><br /> |
||
53 | </div> |
||
54 | <div style="display:none;" id="monthMainTimeFrame" name="monthMainTimeFrame"> |
||
55 | <label for="monthMainTimeFrameStart">From</label> |
||
56 | <g:datePicker name="monthMainTimeFrameStart" precision="month" /> |
||
57 | <br /><br /> |
||
58 | <label for="monthMainTimeFrameEnd">From</label> |
||
59 | <g:datePicker name="monthMainTimeFrameEnd" precision="month" /> |
||
60 | <br /><br /> |
||
61 | </div> |
||
62 | <div style="display:none;" id="yearMainTimeFrame" name="yearMainTimeFrame"> |
||
63 | <label for="yearMainTimeFrameStart">From</label> |
||
64 | <g:datePicker name="yearMainTimeFrameStart" precision="year" /> |
||
65 | <br /><br /> |
||
66 | <label for="yearMainTimeFrameEnd">From</label> |
||
67 | <g:datePicker name="yearMainTimeFrameEnd" precision="year" /> |
||
68 | <br /><br /> |
||
69 | </div> |
||
70 | <div id="customMainTimeFrame" name="customMainTimeFrame"> |
||
71 | <label for="customMainTimeFrameStart">From</label> |
||
72 | <g:datePicker name="customMainTimeFrameStart" /> |
||
73 | <br /><br /> |
||
74 | <label for="customMainTimeFrameEnd">From</label> |
||
75 | <g:datePicker name="customMainTimeFrameEnd" /> |
||
76 | <br /><br /> |
||
77 | <label for="customMainTimeFrameInnerSections">Number of inner intervals</label> |
||
78 | <input onkeyup="checkInnerSections();" type="text" id="customMainTimeFrameInnerSections" name="customMainTimeFrameInnerSections" value="1" /> |
||
79 | <br /><br /> |
||
80 | </div> |
||
81 | </fieldset> |
||
82 | |||
83 | <fieldset> |
||
84 | <legend>Advanced options</legend> |
||
85 | <a name="advOptionsExp" id="advOptionsExp" href="#" onclick="$('advOptions').show();$('advOptionsExp').hide();return false;"><erptr:icon w="bullet_arrow_down" />Show advanced options</a> |
||
86 | <div name="advOptions" id="advOptions" style="display:none;"> |
||
87 | <label for="advHoursStart">Include only hours from</label> |
||
88 | <g:select name="advHoursStart" from="${0..23}" value="0" /> |
||
89 | <span> to </span> |
||
90 | <g:select name="advHoursEnd" from="${0..23}" value="23" /> |
||
91 | <br /><br /> |
||
92 | <label for="advDayStart">Include only days from</label> |
||
93 | <g:select name="advDayStart" from="${1..31}" value="1" /> |
||
94 | <span> to </span> |
||
95 | <g:select name="advDayEnd" from="${1..31}" value="31" /> |
||
96 | <br /><br /> |
||
97 | <label for="advMonthStart">Include only months from</label> |
||
98 | <g:select name="advMonthStart" from="${1..12}" value="1" /> |
||
99 | <span> to </span> |
||
100 | <g:select name="advMonthEnd" from="${1..12}" value="12" /> |
||
101 | <br /><br /> |
||
102 | </div> |
||
103 | </fieldset> |
||
104 | |||
105 | <g:submitButton name="newGraphSubmit" value="Save & show" /> |
||
106 | <g:actionSubmit name="newGraphShowOnly" action="showGraph" value="Show (without saving)" /> |
||
107 | <g:actionSubmit name="newGraphCancel" action="newGraph" value="Cancel" /> |
||
108 | |||
109 | </form> |
||
110 | |||
111 | </erptr:box> |
||
112 | |||
113 | <g:javascript> |
||
114 | function changeTimeFrameType(toType) { |
||
115 | if(toType == 'day') { |
||
116 | $('timeFrameTypeDesc').innerHTML = " <i>Calculations will be made for each day separately.</i>"; |
||
117 | $('dayMainTimeFrame').show(); |
||
118 | $('monthMainTimeFrame').hide(); |
||
119 | $('yearMainTimeFrame').hide(); |
||
120 | $('customMainTimeFrame').hide(); |
||
121 | } else if(toType == 'month') { |
||
122 | $('timeFrameTypeDesc').innerHTML = " <i>Calculations will be made for each month separately.</i>"; |
||
123 | $('dayMainTimeFrame').hide(); |
||
124 | $('monthMainTimeFrame').show(); |
||
125 | $('yearMainTimeFrame').hide(); |
||
126 | $('customMainTimeFrame').hide(); |
||
127 | } else if(toType == 'year') { |
||
128 | $('timeFrameTypeDesc').innerHTML = " <i>Calculations will be made for each year separately.</i>"; |
||
129 | $('dayMainTimeFrame').hide(); |
||
130 | $('monthMainTimeFrame').hide(); |
||
131 | $('yearMainTimeFrame').show(); |
||
132 | $('customMainTimeFrame').hide(); |
||
133 | } else if(toType == 'custom') { |
||
134 | $('timeFrameTypeDesc').innerHTML = " <i>Calculations will be made for custom inner time intervals separately.</i>"; |
||
135 | $('dayMainTimeFrame').hide(); |
||
136 | $('monthMainTimeFrame').hide(); |
||
137 | $('yearMainTimeFrame').hide(); |
||
138 | $('customMainTimeFrame').show(); |
||
139 | } |
||
140 | } |
||
141 | function checkInnerSections() { |
||
142 | var sText = $('customMainTimeFrameInnerSections').value; |
||
143 | var validChars = "0123456789"; |
||
144 | var isNumber = true; |
||
145 | var currChar; |
||
146 | |||
147 | for (i = 0; i < sText.length; i++) { |
||
148 | currChar = sText.charAt(i); |
||
149 | if (validChars.indexOf(currChar) == -1) { |
||
150 | isNumber = false; |
||
151 | break; |
||
152 | } |
||
153 | } |
||
154 | |||
155 | if(isNumber == false) { |
||
156 | $('customMainTimeFrameInnerSections').value = sText.substring(0,(sText.length)-1) |
||
157 | } |
||
158 | |||
159 | } |
||
160 | </g:javascript> |
||
161 | |||
162 | </body> |
||
163 | |||
164 | </html> |