dstrutzenberger
/
ModelingTool


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css"
    <title></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar navbar-expand-lg bg-info">
        <div class="container-fluid">
            <a href="#" class="navbar-brand">
			<h1>Frontend Modeler</h1>
			</a>
			<img src="cdp_logo_sm.png" class="rounded float-end" alt="Responsive image">
        </div>
    </nav>
	<br>
		<div class="container">
		<div class="custom-file">
		   <input type="file" class="custom-file-select" id="projectselect" aria-describedby="projectselect">
		  <button type="button" id = "Open" class="btn btn btn-outline-primary">Open Project</button>
		  </div>
			<button type="button" id="New" class="btn btn btn-outline-primary">New Project</button>
			<button type="button" id="SaveAs" class="btn btn btn-outline-primary">Save as</button>
		</div>
		<br>
		<div class="accordion" id="accordionnodeset">
		  <div class="accordion-item">
			<h2 class="accordion-header" id="headingOne">
			  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapsenodesetOne" aria-expanded="true" aria-controls="collapseOne">
				Nodeset Files
			  </button>
			</h2>
			<div id="collapsenodesetOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionnodeset">
			  <div class="accordion-body">
							<div class="row align-items-start bg-light">
					<div class="mb-3">
					  <!--<label for="formFileMultiple" class="form-label">Multiple files input example</label>-->
					  <ul class="list-group" id="nodesetlist">
						  <li class="list-group-item disabled py-1">0:http://opcfoundation.org/UA/</li>
						  <li class="list-group-item py-1">A second item</li>
						</ul>
					  <div class="custom-file">
					   <input type="file" class="custom-file-input" id="customFileInput" aria-describedby="customFileInput">
					  <button type="button" class="btn btn-primary" id="loadnodesetbutton">Load</button>
					  </div>
					</div>
				</div>
			   </div>
			</div>
		  </div>
		</div>

	  <div class="container-fluid">
		<ul class="nav nav-tabs" id="myTab" role="tablist">
		  <li class="nav-item" role="presentation">
			<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="false">Tree View</button>
		  </li>
		  <li class="nav-item" role="presentation">
			<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Node Specification</button>
		  </li>
		  <li class="nav-item" role="presentation">
			<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Endpoint Configuration</button>
		  </li>
		  <li class="nav-item" role="presentation">
			<button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false">Service Modelling</button>
		  </li>
		</ul>
		<div class="tab-content" id="myTabContent">
		  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
		   <div class="container-fluid">
			<div class="row align-items-start bg-light">

			  <div class="col-sm-6">
			  <br>
			  	<div id="jstree_demo_div" class= "container bg-white">
				</div>
				<br>
			  </div>
		
			  <div class="col-sm-6">
			  <br>
				<div class="row align-items-start bg-light">
				 <div class="col-sm-2">
					<button type="button" class="btn btn-primary" id="changeinstance">Change Instance</button>
				</div>
			    </div>
				<br>
				<div class="row align-items-start bg-light">
				 <div class="col-sm-2">
				<button type="button" class="btn btn-secondary">Save</button>
				</div>
				 <div class="col-sm-2">
				<button type="button" class="btn btn-secondary">Discard</button>
				</div>
			    </div>
				<br>
			  </div>
			</div>
		  </div>
	  </div>
	  
		  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0"><div class="accordion" id="accordionExample">
			  <div class="accordion-item">
				<h2 class="accordion-header" id="commonattributes">
				  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
					Common attributes
				  </button>
				</h2>
				<div id="collapseOne" class="accordion-collapse collapse collapse" aria-labelledby="commonattributes" data-bs-parent=>
				  <div class="accordion-body">
					<div class="row mb-3">
						<label for="instancename" class="col-sm-2 col-form-label">Name</label>
						<div class="col-sm-10">
						  <input type="email" class="form-control" id="instancename">
						</div>
					  </div>
					<div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">Namespace</label>
						<div class="col-sm-10">						
						  <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="instancenamespace">
							  <option selected>http://yourorganisation.org/namespacename/</option>
							  <option value="1">One</option>
							  <option value="2">Two</option>
							  <option value="3">Three</option>
							</select>
						</div>
					  </div>
					<div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">NodeClass</label>
						<div class="col-sm-10">
						  <input type="nodeclass" class="form-control"  id="instancenodeclass">
						</div>
					  </div>
					  <div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">Type Definition</label>
						<div class="col-sm-10">
						  <input type="typedefinition" class="form-control" id="instancetypedefinition">
						</div>
					  </div>
					  					<div class="row mb-3">
						<label for="modellingrule" class="col-sm-2 col-form-label">Modelling Rule</label>
						<div class="col-sm-10">
						  <input type="email" class="form-control" id="modellingrule">
						</div>
					  </div>
					<div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">NodeId</label>
						<div class="col-sm-10">
							<div class="input-group mb-3">
							  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="instancenodeidtype">Numeric</button>
							  <ul class="dropdown-menu">
								<li><a class="dropdown-item" href="#" id="numericnodeid">Numeric</a></li>
								<li><a class="dropdown-item" href="#" id="stringnodeid">String</a></li>
								<li><a class="dropdown-item" href="#" id="guidnodeid">Guid</a></li>
								<li><a class="dropdown-item" href="#" id="opaquenodeid">Opaque</a></li>
							  </ul>
							  <input type="text" class="form-control" aria-label="Text input with dropdown button" id="instancenodeid">
							</div>
							</div>
					  </div>
					<div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">DisplayName</label>
						<div class="col-sm-10">
						 <div class="input-group">
						 <div class="col-xs-1">
						  <input type="text" aria-label="First name" class="form-control"  id="instancedisplayname1">
						  </div>
						  <input type="text" aria-label="Last name" class="form-control" id="instancedisplayname2">
						</div>
						</div>
					  </div>
					  <div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">BrowseName</label>
						<div class="col-sm-10">
							<div class="input-group mb-3">
							  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="instancebrowsename1">0</button>
							  <ul class="dropdown-menu" id="namespaceidxbrowsename" size="5">
								<li><a class="dropdown-item" href="#">1</a></li>
								<li><a class="dropdown-item" href="#">2</a></li>
								<li><a class="dropdown-item" href="#">3</a></li>
								<li><a class="dropdown-item" href="#">4</a></li>
							  </ul>
							  <input type="text" class="form-control" aria-label="Text input with dropdown button" id="instancebrowsename2">
							</div>
							</div>
					  </div>
					<div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">Description</label>
						<div class="col-sm-10">
						 <div class="input-group">
						 <div class="col-xs-1">
						  <input type="text" aria-label="First name" class="form-control" placeholder="en" disabled>
						  </div>
						  <input type="text" aria-label="Last name" class="form-control" id="instancedescription">
						</div>
						</div>
					  </div>
					</div>
				</div>
			  </div>
			  <div class="accordion-item">
				<h2 class="accordion-header" id="objectattributes">
				  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" id="objectattributesbutton">
					Object attributes
				  </button>
				</h2>
				<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="objectattributes" data-bs-parent=>
				  <div class="accordion-body">
					  <div class="row mb-3">
						<label for="exampleFormControlInput6" class="col-sm-2 col-form-label">EventNotifier</label>
						<div class="col-sm-10">
						<div class="input-group mb-3">
						  <input type="text" class="form-control" aria-label="Text input with dropdown button"  id="instanceeventnotifier" placeholder="0 (None)">
						  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">...</button>
						  <ul class="dropdown-menu dropdown-menu-end">
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="subscribeevents">
								  <label class="form-check-label" for="defaultCheck1">
									Subscribe To Events
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="reserved" disabled>
								  <label class="form-check-label" for="defaultCheck1">
									Reserved
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="historyread">
								  <label class="form-check-label" for="defaultCheck1">
									HistoryRead
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="historywrite">
								  <label class="form-check-label" for="defaultCheck1">
									HistoryWrite
								  </label>
								</div>
							</a></li>
						  </ul>
						</div>
						</div>
					</div>
				</div>
				</div>
			  </div>
			  <div class="accordion-item" id="var_attr">
				<h2 class="accordion-header" id="variableattributes">
				  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo1" id="variableattributesbutton">
					Variable attributes
				  </button>
				</h2>
				<div id="collapseTwo1" class="accordion-collapse collapse" aria-labelledby="variableattributes" data-bs-parent=>
				  <div class="accordion-body">
					<div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">Data Type</label>
						<div class="col-sm-10">
						  <input type="email" class="form-control" id="inputEmail3" placeholder="BaseDataType">
						</div>
					  </div>
					  
					  
					  
					  <div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">Value</label>						
						<div class="col-sm-2">
							<label for="inputEmail3" class="col-form-label">Null</label>
							<div class="col-sm-2">
								<input class="form-check-input" type="checkbox" value="" id="executablemethodcheck">
							</div>
								<input type="email" class="form-control" id="inputEmail3" placeholder="...">
						</div>
					</div>
					  <div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">ValueRank</label>
						<div class="col-sm-10">
						  <input type="email" class="form-control" id="inputEmail3" placeholder="Scalar">
						</div>
					  </div>
					  <div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">ArrayDimensions</label>
						<div class="col-sm-10">
						  <input type="email" class="form-control" id="inputEmail3">
						</div>
					  </div>
					  <div class="row mb-3">
						<label for="exampleFormControlInput6" class="col-sm-2 col-form-label">AccessLevel</label>
						<div class="col-sm-10">
						<div class="input-group mb-3">
						  <input type="text" class="form-control" aria-label="Text input with dropdown button"  id="instanceaccesslevel" placeholder="0 (None)">
						  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">...</button>
						  <ul class="dropdown-menu dropdown-menu-end">
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="currentread">
								  <label class="form-check-label" for="defaultCheck1">
									CurrentRead
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="currentwrite">
								  <label class="form-check-label" for="defaultCheck1">
									CurrentWrite
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="historyreadvar">
								  <label class="form-check-label" for="defaultCheck1">
									HistoryRead
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="historywritevar">
								  <label class="form-check-label" for="defaultCheck1">
									HistoryWrite
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="semanticchange">
								  <label class="form-check-label" for="defaultCheck1">
									SemanticChange
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="statuswrite">
								  <label class="form-check-label" for="defaultCheck1">
									StatusWrite
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="timestampwrite">
								  <label class="form-check-label" for="defaultCheck1">
									TimestampWrite
								  </label>
								</div>
							</a></li>
						  </ul>
						</div>
						</div>
					</div>
					  <div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">AccessLevelEx</label>
						<div class="col-sm-10">
						  <input type="email" class="form-control" id="inputEmail3" placeholder="None">
						</div>
					  </div>
					  <div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">Historizing</label>
						<div class="col-sm-10">
						  <input type="email" class="form-control" id="inputEmail3">
						</div>
					  </div>
					  <div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">MinimumSamplingInterval</label>
						<div class="col-sm-10">
						  <input type="email" class="form-control" id="inputEmail3" placeholder="0">
						</div>
					  </div>
				  </div>
				</div>
			  </div>
			  <div class="accordion-item">
				<h2 class="accordion-header" id="methodattributes">
				  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2" id="methodattributesbutton">
					Method attributes
				  </button>
				</h2>
				<div id="collapseTwo2" class="accordion-collapse collapse" aria-labelledby="methodattributes" data-bs-parent=>
				  <div class="accordion-body">
					  <div class="row mb-3">
						<label for="exampleFormControlInput6" class="col-sm-2 col-form-label">WriteMask</label>
						<div class="col-sm-10">
						<div class="input-group mb-3">
						  <input type="text" class="form-control" aria-label="Text input with dropdown button"  id="instanceeventnotifier" placeholder="0">
						  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">...</button>
						  <ul class="dropdown-menu dropdown-menu-end">
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask1">
								  <label class="form-check-label" for="defaultCheck1">
									AccessLevel
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask2">
								  <label class="form-check-label" for="defaultCheck1">
									ArrayDimensions
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask3">
								  <label class="form-check-label" for="defaultCheck1">
									BrowseName
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask4">
								  <label class="form-check-label" for="defaultCheck1">
									ContainsNoLoops
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask5">
								  <label class="form-check-label" for="defaultCheck1">
									DataType
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask6">
								  <label class="form-check-label" for="defaultCheck1">
									Description
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask7">
								  <label class="form-check-label" for="defaultCheck1">
									DisplayName
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask8">
								  <label class="form-check-label" for="defaultCheck1">
									EventNotifier
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask9">
								  <label class="form-check-label" for="defaultCheck1">
									Executable
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask10">
								  <label class="form-check-label" for="defaultCheck1">
									Historizing
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask11">
								  <label class="form-check-label" for="defaultCheck1">
									InverseName
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask12">
								  <label class="form-check-label" for="defaultCheck1">
									IsAbstract
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask13">
								  <label class="form-check-label" for="defaultCheck1">
									MinimumSamplingInterval
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask14">
								  <label class="form-check-label" for="defaultCheck1">
									NodeClass
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask15">
								  <label class="form-check-label" for="defaultCheck1">
									NodeId
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask16">
								  <label class="form-check-label" for="defaultCheck1">
									Symmetric
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask17">
								  <label class="form-check-label" for="defaultCheck1">
									UserAccessLevel
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask18">
								  <label class="form-check-label" for="defaultCheck1">
									UserExecutable
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask19">
								  <label class="form-check-label" for="defaultCheck1">
									UserWriteMask
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask20">
								  <label class="form-check-label" for="defaultCheck1">
									ValueRank
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask21">
								  <label class="form-check-label" for="defaultCheck1">
									WriteMask
								  </label>
								</div>
							</a></li>
							<li><a class="dropdown-item" href="#">
								<div class="form-check">
								  <input class="form-check-input" type="checkbox" value="" id="mask22">
								  <label class="form-check-label" for="defaultCheck1">
									ValueForVariableType
								  </label>
								</div>
							</a></li>
						  </ul>
						</div>
						</div>
					</div>
					<div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">Executable</label>						
						<div class="col-sm-10">
						<div class="input-group mb-3">
						  <input class="form-check-input" type="checkbox" value="" id="executablemethodcheck">
						</div>
					  </div>
					</div>
				  </div>
				</div>
			  </div>
			  <div class="accordion-item">
				<h2 class="accordion-header" id="parentattributes">
				  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo3" aria-expanded="false" aria-controls="collapseTwo3">
					Parent
				  </button>
				</h2>
				<div id="collapseTwo3" class="accordion-collapse collapse" aria-labelledby="parentattributes" data-bs-parent=>
				  <div class="accordion-body">
					<div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">Name</label>
						<div class="col-sm-10">
						  <input type="email" class="form-control" id="inputEmail3">
						</div>
					  </div>
					  <div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">NodeId</label>
						<div class="col-sm-10">
							<div class="input-group mb-3">
							  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Numeric</button>
							  <ul class="dropdown-menu">
								<li><a class="dropdown-item" href="#">Numeric</a></li>
								<li><a class="dropdown-item" href="#">String</a></li>
								<li><a class="dropdown-item" href="#">Guid</a></li>
								<li><a class="dropdown-item" href="#">Opaque</a></li>
							  </ul>
							  <input type="text" class="form-control" aria-label="Text input with dropdown button">
							</div>
							</div>
					  </div>
					 <div class="row mb-3">
						<label for="inputEmail3" class="col-sm-2 col-form-label">Reference to current node</label>
						<div class="col-sm-2">
						  <input type="email" class="form-control" id="inputEmail3">
						  </div>
						  <div class="col-sm-2">
						  <label for="inputEmail3" class="col-sm-2 col-form-label text-center">Inverse</label>
						  </div>
						  <div class="col-sm-2">
						  <input type="email" class="form-control" id="inputEmail3">
						  </div>
						</div>
					  </div>
					</div>
		
			  </div>
			  <div class="accordion-item">
				<h2 class="accordion-header" id="referencesnodes">
				  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
					Child Nodes and References
				  </button>
				</h2>
				<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="referencesnodes" data-bs-parent=>
				  <div class="accordion-body">
					<table class="table">
					  <thead>
						<tr>
						  <th scope="col">Target</th>
						  <th scope="col">Reference Type</th>
						  <th scope="col">Modelling Rule</th>
						  <th scope="col">Actions</th>
						</tr>
					  </thead>
					  <tbody>
						<tr>
						  <td scope="row">Machines</td>
						  <td>Organizes</td>
						  <td>No Modelling Rule</td>
						  <td>
							<button type="button" class="btn btn-outline-dark">Delete</button>
						 </td>
						</tr>
					  </tbody>
					</table>
					</div>
				</div>
			  </div>
			</div>
			<br>
			<div class="container-fluid text-center">
			<button type="button" class="btn btn-outline-dark" id="savenodespecification">Save</button>
			<button type="button" class="btn btn-outline-dark">Discard</button>
			<button type="button" class="btn btn-outline-dark">Delete Node</button>
			</div>
			<br>
			<br>
			
		  </div>
		  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">Here you'll find a list of endpoints</div>
		  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
		</div>
      </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
	<link rel="stylesheet" href="./jstree/jstree/dist/themes/default/style.min.css" />
	<script src="./jstree/jstree/dist/jstree.min.js"></script>
	<script>
	  document.querySelector('.custom-file-input').addEventListener('change', function (e) {
		var name = document.getElementById("customFileInput").files[0].name;
		$.ajax({
		  url: 'http://127.0.0.1:3001/file/url/',
		  error: function() {
			console.log("Error");
		  },
		  dataType: 'text',
		  success: function(data) {
			var res = JSON.parse(data);
			console.log(res["url"]);
			var newfile = "<li class='list-group-item py-1'>"+res["url"]+"</li>";
			$('#nodesetlist').append(newfile);
		  },
		  type: 'GET'
		});
		console.log("AHA");
	  })
	</script>
	<script>
	  document.querySelector('.custom-file-select').addEventListener('change', function (e) {
		var name = document.getElementById("projectselect").files[0].name;
		console.log(name);
	  })
	</script>
	<script src="./js/myEvents.js"></script>
	<script>

			$('#jstree_demo_div').jstree({
				'core' : {
					'data' : {
							'url': "http://127.0.0.1:3001/lazy",
						//'url' : "https://www.jstree.com/fiddle/?lazy", 
						'data' : function (node) { 
							return { 'id' : node.id }; 
						} 
					}
				}					
				}); 
	
	  </script>
</body>
</html>