From 107afb0e64512c056c67828312a83af0a286aa5b Mon Sep 17 00:00:00 2001
From: jaylin <chieh.lin@rwth-aachen.de>
Date: Thu, 4 Apr 2024 16:09:18 +0200
Subject: [PATCH] Final version
---
templates/app.html | 56 ++++++++++++++++++++++++----------------------
1 file changed, 29 insertions(+), 27 deletions(-)
diff --git a/templates/app.html b/templates/app.html
index 36462f1..3a17f5c 100644
--- a/templates/app.html
+++ b/templates/app.html
@@ -71,10 +71,10 @@
margin-left: 0px;
}
#sidebar2 {
- /* position: fixed;
- top: 0;
- right: 0; */
- width: 15%;
+ min-width: 15%;
+ max-width: 15%;
+ /* width: 15%;
+ overflow-x: hidden; */
min-height: 100vh;
border-right: 0px solid #ccc;
background-color: #add8e6;
@@ -307,7 +307,6 @@
border-bottom: 1px solid black; /* Represent underline */
width: 15px;
height: 15px;
- margin-right: 5px;
line-height: 120%;
}
@@ -329,11 +328,15 @@
}
.normal-fk {
- border-bottom: 3px solid black; /* Represent nullable FK relationship */
+ font-weight: bold;
+ /* padding-bottom: 3px;
+ border-bottom: 3px solid black; */
}
.optional-fk {
- border-bottom: 3px dashed black; /* Represent nullable FK relationship */
+ font-weight: bold;
+ /* padding-bottom: 5px;
+ border-bottom: 3px dashed black; */
}
</style>
@@ -482,7 +485,7 @@
<li><a href="#" id="autoplayer" data-uk-switcher-item="next"></a>
<div style="display: flex; flex-direction: row; height: 85vh; border: 0px 1px;">
- <div style="flex: 0,3; display: flex; flex-direction: column;">
+ <div style="flex: 1; display: flex; flex-direction: column;">
<h4 style="margin: .0em .0em .6em .2em;" uk-tooltip= "title: Show overall Entity-Relationship-Diagram (ERD), optional filtering tool can be applied for constraining this ERD with the table instances showing on the Tables section. ; pos: bottom">Filtered Tables - ERD</h4>
<div class="uk-panel uk-panel-scrollable" id="canvasContainer" style="margin-right: -1px; min-width: 30%;">
<canvas id="erdCanvas1" style="min-width: 30%;"></canvas>
@@ -493,9 +496,9 @@
</div>
</div>
- <div style="flex: 0,7; display: flex; flex-direction: column;">
+ <div style="flex: 1; display: flex; flex-direction: column;">
<h4 style="margin: .0em .0em .6em .2em;" uk-tooltip="title: Build a customized Entity-Relationship-Diagram by dragging the table instances in Tables section on the left sidebar into the Target Tables section below.; pos: bottom">Target Tables - ERD</h4>
- <div class="uk-panel" id="canvasContainer" style="overflow-y: scroll; min-width: 20%; width: 100%;">
+ <div class="uk-panel" id="canvasContainer" style="overflow-y: scroll; min-width: 40%; width: 100%;">
<canvas id="erdCanvas2" style="min-width: 30%;"></canvas>
<div id="zoomButtons">
<button class="uk-button uk-button-default uk-button-small custom-zoom-button"id="zoomInBtn2" uk-icon="plus-circle"></button>
@@ -537,11 +540,10 @@
</div>
</div>
-
<div class="mb-3" id="self-defined-object-selection" style="display: none; border-bottom: 1px dashed black;">
<label class="form-label" uk-tooltip="title: Create a custom object name that can be used in a header instead of using predefined database table data; pos: left">Self-defined Object</label><br>
<input type="text" id="defined-object" class="form-control headerSelect" placeholder="Enter object name">
- <button class="btn btn-primary headerButton" onclick="selfdefinedObject()">add</button><span id="selfdefinedObject" style="color: red; font-size: 80%; margin-left: 2px;"></span>
+ <button class="btn btn-primary headerButton" onclick="selfdefinedObject()">add</button><span id="selfdefinedObject" style="color: green; font-size: 80%; margin-left: 10px;"></span>
</div>
<div class="mb-3" id="object-column-selection" style="display: none;">
@@ -596,22 +598,21 @@
}).css('font-size', '25px');
});
</script>
- <span id="span"></span><span style="color: red; font-size: 80%;">*</span><br>
+ <span id="span"></span><span style="color: red; font-size: 80%; margin-top: 2px;">*</span><br>
</div>
- <button type="submit" class="btn btn-primary headerButton" onclick="submitDataHeader()" style="margin-top: -11px;">Submit</button><span id="submitDataHeader" style="color: red; font-size: 80%; margin-bottom: 5px;"></span>
+ <button type="submit" class="btn btn-primary headerButton" onclick="submitDataHeader()" style="margin-top: -11px;">Submit</button><span id="submitDataHeader" style="color: green; font-size: 80%; margin-top: -11px; margin-left: 10px;"></span>
</fieldset>
</div>
</div>
</li>
-
<li>
<div style="display: flex; flex-direction: column; height: 87vh;">
<div class="mb-3" style="display: flex; justify-content: left; align-items: center; padding-left: .2em; background-color:#add8e6">
<h5 style="display: inline; padding-top: 10px;" uk-tooltip="title: Provide an overview of the header table. Select one data row inside the header data and fulfill the column forms in Data Table section to extract corresponding data.">Header Table</h5>
- <button class="btn btn-primary uk-button-small headerButton" style="margin-left: 3px;" onclick="resetDataHeaderTable()">Reset</button>
+ <button class="btn btn-primary uk-button-small headerButton" style="margin-left: 10px;" onclick="resetDataHeaderTable()">Reset</button>
</div>
<div class="uk-overflow-auto" id="data-header-table" style="flex-grow: 1; max-height: 27vh; margin-top: -20px; margin-bottom: 0px;">
<table id="H-table" class='uk-table uk-table-small uk-table-hover uk-table-divider'>
@@ -627,10 +628,10 @@
</div>
<div class="mb-3" style="display: flex; justify-content: left; align-items: center; padding-left: .2em; border-top: gray solid 0px; background-color:#add8e6;">
<h5 style="display: inline; padding-top: 10px;" uk-tooltip="title: Show all the dataset under the selected header instance and specific columns. First, select one header row by clicking. Second, fulfill the following column options. Then the data table will automatically be generated, and you can start selecting and press add button to send them into the final data table in step 4.; pos: bottom">Data Table</h5>
- <button class="btn btn-primary uk-button-small headerButton" style="margin-left: 3px;" onclick="resetMachineDataTable()" >Reset</button>
+ <button class="btn btn-primary uk-button-small headerButton" style="margin-left: 10px;" onclick="resetMachineDataTable()" >Reset</button>
<button class="btn btn-primary uk-button-small headerButton" style="margin-left: 3px;" onclick="addDataTable()">Add</button>
<h5 style="margin-left: 10px; display: inline; padding-top: 10px;">Row Count:</h5> <label id="row-count" class="form-label" style="margin-left: 3px; padding-top: 10px;">0</label>
- <span id="addDataTable" style="color: red; font-size: 80%; margin-left: 2px; margin-bottom: 1px;"></span>
+ <span id="addDataTable" style="color: green; font-size: 80%; margin-left: 10px; margin-bottom: 5px;"></span>
</div>
<div class="uk-overflow-auto" id="machine-data-table" style="flex-grow: 1; margin-top: -20px;" >
<table id="MD-table" class="uk-table uk-table-hover uk-table-small uk-table-middle uk-table-divider uk-table-striped" style="cursor: pointer; height: max-content;">
@@ -710,6 +711,7 @@
</div>
</div>
</li>
+
<li>
<div style="display: flex; justify-content: space-between; align-items:end; margin-top: -15px; z-index: 10; padding-left: .2em; padding-right: .2em;">
<h5 style="margin-bottom: .2em;">Data Tables</h5>
@@ -781,10 +783,10 @@
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p style="margin: -4px -21px 5px -17px; padding: 0px;">
- <label for="amount1">From: </label><br>
- <input type="text" id="amount1" class="form-control" style="display: flex; border: 0; color: #5ea9e2; font-weight:bold;"><br>
- <label for="amount2">Until: </label><br>
- <input type="text" id="amount2" class="form-control" style="border:0; color: #5ea9e2; font-weight:bold;">
+ <label for="amount1" style="border-left: 3px;">From: </label><br>
+ <input type="text" id="amount1" class="form-control" style="margin-left: -2px; display: flex; border: 0; color: #5ea9e2; font-weight:bold;"><br>
+ <label for="amount2" style="border-left: 3px;">Until: </label><br>
+ <input type="text" id="amount2" class="form-control" style="margin-left: -2px; border:0; color: #5ea9e2; font-weight:bold;">
</p>
<div id="slider-range"></div>
<button type="submit" class="btn btn-primary headerButton" style="margin: 10px 0px -5px -10px;" onclick="filter_ME_data_table()">Submit</button>
@@ -799,7 +801,7 @@
</h2>
<div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
- <p style="margin: -4px -21px 5px -17px; padding: 0px;">
+ <p style="margin: -4px -21px 5px -12px; padding: 0px;">
<label for="fromInput">From: </label>
<input type="number" id="fromInput" min="0" step="1" style="width: 10vh;"/><br><br>
<label for="toInput">To: </label>
@@ -823,16 +825,16 @@
</div>
</div>
</br></br>
- <div>
- <legend style="line-height: 120%; margin-bottom: -3px;">ERD Feature</legend>
+ <div style="margin-right: -10px;">
+ <legend style="line-height: 120%; margin-bottom: -2px;">ERD Feature</legend>
<hr>
<p><span class="primary-key">pk</span> Primary Key (Underlined)</p>
<p><span class="key foreign-key">fk</span> Foreign Key (Italic)</p>
<p><span class="key nullable">*</span> Nullable (*)</p>
<p><span class="key identity">I</span> Identity Column (I)</p>
<p><span class="key unique">U</span> Unique Constraint (U)</p>
- <p><span class="key normal-fk"></span> FK Relationship (Solid Line)</p>
- <p><span class="key optional-fk"></span> Nullable FK Relationship (Dashed Line)</p>
+ <p><span class="key normal-fk">→</span> FK Relationship (Solid   Line)</p>
+ <p><span class="key optional-fk">⇢</span> Nullable FK Relationship    (Dashed Line)</p>
</div>
<div id="resize-handle-left" class="resize-handle-left"></div>
--
GitLab