summaryrefslogblamecommitdiffstats
path: root/modules-available/roomplanner/templates/page.html
blob: 48196020ad602c6e6361bf8efac707401ed6c08e (plain) (tree)
























































































































































































































































































































                                                                                                                                                                                                                                                                                   
                                                              

                                                                                             







                                                                                                                                                            

                      
                                                                  










                                                           

                                              









                                                                                           
                                                                     
                                                    




                   
<!-- Modal -->
<div class="modal fade" id="selectMachineModal" role="dialog">
	<div class="modal-dialog">

		<!-- Modal content-->
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4>Add Machine</h4>
			</div>
			<div class="modal-body">
				<ul class="nav nav-tabs">
					<li class="active"><a data-toggle="tab" href="#subnet">Subnet</a></li>
					<li><a data-toggle="tab" href="#search">Search</a></li>
				</ul>
				<div class="tab-content">
					<div id="subnet" class="tab-pane fade in active">
						<br/>
						<p>
						blah blah blah
						</p>
						<label for="subnetBox">Machines in this IP-Range</label>
						<input id="subnetBox" class="form-control"/>
					</div>
					<div id="search" class="tab-pane fade">
						<br/>
							<p> Hier können sie durch alle bekannten Maschinen suchen, bla blah blah.  </p>
								<label for="machineSearchBox">All Machines</label>
								<input id="machineSearchBox" class="form-control" />
					</div>

				</div>


			</div>
			<div class="modal-footer">
				<button class="btn btn-default pull-left">Cancel</button>
				<button class="btn btn-primary" id="selectMachineButton">Select</button>
			</div>
		</div>
	</div>
</div> 

<!--  berryous raumplaner -->
</head>
<body class="full">
	<h1>Raumplaner</h1>

	<div id="toolpanel" class="panel panel-default" style="z-index:200;">
		<div class="panel-heading">
			<h3 class="panel-title">Werkzeuge</h3>
		</div>
		<div class="panel-body">
			<ul role="tablist" class="nav nav-tabs">
				<li role="presentation" class="active"><a href="#computers"
					aria-controls="computers" role="tab" data-toggle="tab">Rechner</a></li>	
				<li role="presentation"><a href="#walls"
					aria-controls="walls" role="tab" data-toggle="tab">Bauelemente</a></li>
				<li role="presentation"><a href="#electricaldevices"
					aria-controls="electricaldevices" role="tab" data-toggle="tab">Elektrische Geräte</a></li>
				<li role="presentation"><a href="#tables"
					aria-controls="tables" role="tab" data-toggle="tab">Tische</a></li>
				<li role="presentation"><a href="#chairs"
					aria-controls="chairs" role="tab" data-toggle="tab">Stühle</a></li>
				<li role="presentation"><a href="#furniture"
					aria-controls="furniture" role="tab" data-toggle="tab">Sonstige Möbel</a></li>
				<li role="presentation"><a href="#officesupply"
					aria-controls="officesupply" role="tab" data-toggle="tab">Bürobedarf</a></li>
				<li role="presentation"><a href="#plants"
					aria-controls="plants" role="tab" data-toggle="tab">Pflanzen</a></li>
				<li role="presentation"><a href="#misc"
					aria-controls="misc" role="tab" data-toggle="tab">Anderes</a></li>
			</ul>
			<div class="tab-content">
				<div role="tabpanel" class="tab-pane" id="walls">
					<ul class="toollist">
						<li>
							<div itemtype="furniture" scalable="h" itemlook="wall-horizontal" class="draggable" obstacle=true style="width:100px; height:25px;" data-height="25" data-width="100" title="Wand (horizontal)"></div>
						</li>
						<li>
							<div itemtype="furniture" scalable="v" itemlook="wall-vertical" class="draggable" obstacle=true style="width:25px; height:100px;" data-height="100" data-width="25" title="Wand (vertial)"></div>
						</li>
						<li>
							<div itemtype="furniture" scalable="h" itemlook="window-horizontal" class="draggable" obstacle=true style="width:50px; height:25px;" data-height="25" data-width="50" title="Fenster"></div>
						</li>
						<li>
							<div itemtype="furniture" scalable="v" itemlook="window-vertical" class="draggable" obstacle=true style="width:25px; height:50px;" data-height="50" data-width="25" title="Fenster"></div>
						</li>
						
						 
						<li>
							<div itemtype="furniture" itemlook="door-nw" class="draggable" obstacle=true style="width:50px; height:100px;" data-height="100" data-width="50" title="Tür"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="door-ne" class="draggable" obstacle=true style="width:50px; height:100px;" data-height="100" data-width="50" title="Tür"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="door-sw" class="draggable" obstacle=true style="width:50px; height:100px;" data-height="100" data-width="50" title="Tür"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="door-se" class="draggable" obstacle=true style="width:50px; height:100px;" data-height="100" data-width="50" title="Tür"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="door-wn" class="draggable" obstacle=true style="width:100px; height:50px;" data-height="50" data-width="100" title="Tür"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="door-ws" class="draggable" obstacle=true style="width:100px; height:50px;" data-height="50" data-width="100" title="Tür"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="door-en" class="draggable" obstacle=true style="width:100px; height:50px;" data-height="50" data-width="100" title="Tür"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="door-es" class="draggable" obstacle=true style="width:100px; height:50px;" data-height="50" data-width="100" title="Tür"></div>
						</li>
						 
					</ul>
				</div>
				
				
				<div role="tabpanel" class="tab-pane active" id="computers">
					<ul class="toollist">
						<li>
							<div itemtype="pc" itemlook="pc-south" class="draggable" obstacle=true style="width:100px; height:100px;" data-height="100" data-width="100" title="PC" noresize=1></div>
						</li>
						<li>
							<div itemtype="pc" itemlook="copier" class="draggable" obstacle=true style="width:200px; height:100px;" data-height="100" data-width="200" title="Kopierer" noresize=1></div>
						</li>
						<li>
							<div itemtype="pc" itemlook="printer" class="draggable" obstacle=true style="width:100px; height:100px;" data-height="100" data-width="100" title="Drucker" noresize=1></div>
						</li>
						<li>
							<div itemtype="pc" itemlook="telephone" class="draggable" obstacle=true style="width:50px; height:50px;" data-height="50" data-width="50" title="Telefon" noresize=1></div>
						</li>
					</ul>
				</div>
				
				<div role="tabpanel" class="tab-pane" id="electricaldevices">
					<ul class="toollist">
						<li>
							<div itemtype="furniture" itemlook="flatscreen" class="draggable" obstacle=true style="width:75px; height:100px;" data-height="100" data-width="75" title="Flatscreen"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="lamp" class="draggable" obstacle=true style="width:125px; height:50px;" data-height="50" data-width="125" title="Schreibtischlampe"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="tvcamera" class="draggable" obstacle=true style="width:125px; height:50px;" data-height="50" data-width="125" title="Projektor"></div>
						</li>
					</ul>
				</div>
				
				<div role="tabpanel" class="tab-pane" id="tables">
					<ul class="toollist">
						<li>
							<div itemtype="furniture" itemlook="4chairs1squaretable" class="draggable" obstacle=true style="width:100px; height:100px;" data-height="100" data-width="100" title="4 Stühle und ein quadratischer Tisch"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="6chairs1table-horizontal" class="draggable" obstacle=true style="width:100px; height:75px;" data-height="75" data-width="100" title="6 Stühle und ein Tisch"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="8chairs1conferencetable-horizontal" class="draggable" obstacle=true style="width:175px; height:100px;" data-height="100" data-width="175" title="8 Stühle und 1 Konferenztisch"></div>
						</li>
						
						<li>
							<div itemtype="furniture" itemlook="classroomdesk-north" class="draggable" obstacle=true style="width:275px; height:100px;" data-height="100" data-width="275" title="Klassenzimmerpult"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="classroomdeskchair-north" class="draggable" obstacle=true style="width:175px; height:100px;" data-height="100" data-width="175" title="Klassenzimmerpult mit Stuhl"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="classroomtable-east" class="draggable" obstacle=true style="width:75px; height:100px;" data-height="100" data-width="75" title="Klassenzimmertisch"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="classroomtablechair-north" class="draggable" obstacle=true style="width:75px; height:100px;" data-height="100" data-width="75" title="Klassenzimmertisch mit Stuhl"></div>
						</li>
						
						<li>
							<div itemtype="furniture" itemlook="conferencetable-horizontal" class="draggable" obstacle=true style="width:200px; height:100px;" data-height="100" data-width="200" title="Konferenztisch"></div>
						</li>
												

						<li>
							<div itemtype="furniture" itemlook="podium-north" class="draggable" obstacle=true style="width:200px; height:100px;" data-height="100" data-width="200" title="Podium"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="roundeddesk-east" class="draggable" obstacle=true style="width:75px; height:100px;" data-height="100" data-width="75" title="Eckschreibtisch"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="roundtable" class="draggable" obstacle=true style="width:100px; height:100px;" data-height="100" data-width="100" title="Runder Tisch"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="semicirculartable-north" class="draggable" obstacle=true style="width:200px; height:100px;" data-height="100" data-width="200" title="Nierentisch"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="squaretable" class="draggable" obstacle=true style="width:100px; height:100px;" data-height="100" data-width="100" title="Quadratischer Tisch"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="studentdesk-north" class="draggable" obstacle=true style="width:150px; height:100px;" data-height="100" data-width="150" title="Schülerpult"></div>
						</li>
																
						
					</ul>
				
				</div>
				
				<div role="tabpanel" class="tab-pane" id="chairs">
					<ul class="toollist">
						<li>
							<div itemtype="furniture" itemlook="armchair-south" class="draggable" obstacle=true style="width:100px; height:100px;" data-height="100" data-width="100" title="Sessel"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="chair-south" class="draggable" obstacle=true style="width:125px; height:100px;" data-height="100" data-width="125" title="Stuhl"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="chair2-south" class="draggable" obstacle=true style="width:100px; height:100px;" data-height="100" data-width="100" title="Stuhl"></div>
						</li>
					
					
						<li>
							<div itemtype="furniture" itemlook="couch-south" class="draggable" obstacle=true style="width:100px; height:100px;" data-height="100" data-width="100" title="Couch"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="greenchair-south" class="draggable" obstacle=true style="width:125px; height:100px;" data-height="100" data-width="125" title="Stuhl"></div>
						</li>
					
						<li>
							<div itemtype="furniture" itemlook="studentdeskchair-north" class="draggable" obstacle=true style="width:100px; height:100px;" data-height="100" data-width="100" title="Schülerpult mit Stuhl"></div>
						</li>
					</ul>
				</div>
				
				<div role="tabpanel" class="tab-pane" id="furniture">
					<ul class="toollist">
						<li>
							<div itemtype="furniture" itemlook="locker-east" class="draggable" obstacle=true style="width:100px; height:75px;" data-height="75" data-width="100" title="Schließfach"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="locker-north" class="draggable" obstacle=true style="width:75px; height:100px;" data-height="100" data-width="75" title="Schließfach"></div>
						</li>
						
						<li>
							<div itemtype="furniture" itemlook="coatrack-east" class="draggable" obstacle=true style="width:25px; height:150px;" data-height="150" data-width="25" title="Garderobe"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="coatrack-north" class="draggable" obstacle=true style="width:150px; height:25px;" data-height="25" data-width="150" title="Garderobe"></div>
						</li>
						
						
						<li>
							<div itemtype="furniture" itemlook="lecturetheaterrow" class="draggable" obstacle=true style="width:725px; height:100px;" data-height="100" data-width="725" title="Vorlesungssaalreihe mit Stühlen"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="lecturetheaterrowseats" class="draggable" obstacle=true style="width:725px; height:50px;" data-height="50" data-width="725" title="Vorlesungssaalstuhlreihe"></div>
						</li>
						
					</ul>
				</div>
				
				<div role="tabpanel" class="tab-pane" id="officesupply">
					<ul class="toollist">
						<li>
							<div itemtype="furniture" itemlook="papertray" class="draggable" obstacle=true style="width:25px; height:50px;" data-height="50" data-width="25" title="Papierfach"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="wastecan" class="draggable" obstacle=true style="width:50px; height:50px;" data-height="50" data-width="50" title="Papierkorb"></div>
						</li>
						
					</ul>
				</div>
				<div role="tabpanel" class="tab-pane" id="plants">
					<ul class="toollist">
						<li>
							<div itemtype="furniture" itemlook="plant" class="draggable" obstacle=true style="width:75px; height:75px;" data-height="75" data-width="75" title="Pflanze"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="plant2" class="draggable" obstacle=true style="width:75px; height:75px;" data-height="75" data-width="75" title="Pflanze"></div>
						</li>
						<li>
							<div itemtype="furniture" itemlook="plant3" class="draggable" obstacle=true style="width:75px; height:75px;" data-height="75" data-width="75" title="Pflanze"></div>
						</li>
					</ul>
				</div>				
				<div role="tabpanel" class="tab-pane" id="misc">
					<ul class="toollist">
						<li>
							<div itemtype="furniture" itemlook="projectionscreen" class="draggable" obstacle=true style="width:525px; height:25px;" data-height="25" data-width="525" title="Projektionswand"></div>
						</li>
					</ul>
				</div>
				
			</div>
		</div>
	</div>



	<div class="panel panel-default" id="drawpanel">
		<div class="panel-heading">
			<h3 class="panel-title">Sketchboard</h3>
		</div>
		<div class="panel-body">
			<div id="drawarea" style="top:0px; left:0px;">
				<div id="draw-element-area" style="width:100%; height:100%;"></div>
			</div>
			<div id="scaleContainer">
				<div id="scaleslider"></div>
				<span class="glyphicon glyphicon-zoom-out" aria-hidden="true"></span>
				<span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
			</div>
		</div>


	</div>

	<div class="panel panel-default" style="display:none">
		<div class="panel-heading"><h3 class="panel-title">Store / Restore</h3></div>
		<div class="panel-body">
			<form id="roomForm" method="POST" action="?do=roomplanner&locationid={{locationid}}">
				<input type="hidden" name="token" value="{{token}}">
				<input type="hidden" name="action" value="save">
				<div class="form-group">
					<label for="serializedRoom" class="col-sm-2 control-label">In-/Output</label>
					<textarea class="form-control" rows="5" name="serializedRoom" id="serializedRoom">{{{roomConfiguration}}}</textarea>
				</div>
			</form>
		</div>
	</div>
	<button id="saveBtn" class="btn btn-success">Save</button>

</body>
</html>





<script type="application/javascript"><!--
document.addEventListener("DOMContentLoaded", function () {

	subnetMachines = {{{subnetMachines}}};

	$.when(
		$.getScript("modules/roomplanner/js/lib/jquery-collision.js"),
		$.getScript("modules/roomplanner/js/lib/jquery-ui-draggable-collision.js"),
		$.getScript("modules/roomplanner/js/grid.js"),
		$.Deferred(function( deferred ){
			$( deferred.resolve );
		})
	).done(function() {
		$.getScript("modules/roomplanner/js/init.js", function() {
			initRoomplanner();
			roomplanner.load($('#serializedRoom').val());
			console.log(subnetMachines);
		});
	});
});

</script>