/[projects]/misc/horsensspejder-web/mobile/moedeprotokol.php
ViewVC logotype

Contents of /misc/horsensspejder-web/mobile/moedeprotokol.php

Parent Directory Parent Directory | Revision Log Revision Log


Revision 2133 - (show annotations) (download)
Thu Mar 20 17:07:33 2014 UTC (10 years, 2 months ago) by torben
File size: 6643 byte(s)
first version with working date selector
1 <?php
2 require "../inc/mysql.php";
3 header("Content-Type: text/html; charset=iso-8859-1");
4 session_start();
5
6 ?>
7
8 <html>
9 <head>
10
11 <meta name="viewport" content="width=device-width, initial-scale=1" />
12
13 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
14 <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/1.2.0/jqm-datebox-1.2.0.min.css" /> <!-- datebox -->
15
16 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
17 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
18
19 <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/1.2.0/jqm-datebox-1.2.0.core.min.js"></script>
20 <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/1.2.0/jqm-datebox-1.2.0.mode.calbox.min.js"></script>
21 <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.da.asc.js"></script>
22
23
24 <script type="text/javascript">
25
26 $( function() {
27
28
29 $("#dato").val( '<?php echo date("d-m-Y"); ?>' );
30
31 $("#select-enhed").change( function() {
32
33 $.mobile.loading( "show" );
34
35 rydMoedeDeltagere();
36
37 var medlemmer = $("#medlemmer");
38 var sel = $(this).val();
39 $.getJSON("moede_json_medlemmer.php","enhed=" + sel, function(data) {
40
41 for (var i =0; i<data.length; i++) {
42 var entry = data[i];
43
44 var li = "<li class='medlem'><input type='checkbox' name='medlem[]' value='NAVN'> NAVN</li>";
45 li = li.replace( /NAVN/g, entry)
46
47 medlemmer.append(li);
48 }
49
50 medlemmer.listview('refresh');
51
52 $.mobile.loading( "hide" );
53 });
54 });
55
56
57 $("#tilfoejny").click( function() {
58 $("#popupDialog").popup("open");
59 });
60
61 $("#btnOK").click( function() {
62 var nynavn = $("#nyNavn").val();
63 $("#nyNavn").val( "" );
64
65 var li = "<li class='medlem'><input type='checkbox' checked='checked' value='NAVN'> NAVN</li>";
66 li = li.replace( /NAVN/g, nynavn)
67
68
69 $("#nye").append( li ).listview('refresh');
70 });
71
72
73 $( "#popupDialog" ).on( "popupafteropen", function( event, ui ) {
74 $("#nyNavn").focus();
75 });
76
77 $("#gem").click( function() {
78
79 $.mobile.loading( "show" );
80
81
82 var medlemmer = new Array();
83
84 $("#medlemmer :checked").each( function(index) {
85 console.log( $(this).attr("value") );
86 medlemmer.push( $(this).attr("value") )
87 });
88 var medlemmerStr = medlemmer.join("|");
89
90 var nye = new Array();
91
92 $("#nye :checked").each( function(index) {
93 console.log( $(this).attr("value") );
94 nye.push( $(this).attr("value") )
95 });
96 var nyeStr = nye.join("|");
97
98 var enhedStr = $("#select-enhed").val();
99
100 var post = {
101 medlemmer: medlemmerStr,
102 nye: nyeStr,
103 enhed: enhedStr
104 }
105 var postStr = $.param(post);
106
107 $.post("moede_post.php", postStr, function(){
108
109 $("#select-enhed").val('ingen');
110 $("#select-enhed").selectmenu( "refresh" );
111
112 rydMoedeDeltagere();
113
114 $.mobile.loading( "hide" );
115 alert( "Gemt!" );
116
117 });
118
119 });
120
121 });
122
123
124 function rydMoedeDeltagere() {
125 $("#medlemmer").find(".medlem").remove();
126 $("#medlemmer").listview('refresh');
127
128 $("#nye").find(".medlem").remove();
129 $("#nye").listview('refresh');
130
131 }
132 </script>
133
134 </head>
135
136
137 <body>
138
139 <!-- Home -->
140 <div data-role="page" id="page_moede">
141 <div data-theme="a" data-role="header">
142 <h3>
143 Horsens Spejder
144 </h3>
145 </div>
146 <div data-role="navbar" data-iconpos="top">
147 <ul>
148 <li>
149 <a href="#page_moede" data-transition="fade" data-theme="" data-icon="check"
150 class="ui-btn-active ui-state-persist">
151 M&oslash;de<br>Protokol
152 </a>
153 </li>
154
155 <li>
156 <a href="inbox.php" data-transition="fade" data-theme="" data-icon="grid">
157 SMS Inbox<br>&nbsp;
158 </a>
159 </li>
160 <li>
161 <a href="personer.php" data-transition="fade" data-theme="" data-icon="bars">
162 Kontakter<br>&nbsp;
163 </a>
164 </li>
165
166 </ul>
167 </div>
168
169
170 <div data-role="content">
171 <select name="select-enhed" id="select-enhed">
172 <option value="ingen">V&aelig;lg Enhed</option>
173 <option value="b_ver">B&aelig;ver</option>
174 <option value="ulv">Ulve</option>
175 <option value="junior">Junior</option>
176 <option value="spejder">Spejder</option>
177 <option value="senior">Senior</option>
178 </select>
179
180 <label for="dato">Dato</label>
181 <input name="dato" id="dato" type="text" data-role="datebox" data-options='{"mode":"calbox", "useNewStyle":true}' />
182
183 <ul data-role="listview" data-divider-theme="b" data-inset="true" id="medlemmer">
184 <li data-role="list-divider" role="heading">
185 Medlemmer
186 </li>
187 </ul>
188 <ul data-role="listview" data-divider-theme="b" data-inset="true" id="nye">
189 <li data-role="list-divider" role="heading">
190 Nye
191 </li>
192 </ul>
193
194 <input id="tilfoejny" type="button" value="Tilf&oslash;j ny" id="tilfoej" data-inset="true">
195
196
197
198 </div>
199
200 <input type="button" value="Gem M&oslash;de" id="gem" data-inset="true" >
201
202 <br><!-- force some space after last button -->
203 <br>
204 <br>
205 <br>
206
207
208 <div style="display: none">
209
210 <div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
211 <div data-role="header" data-theme="a" class="ui-corner-top">
212 <h1>Tilf&oslash;j ny</h1>
213
214 </div>
215 <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
216 <h3 class="ui-title">Indtast navn</h3>
217
218 <input type="text" name="nyNavn" id="nyNavn" value="" placeholder="Navn" />
219 <a id="btnOK" href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">OK</a>
220 <a id="btnCancel" href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>
221
222 </div>
223 </div>
224 </div>
225
226
227
228 </div><!-- END page -->
229
230
231 </body>
232 </html>

  ViewVC Help
Powered by ViewVC 1.1.20