crottija
/
juma-r2rml


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
							<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="jquery-2.1.4.min.js"></script>
		<script src="bootstrap.min.js"></script>

	    <!-- Blockly core imports -->
		<script src="blockly_compressed.js"></script>
		<script src="blocks_compressed.js"></script>
		<script src="en.js"></script>

		<!-- R2RML Blockly -->
		<script src="r2rml.js"></script>
		<script src="r2rml_generator.js"></script>
		
		<link rel="stylesheet" type="text/css" href="bootstrap-theme.min.css">
		<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

		<style type="text/css">
			.hideInput {
				display: none;
			}

			.wow {font-style: italic;}

			body .blocklyIconShape {
				fill: #f00 ;
			}
		</style>
	</head>
	<body>
	<ul class="nav nav-tabs" role="tablist">
		<li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Mapping</a></li>
		<li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">R2RML-Mapping</a></li>
	</ul>

	<div class="tab-content">
		<div role="tabpanel" class="tab-pane active" id="tab1">
			<div class="row">
				<br />
				<div class="col-md-9">
					<div class="panel panel-info">
						<div id="blocklyDiv" style="height: calc(100vh - 290px);"></div>
			    	</div>
				</div>
				<div id="edit" class="col-md-3" style="display:none;">
					<div class="panel panel-info">
					<div class="panel-heading">Table name or SQL query</div>
					<div class="panel panel-info">
						<textarea id="content" class="form-control" rows="3"></textarea>
					</div>
					<button id="saveLogicalTable" class="btn btn-default">OK</button>
					</div>
				</div>
			</div>
		</div>
	
		<div role="tabpanel" class="tab-pane" id="tab2">
	    	<div class="row">
			  	<br />
				<div class="col-md-12">
					<div class="panel panel-info">
						<textarea id="code" class="form-control" rows="20" readonly="readonly"></textarea>
					</div>
				</div>
			</div>
	    </div>
	</div>
		<xml id="toolbox" style="display: none">  
		  <category name="Templates" colour="360">
			<block type="triplemap">
				<value name="logicaltable">
		    		<block type="tablesqlquery"></block>
		    	</value>
		    	<statement name="subjectmap">
			    	<block type="subjectmap">
	    				<field name="TERMMAP">TEMPLATE</field>
			    	</block>
			    </statement>
				<statement name="predicateobjectmap">
					<block type="predicateobjectmap">
						<statement name="ppredicateobjectmap">
							<block type="predicatemap"></block>
						</statement>
						<statement name="opredicateobjectmap">
							<block type="objectmap">
								<field name="TERMMAP">COLUMN</field>
							</block>
						</statement>
					</block>
				</statement>	
			</block>
			<block type="predicateobjectmap">
				<statement name="ppredicateobjectmap">
					<block type="predicatemap"></block>
				</statement>
				<statement name="opredicateobjectmap">
					<block type="objectmap">
						<field name="TERMMAP">COLUMN</field>
					</block>
				</statement>
			</block>
		  </category>
		  <category name="Prefixes" colour="62">
		    <block type="predefinedprefix"></block>
		    <block type="prefix"></block>
		    <block type="base"></block>
		  </category>
			<category name="Triple Map" colour="200">
		    <block type="triplemap"></block>
			  <category name="Logical Table" colour="85">
			    <block type="tablesqlquery"></block>
			  </category>
			  <category name="Subject" colour="122">
			    <block type="subjectmap">
					<field name="TERMMAP">TEMPLATE</field>
			    </block>
			    <block type="class"></block>
			    <block type="subjecttermtype"></block>
			    <block type="subjectgraphtermap"></block>
			  </category>
			  <category name="Predicate Object" colour="62">		  
				<block type="predicateobjectmap"></block>	
				<category name="Predicate" colour="215">    
					<block type="predicatemap"></block>
				</category>
			     <block type="predicatetermtype"></block>
			    <category name="Object" colour="170">
				    <block type="objectmap">
				    	<field name="TERMMAP">COLUMN</field>
				    </block>
				 	<block type="objecttermtype">
				  		<field name="TERMTYPE">termtypeliteral</field>
				  	</block>
				    <block type="objectdatatype"></block>
				    <block type="objectlanguage"></block>
						<block type="parenttriplesmap"></block>
					  <block type="joincondition"></block>
				</category>
				<category name="Graph" colour="320">
						<block type="predicategraphtermap"></block>
				  </category>
			  </category>
		  </category>
		</xml>

		<xml id="startBlocks" style="display:none">
			<block type="mapping" x="9" y="3">
		    </block>
		</xml>
		
		<!-- <xml id="startBlocks" style="display:none">
			<block type="mapping" x="9" y="3">
				<statement name="mapping">
					<block type="prefix"></block>
				</statement>
				<statement name="triplesmap">
					<block type="triplemap">
						<statement name="logicaltable">
							<block type="tablesqlquery"></block>
						</statement>
				    	<statement name="subjectmap">
					    	<block type="subjectmap">
					    		<field name="TERMMAP">TEMPLATE</field>
					    	</block>
					    </statement>
						<statement name="predicateobjectmap">
							<block type="predicateobjectmap">
								<statement name="ppredicateobjectmap">
									<block type="predicatemap"></block>
								</statement>
								<statement name="opredicateobjectmap">
									<block type="objectmap">
										<field name="TERMMAP">COLUMN</field>
									</block>
								</statement>
							</block>
						</statement>	
	    			</block>
	    		</statement>
		    </block>
		</xml> -->

		<script>
		var workspace = Blockly.inject('blocklyDiv', 
		  {toolbox: document.getElementById('toolbox'), 
		  	zoom:
	         {controls: true,
	          wheel: true,
	          startScale: 0.8,
	          maxScale: 3,
	          minScale: 0.3,
	          scaleSpeed: 1.1},
	     		trashcan: true});

		  Blockly.Xml.domToWorkspace(document.getElementById('startBlocks'), Blockly.mainWorkspace);

		  function generateCode(event) {
		  	var code = R2RML.workspaceToCode(workspace);
		  	document.getElementById('code').value = code;
		  }
		  
		  workspace.addChangeListener(generateCode);

		  $('.nav-tabs a').on('click', function(event){
				var x = $(event.target).text();         // active tab
				if(x != 'Mapping') {
					$('.blocklyToolboxDiv').hide();
				} else {
					$('.blocklyToolboxDiv').show();
				}
			});
		</script>

	</body>
</html>