horsensspejder-web/mobile/moedeprotokol.php

<?php
require "../inc/mysql.php";
header("Content-Type: text/html; charset=iso-8859-1");
session_start();

?>

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/1.2.0/jqm-datebox-1.2.0.min.css" /> <!-- datebox -->

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/1.2.0/jqm-datebox-1.2.0.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/1.2.0/jqm-datebox-1.2.0.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.da.asc.js"></script>


<script type="text/javascript">

$( function() {


        $("#dato").val( '<?php echo date("d-m-Y"); ?>' );

    $("#select-enhed").change( function() {
    
        $.mobile.loading( "show" );
    
        rydMoedeDeltagere();
    
        var medlemmer = $("#medlemmer");
        var sel = $(this).val();
        $.getJSON("moede_json_medlemmer.php","enhed=" + sel, function(data) {
        
            for (var i =0; i<data.length; i++) {
                var entry = data[i];
                
                var li = "<li class='medlem'><input type='checkbox' name='medlem[]' value='NAVN'> NAVN</li>";
                li = li.replace( /NAVN/g, entry)
                
                medlemmer.append(li);
            }
            
            medlemmer.listview('refresh');
            
            $.mobile.loading( "hide" );
        });
    });
    
    
    $("#tilfoejny").click( function() {
                $("#popupDialog").popup("open");
    });
    
    $("#btnOK").click( function() {
        var nynavn = $("#nyNavn").val();
        $("#nyNavn").val( "" );
         
                var li = "<li class='medlem'><input type='checkbox' checked='checked' value='NAVN'> NAVN</li>";
                li = li.replace( /NAVN/g, nynavn)

         
        $("#nye").append( li ).listview('refresh');
    });
    
    
    $( "#popupDialog" ).on( "popupafteropen", function( event, ui ) {
        $("#nyNavn").focus();
    });
    
    $("#gem").click( function() {

        $.mobile.loading( "show" );

        
        var medlemmer = new Array();
    
        $("#medlemmer :checked").each( function(index) {
                console.log( $(this).attr("value") );
            medlemmer.push( $(this).attr("value") )
        });
        var medlemmerStr = medlemmer.join("|");
        
        var nye = new Array();
    
        $("#nye :checked").each( function(index) {
                console.log( $(this).attr("value") );
            nye.push( $(this).attr("value") )
        });
        var nyeStr = nye.join("|");
        
        var enhedStr = $("#select-enhed").val();
        
        var emneStr = $("#emne").val();
                
                var post = {
                        medlemmer: medlemmerStr,
                        nye: nyeStr,
                        enhed: enhedStr,
                        emne: emneStr
                }
                var postStr = $.param(post);
        
        $.post("moede_post.php", postStr, function(){

            $("#select-enhed").val('ingen');
            $("#select-enhed").selectmenu( "refresh" );
            
                rydMoedeDeltagere();
                
                $.mobile.loading( "hide" );
                alert( "Gemt!" );
                
        });

    });
    
});


function rydMoedeDeltagere() {
    $("#medlemmer").find(".medlem").remove();
    $("#medlemmer").listview('refresh');
    
    $("#nye").find(".medlem").remove();
    $("#nye").listview('refresh');
        
        $("emne").val("");
}
</script>

</head>


<body>

<!-- Home -->
<div data-role="page" id="page_moede">
    <div data-theme="a" data-role="header">
        <h3>
            Horsens Spejder
        </h3>
    </div>
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#page_moede" data-transition="fade" data-theme="" data-icon="check"
                                        class="ui-btn-active ui-state-persist">
                        M&oslash;de<br>Protokol
                    </a>
                </li>

                <li>
                    <a href="inbox.php" data-transition="fade" data-theme="" data-icon="grid">
                        SMS Inbox<br>&nbsp;
                    </a>
                </li>
                <li>
                    <a href="personer.php" data-transition="fade" data-theme="" data-icon="bars">
                        Kontakter<br>&nbsp;
                    </a>
                </li>

            </ul>
        </div>


   <div data-role="content">
    <select name="select-enhed" id="select-enhed">
        <option value="ingen">V&aelig;lg Enhed</option>
        <option value="b_ver">B&aelig;ver</option>
        <option value="ulv">Ulve</option>
        <option value="junior">Junior</option>
        <option value="spejder">Spejder</option>
        <option value="senior">Senior</option>
    </select>
<!--
        <label for="dato">Dato</label>
        <input name="dato" id="dato" type="text" data-role="datebox" data-options='{"mode":"calbox", "useNewStyle":true}' />
-->
        <label for="emne">M&oslash;de Emne</label>
        
        <input  name="emne" id="emne" type="text" maxlength="10"/>

        <ul data-role="listview"  data-divider-theme="b" data-inset="true" id="medlemmer">
            <li data-role="list-divider" role="heading">
                Medlemmer
            </li>
        </ul>
        <ul data-role="listview"  data-divider-theme="b" data-inset="true" id="nye">
            <li data-role="list-divider" role="heading">
                Nye
            </li>
        </ul>
        
        <input id="tilfoejny" type="button" value="Tilf&oslash;j ny" id="tilfoej" data-inset="true" />


        </div>
        
        <input type="button" value="Gem M&oslash;de" id="gem" data-inset="true" >

        <br><!-- force some space after last button -->
        <br>
        <br>
        <br>


<div style="display: none">

    <div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
        <div data-role="header" data-theme="a" class="ui-corner-top">
             <h1>Tilf&oslash;j ny</h1>

        </div>
        <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
             <h3 class="ui-title">Indtast navn</h3>

            <input type="text" name="nyNavn" id="nyNavn" value="" placeholder="Navn" />
                        <a id="btnOK" href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">OK</a>
            <a id="btnCancel" href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>

        </div>
    </div>
</div>

        
</div><!-- END page -->


</body>
</html>
1	torben	2126	<?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	torben	2133	<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	torben	2126	<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	torben	2133	<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	torben	2126	<script type="text/javascript">
25
26			$( function() {
27
28	torben	2133
29			$("#dato").val( '<?php echo date("d-m-Y"); ?>' );
30
31	torben	2126	$("#select-enhed").change( function() {
32	torben	2129
33			$.mobile.loading( "show" );
34
35	torben	2127	rydMoedeDeltagere();
36
37	torben	2126	var medlemmer = $("#medlemmer");
38			var sel = $(this).val();
39	torben	2127	$.getJSON("moede_json_medlemmer.php","enhed=" + sel, function(data) {
40	torben	2126
41			for (var i =0; i<data.length; i++) {
42			var entry = data[i];
43
44	torben	2127	var li = "<li class='medlem'><input type='checkbox' name='medlem[]' value='NAVN'> NAVN</li>";
45			li = li.replace( /NAVN/g, entry)
46	torben	2126
47			medlemmer.append(li);
48			}
49
50			medlemmer.listview('refresh');
51	torben	2129
52			$.mobile.loading( "hide" );
53	torben	2127	});
54	torben	2126	});
55
56
57			$("#tilfoejny").click( function() {
58			$("#popupDialog").popup("open");
59			});
60
61			$("#btnOK").click( function() {
62	torben	2127	var nynavn = $("#nyNavn").val();
63			$("#nyNavn").val( "" );
64	torben	2126
65	torben	2127	var li = "<li class='medlem'><input type='checkbox' checked='checked' value='NAVN'> NAVN</li>";
66			li = li.replace( /NAVN/g, nynavn)
67
68	torben	2126
69	torben	2127	$("#nye").append( li ).listview('refresh');
70	torben	2126	});
71	torben	2127
72
73			$( "#popupDialog" ).on( "popupafteropen", function( event, ui ) {
74			$("#nyNavn").focus();
75			});
76
77			$("#gem").click( function() {
78	torben	2129
79			$.mobile.loading( "show" );
80
81	torben	2127
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	torben	2141
100			var emneStr = $("#emne").val();
101	torben	2127
102			var post = {
103			medlemmer: medlemmerStr,
104			nye: nyeStr,
105	torben	2141	enhed: enhedStr,
106			emne: emneStr
107	torben	2127	}
108			var postStr = $.param(post);
109
110			$.post("moede_post.php", postStr, function(){
111	torben	2129
112	torben	2127	$("#select-enhed").val('ingen');
113			$("#select-enhed").selectmenu( "refresh" );
114
115			rydMoedeDeltagere();
116	torben	2129
117			$.mobile.loading( "hide" );
118			alert( "Gemt!" );
119
120	torben	2127	});
121
122			});
123
124	torben	2126	});
125
126	torben	2127
127			function rydMoedeDeltagere() {
128			$("#medlemmer").find(".medlem").remove();
129			$("#medlemmer").listview('refresh');
130
131			$("#nye").find(".medlem").remove();
132			$("#nye").listview('refresh');
133	torben	2141
134			$("emne").val("");
135	torben	2127	}
136	torben	2126	</script>
137
138			</head>
139
140
141			<body>
142
143			<!-- Home -->
144			<div data-role="page" id="page_moede">
145			<div data-theme="a" data-role="header">
146			<h3>
147			Horsens Spejder
148			</h3>
149			</div>
150			<div data-role="navbar" data-iconpos="top">
151			<ul>
152			<li>
153			<a href="#page_moede" data-transition="fade" data-theme="" data-icon="check"
154			class="ui-btn-active ui-state-persist">
155			Møde<br>Protokol
156			</a>
157			</li>
158
159			<li>
160			<a href="inbox.php" data-transition="fade" data-theme="" data-icon="grid">
161			SMS Inbox<br>
162			</a>
163			</li>
164			<li>
165			<a href="personer.php" data-transition="fade" data-theme="" data-icon="bars">
166			Kontakter<br>
167			</a>
168			</li>
169
170			</ul>
171			</div>
172
173
174			<div data-role="content">
175			<select name="select-enhed" id="select-enhed">
176			<option value="ingen">Vælg Enhed</option>
177			<option value="b_ver">Bæver</option>
178			<option value="ulv">Ulve</option>
179			<option value="junior">Junior</option>
180	torben	2127	<option value="spejder">Spejder</option>
181	torben	2126	<option value="senior">Senior</option>
182			</select>
183	torben	2134	<!--
184	torben	2133	<label for="dato">Dato</label>
185			<input name="dato" id="dato" type="text" data-role="datebox" data-options='{"mode":"calbox", "useNewStyle":true}' />
186	torben	2134	-->
187	torben	2141	<label for="emne">Møde Emne</label>
188
189			<input name="emne" id="emne" type="text" maxlength="10"/>
190
191	torben	2126	<ul data-role="listview" data-divider-theme="b" data-inset="true" id="medlemmer">
192			<li data-role="list-divider" role="heading">
193			Medlemmer
194			</li>
195			</ul>
196			<ul data-role="listview" data-divider-theme="b" data-inset="true" id="nye">
197			<li data-role="list-divider" role="heading">
198			Nye
199			</li>
200			</ul>
201
202	torben	2141	<input id="tilfoejny" type="button" value="Tilføj ny" id="tilfoej" data-inset="true" />
203	torben	2126
204
205
206			</div>
207	torben	2127
208	torben	2132	<input type="button" value="Gem Møde" id="gem" data-inset="true" >
209	torben	2126
210	torben	2132	<br><!-- force some space after last button -->
211			<br>
212			<br>
213			<br>
214	torben	2126
215	torben	2132
216	torben	2126	<div style="display: none">
217
218			<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
219			<div data-role="header" data-theme="a" class="ui-corner-top">
220			<h1>Tilføj ny</h1>
221
222			</div>
223			<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
224			<h3 class="ui-title">Indtast navn</h3>
225
226			<input type="text" name="nyNavn" id="nyNavn" value="" placeholder="Navn" />
227			<a id="btnOK" href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">OK</a>
228			<a id="btnCancel" href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>
229
230			</div>
231			</div>
232			</div>
233
234
235
236			</div><!-- END page -->
237
238
239			</body>
240			</html>