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" />
<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">

$( function() {

    $("#select-enhed").change( function() {
        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');
        });
    });
    
    
    $("#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() {
        
        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 post = {
                        medlemmer: medlemmerStr,
                        nye: nyeStr,
                        enhed: enhedStr
                }
                var postStr = $.param(post);
        
        $.post("moede_post.php", postStr, function(){
                alert( "Gemt!" );
    
            $("#select-enhed").val('ingen');
            $("#select-enhed").selectmenu( "refresh" );
            
                rydMoedeDeltagere();
        });

    });
    
});


function rydMoedeDeltagere() {
    $("#medlemmer").find(".medlem").remove();
    $("#medlemmer").listview('refresh');
    
    $("#nye").find(".medlem").remove();
    $("#nye").listview('refresh');

}
</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>
   
        <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">


<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	<?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	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
15	<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
16
17	<script type="text/javascript">
18
19	$( function() {
20
21	$("#select-enhed").change( function() {
22	rydMoedeDeltagere();
23
24	var medlemmer = $("#medlemmer");
25	var sel = $(this).val();
26	$.getJSON("moede_json_medlemmer.php","enhed=" + sel, function(data) {
27
28	for (var i =0; i<data.length; i++) {
29	var entry = data[i];
30
31	var li = "<li class='medlem'><input type='checkbox' name='medlem[]' value='NAVN'> NAVN</li>";
32	li = li.replace( /NAVN/g, entry)
33
34	medlemmer.append(li);
35	}
36
37	medlemmer.listview('refresh');
38	});
39	});
40
41
42	$("#tilfoejny").click( function() {
43	$("#popupDialog").popup("open");
44	});
45
46	$("#btnOK").click( function() {
47	var nynavn = $("#nyNavn").val();
48	$("#nyNavn").val( "" );
49
50	var li = "<li class='medlem'><input type='checkbox' checked='checked' value='NAVN'> NAVN</li>";
51	li = li.replace( /NAVN/g, nynavn)
52
53
54	$("#nye").append( li ).listview('refresh');
55	});
56
57
58	$( "#popupDialog" ).on( "popupafteropen", function( event, ui ) {
59	$("#nyNavn").focus();
60	});
61
62	$("#gem").click( function() {
63
64	var medlemmer = new Array();
65
66	$("#medlemmer :checked").each( function(index) {
67	console.log( $(this).attr("value") );
68	medlemmer.push( $(this).attr("value") )
69	});
70	var medlemmerStr = medlemmer.join("\|");
71
72	var nye = new Array();
73
74	$("#nye :checked").each( function(index) {
75	console.log( $(this).attr("value") );
76	nye.push( $(this).attr("value") )
77	});
78	var nyeStr = nye.join("\|");
79
80	var enhedStr = $("#select-enhed").val();
81
82	var post = {
83	medlemmer: medlemmerStr,
84	nye: nyeStr,
85	enhed: enhedStr
86	}
87	var postStr = $.param(post);
88
89	$.post("moede_post.php", postStr, function(){
90	alert( "Gemt!" );
91
92	$("#select-enhed").val('ingen');
93	$("#select-enhed").selectmenu( "refresh" );
94
95	rydMoedeDeltagere();
96	});
97
98	});
99
100	});
101
102
103	function rydMoedeDeltagere() {
104	$("#medlemmer").find(".medlem").remove();
105	$("#medlemmer").listview('refresh');
106
107	$("#nye").find(".medlem").remove();
108	$("#nye").listview('refresh');
109
110	}
111	</script>
112
113	</head>
114
115
116	<body>
117
118	<!-- Home -->
119	<div data-role="page" id="page_moede">
120	<div data-theme="a" data-role="header">
121	<h3>
122	Horsens Spejder
123	</h3>
124	</div>
125	<div data-role="navbar" data-iconpos="top">
126	<ul>
127	<li>
128	<a href="#page_moede" data-transition="fade" data-theme="" data-icon="check"
129	class="ui-btn-active ui-state-persist">
130	Møde<br>Protokol
131	</a>
132	</li>
133
134	<li>
135	<a href="inbox.php" data-transition="fade" data-theme="" data-icon="grid">
136	SMS Inbox<br>
137	</a>
138	</li>
139	<li>
140	<a href="personer.php" data-transition="fade" data-theme="" data-icon="bars">
141	Kontakter<br>
142	</a>
143	</li>
144
145	</ul>
146	</div>
147
148
149	<div data-role="content">
150	<select name="select-enhed" id="select-enhed">
151	<option value="ingen">Vælg Enhed</option>
152	<option value="b_ver">Bæver</option>
153	<option value="ulv">Ulve</option>
154	<option value="junior">Junior</option>
155	<option value="spejder">Spejder</option>
156	<option value="senior">Senior</option>
157	</select>
158
159	<ul data-role="listview" data-divider-theme="b" data-inset="true" id="medlemmer">
160	<li data-role="list-divider" role="heading">
161	Medlemmer
162	</li>
163	</ul>
164	<ul data-role="listview" data-divider-theme="b" data-inset="true" id="nye">
165	<li data-role="list-divider" role="heading">
166	Nye
167	</li>
168	</ul>
169
170	<input id="tilfoejny" type="button" value="Tilføj ny" id="tilfoej" data-inset="true">
171
172
173
174	</div>
175
176	<input type="button" value="Gem Møde" id="gem" data-inset="true">
177
178
179	<div style="display: none">
180
181	<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
182	<div data-role="header" data-theme="a" class="ui-corner-top">
183	<h1>Tilføj ny</h1>
184
185	</div>
186	<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
187	<h3 class="ui-title">Indtast navn</h3>
188
189	<input type="text" name="nyNavn" id="nyNavn" value="" placeholder="Navn" />
190	<a id="btnOK" href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">OK</a>
191	<a id="btnCancel" href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>
192
193	</div>
194	</div>
195	</div>
196
197
198
199	</div><!-- END page -->
200
201
202	</body>
203	</html>