From c40668543710d5c144ee6df87cd3c74e8ea7632d Mon Sep 17 00:00:00 2001
From: jaylin <chieh.lin@rwth-aachen.de>
Date: Thu, 7 Mar 2024 13:08:31 +0100
Subject: [PATCH] Data Header finish
---
my_flask_app/__pycache__/main.cpython-39.pyc | Bin 14199 -> 15047 bytes
my_flask_app/main.py | 41 +-
.../models/__pycache__/models.cpython-39.pyc | Bin 9266 -> 9605 bytes
my_flask_app/models/models.py | 13 +
my_flask_app/templates/app.html | 637 +++++++++++++-----
5 files changed, 520 insertions(+), 171 deletions(-)
diff --git a/my_flask_app/__pycache__/main.cpython-39.pyc b/my_flask_app/__pycache__/main.cpython-39.pyc
index d4b09b0d9746781714fb499d9d6f9e0daa18e49b..197f3a0c6f0b12d1beee27123df9ba4302797d1b 100644
GIT binary patch
delta 6270
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
delta 5382
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
R@G)}naqx0TO<r!L003=Y-rfKJ
diff --git a/my_flask_app/main.py b/my_flask_app/main.py
index 4516f28..5ad81ab 100644
--- a/my_flask_app/main.py
+++ b/my_flask_app/main.py
@@ -1,6 +1,6 @@
import pandas as pd
from my_flask_app import app
-from .models.models import CustomTable, CustomColumn, Theme, CompressedDataType, RegType, RegRole
+from .models.models import CustomTable, CustomColumn, Theme, CompressedDataType, Observation_Spec, RegType, RegRole
from flask_sqlalchemy import SQLAlchemy
from flask import jsonify, redirect, render_template, request, session, url_for, json
from sqlalchemy import ARRAY, BIGINT, BOOLEAN, DOUBLE_PRECISION, FLOAT, INTEGER, JSON, NUMERIC, SMALLINT, TIMESTAMP, UUID, VARCHAR, MetaData, String, create_engine, text, inspect
@@ -49,6 +49,7 @@ def index():
session['self_defined_labels'] = []
session['schema_selected'] = ''
session['show_all'] = False
+ session['data_header']={'event':[], 'measurement':[], 'segment':[], 'segmentData':[]}
print("4")
# Initialize inspector here, outside the inner if-else
print("4.5")
@@ -169,7 +170,7 @@ def get_table_data():
table_columns = [column.name for column in table_instance.columns]
sorted_table_columns = sorted(table_columns)
-
+ # de-nested the JSON columns from the feature_columns
feature_columns = sorted_table_columns
if check_json_column(engine, table_name) != []:
json_column_names = check_json_column(engine, table_name)
@@ -179,8 +180,6 @@ def get_table_data():
for key in jsonKeys:
feature_columns.append( column_name + str(key) ) if len(key) > 1 else feature_columns.append( column_name + str(key).replace(',', ''))
-
-
return jsonify({ 'html_table': html_table, 'table_columns': sorted_table_columns, 'feature_columns': feature_columns })
@@ -220,6 +219,34 @@ def add_label():
return jsonify({'defined_labels': self_defined_labels})
+@app.route('/add-data-header', methods=['POST'])
+def add_data_header():
+ data_header = session.get('data_header', {'event':[], 'measurement':[], 'segment':[], 'segmentData':[]})
+ data = request.json
+ type = data.get('type') if data.get('type') != None else ''
+ label = data.get('label') if data.get('label') != None else ''
+ object_column = data.get('object_column') if data.get('object_column') != None else ''
+ value_list = data.get('value_list') if data.get('value_list') != None else []
+
+ if type == 'event':
+ observation = Observation_Spec(type, label, value_list)
+ data_header['event'].append(observation.to_dict())
+ elif type == 'measurement':
+ observation = Observation_Spec(type, label, value_list)
+ data_header['measurement'].append(observation.to_dict())
+ elif type == 'segment':
+ observation = Observation_Spec(type, label, value_list)
+ data_header['segment'].append(observation.to_dict())
+ elif type == 'segmentData':
+ observation = Observation_Spec(type, label, value_list)
+ data_header['segmentData'].append(observation.to_dict())
+
+ print("88888")
+ print(data_header)
+ session['data_header'] = data_header
+
+ return jsonify({'data_header': data_header})
+
def check_json_column(engine, table_name):
insp = inspect(engine)
schema = getTableSchema(table_name) if insp.dialect.name == 'postgresql' else insp.default_schema_name
@@ -233,6 +260,7 @@ def check_json_column(engine, table_name):
print(json_column_names)
return json_column_names
+
def handle_json_column(engine, table_name, column_name):
insp = inspect(engine)
@@ -251,8 +279,9 @@ def handle_json_column(engine, table_name, column_name):
conn.close()
jsonKeys = []
- for row in result:
- name = tuple(sorted(row[0].keys()))
+ for row in result: # row is a tuple, row[0] is a dictionary
+ # print(row[0])
+ name = tuple(sorted(row[0].keys()))if type(row[0]) == dict else json.loads(row[0]).keys()
if name not in jsonKeys:
jsonKeys.append(name)
print(jsonKeys)
diff --git a/my_flask_app/models/__pycache__/models.cpython-39.pyc b/my_flask_app/models/__pycache__/models.cpython-39.pyc
index 00c03fc284ad7a2156ca2601ed3f7e504a3b2388..c934da4ed83aa67dbcb94493d6d76507c6c13579 100644
GIT binary patch
delta 2468
zcmdnw(dx~Y$ji&cz`(!|efvc!v-(E93ygd&3=9mZ3{i|J3{gxeyp!KBDob*vaJ4W*
zainslaHsIJFf=npaiuT@GidT{7GW}As!wJF83Dy0HVXp-gEIpIL$MG8149i%76>!e
zFk~^MFwS8PX3%8vD-va3U;q;<8H=PqY-u<l!@$6Bi@hX2J|#1`1Y|-n2gqzD7Dg6E
zmcLaJ{z=8DMP-R4nfZC~!3C+wlTXSi)q^yZFw`)lFiL_*CNRk?$<WMP%UA<)D~n%|
z7|0575Fx?9z@W)kBm$zCZn2~!mLx_A<Rh6|T#%Yvgytm9w4(f6u%jeFegk=ufk}d?
zO3FW}SO&#KdT^DRjDDKjlRa7NMN~n);wdgkEXhpHO)bgDPbpHL?5H3yc@7Jw01pEL
z0|%oBD+e<NGY2~p<L31&I*d|AAg6*IZ46?;U0$R=`75gmqrzk<wq(Xzlk3<V8MP-L
zVAB%N04dW15n3QZXYwyLU0D+l6BIl}dJGH<@-U}!Fp6;(=}q3qA~JcsqRQkN_A_o)
zAeGi2!Ujaxf(SbhVGkl4K!hWRZ~_sa_(cn$B3T9o28YRg90uqvkp=lw(2{|H0c2D$
z6WF^&mSEetIqxwVOn$}bAn6V=7d6nqM*2^7=K9JQHQACo&H|J=i$XvO6&M&8Rx(2p
zPY_5T7(}3Izr~)OTH=?Oo0>5BJa;;y$7FLJGsfi2c|6g~nqWVIeH#wa2o7Cv2!K5b
z_B_b3MIMts@msL@gVfkfHW1L#0b2&rc#AzbKc~1LG4B><Nn%n?D#)T+jKxI}AhjUp
z6{SpW6Od=j+`LRckde_~@(w}W`WOZVhAI{XT|0#;UWI6dg4De7%#@N0Tcx5{kTxHX
zG_yi1mnK({H%K56M8ty<4|7gxUXd4wn*idng6%8<yBi!CplH$LfCNY?NLdyG149&7
za(-TMNl{{EUJ1xReugOKv~0s$Y$=Jw8L26^CKn4SF?LLzCUlaw2$V!MnQk%Z85BiK
zE)bSuoH@B)cqK<6IF}R^O?D8G;4fxiV3-3kyaeP>qsbRV)F=0e2s0K<UL>Nz29cS3
zMnu=k4Wx^s2pkOHhy^>;1EkdxM1Va4^5HGk%#zgH;vyB0C~EY9T{LB~tLPR+_sPFR
z138P-L6Oc>R5UqCOqL7emc<}lC6gP)^!ZTDo_s(!a5BHRrgAk%MJ<RxGaRIS8A!Zj
za<sU;Tp5UorlgXAfdQ(dQA~AmgE*%*C=eMm*^9sl5u2Z?K<0ovrpZ*K24d%e2sDF1
z{+K`6NW$C|Ezg3o&@JxdoW$Z{Xej|s?BFCC2{I@fL==DsP;?dPf>_{!L>c5FKT!4t
z6>A)f9NbKdJgi*I9Bdr&96TUikqbD(u}OL{)=UnRtgLqhX*OVBU<h&3<SGKY6BJ*d
zbe)@<npaW;PJAgKRY@Qs8AO27B2Pg!Qn~`AM@<$;%7dFyR1Z>(=5LVqR>Ryl*;6V(
zE)=9H3`C$Q1$lYr=HpT)85t8NPn3~lyft~Xj2z>w$){w3EkJI%#gdetp968DHYi6h
zXXcgM;wmmlEGj83&n(F(3IL@+Xb}O@QPea!R92pG@8nY1t@U8%;qqWn1IR^Se{n(5
zFhV)Vt|G8;sDXmegEKAPhIyTVY4S?B{Y1Ngv#18-9{jEarKuvYlc5O@Tn?dyDoD`_
zkSjnH>*VM1hMHIsU=b+ni~2xTq9rnEkULg^^h2sF4n8gx4ml29CdQ%~aN+{hC2JH?
zm9XUITRiEhCGpAmIq{&{^~YpmMSb*oVgk6H=x1PH_ztoIT2J&tO-_)+VrtO@1_p*d
zlQoo-7$<^tPhwzT_>H7{5>&Uw<PAy|Hn>b+U}Rtb*GmkHRU$#D=|TB9sd~un^(%rH
zKZSvT;Xjh`QzrW=r#apdC@#!N%t_8j&8^fcsVqn>E)oU>pD&02<wtPkTLh{BAteVW
k9E(66Edsf>Xv$<q1@Xz;DpI_X0t$Tmd@+2!0xSY70F~hLy#N3J
delta 1971
zcmZqm-sHiT$ji&cz`($8<j9lM^{N~BE->;LFfcHrGDI<^Fhnt>a87>1sLaY3%%I7&
zS%b-diB*%)Pm^Qv6juAmi<Cts|7YdoVPjxm;9wMC<zOxnnVi5SvRRK!j8RILfq|h&
z3`FRG2yqZ00V1>}$FZw03QulkPiBmo{G8p9QEsv(hn9c}NKzF<sDTKL$;lkLvicyV
z42aNVU|<kpU|=X_0b3`=U8D)JZ1QbImB~*z&PbVn6q$kuGZ0}8A}m0J<>a-T5|bZu
z3Nso{{?2KDZjbEbdCC%k#taM$Mj+Ffz@`@&Pfp<a#Hc+vnA?HTaq@jmaYm=fYq-BM
z`c7WN6DMN_GS?48C@?TEtYj{d0<nESgzsb-UTMbQ$rilnj82mm@R~7(ZNAPM&8!J_
z71(`&Aa&sI0K3@=#05Lo62x+v94%<U<_Th2Or9yI#RWDNq%mspSwV5`Adn2m+M>A0
z?*-)<V>a^(2{JNjPgWGxWel6_FDzLf4pQRAz`#(&tPsnk$yMYE5{L#7kqitBx0rKM
z^NL(R+$a#2wIneqC$$LdB3qEC4Fdy%CI`e*@gRX@1_p*GuH^i@;*z4o%)An?fl<t9
z*@jVUDT&1ysVPyciA6>E<wepA3=ET>3yU*WPyR1_()1R4Nq&4vW^#!p(=8@FgCelw
zL2AGXi$D>3i_0b_v$!NVKexcHhk=3NGs9#<G3CiJqK*0)Aa^hoWq};YoSdHn(FE2G
z(pi+vz`)QCa$gR}uSS#qiO5a9D<R3UlDQ~rGP{@x8$@!lp_s0Z1IR3nB5=Stg7kpB
z>jYvsg9vbNfWqk(Yi3DmZt+S+i2uR1feEmcnG6gJ?UPrCZDDkr94j8ke~UA%C_fkM
z#g$A&S(CSm%W{F7H4S8D&g6UI`rJr%OqP(SRW1QZm4gVdv0wshHb~!0ka*7I9TN6(
zc_1cO7EFMZ6f!U{K$YARSDk!Ug3|{a7n<xv;53QNQ$-+iKt9uCy2X-`Sdv(j1`+`q
z3MRlNmoYFfOq$#$Y0iz54<}!c6w?K#b8wms2I)%y5$PZT6c)F5ic1npGLv&tOEU6P
zipoHli527&$I0qavW#}%EE*~0#aKFdiBx60JxHH60|P^dn<f{;9iSMw#h#p>o12<f
zQUp$<aUfMOAR-n-fYU5bK{itQ1EpI{7Dx<%eFHM3s2ZG6=S`j>ogwEB(is3Ez<vZ1
zV2^@)vSzcC%t=ORkY!P<Zk`dYF1OhHLVcZFgKn{=Wmcr7L{0uDE5{f$SynDs5agO$
zEJ^wKIS|*WPi~YG74ib5Cuqh8sVJ(Oyh2W%al_;ja$D=GLH2@7F9J)UdZnlaBn$Qd
z7bHC*l&gcJ@aicl1}Oo12TXwd1d54spwdeORFpGK{v*GiXg6>cm4Zyf?^;mmC;~f~
zsi*>^97{$n0x7x;as{ZEo@}LPsEL%6K$>Jh1StHAIzTLttBa~YEJ(5exnu6+jf$d-
zrQl?9Td|X|cyg+e0^{q+ZA$v+1$P%HtqFEAFfhCVSqd$<J0V(?H708*TS#IHtS$xy
zhWC@Jm6aH~!6twTop(qk^gvBWkiw<=GsEOi6-B7_J_ZJcPe|JPCNEG)bBq!wF3d^H
zNzO>kt<)>2EJ!Ub5(fFy9Yla)sR&e`6@jW9NX`X$z6j)*B9MEE`X<j)7M~oaD#gnq
Qpuoq^7sKZ(z#_l`05lSvj{pDw
diff --git a/my_flask_app/models/models.py b/my_flask_app/models/models.py
index 4fe07bf..f19dfef 100644
--- a/my_flask_app/models/models.py
+++ b/my_flask_app/models/models.py
@@ -15,6 +15,19 @@ class Observation_Spec:
def remove_feature(self, name):
self.features_name.remove(name)
+ def to_dict(self):
+ return {
+ 'type': self.type,
+ 'label': self.label,
+ 'features_name': self.features_name
+ }
+
+ @staticmethod
+ def from_dict(data):
+ observation_spec = Observation_Spec(data['type'], data['label'], data['features_name'])
+
+ return observation_spec
+
class Obesrvation(Observation_Spec):
def __init__(self, time, type, object, label, features_name:list = None, feature:dict = None):
super().__init__(type, label, features_name=None)
diff --git a/my_flask_app/templates/app.html b/my_flask_app/templates/app.html
index 353e6d5..0d04707 100644
--- a/my_flask_app/templates/app.html
+++ b/my_flask_app/templates/app.html
@@ -25,6 +25,7 @@
<style>
body {
/* position: fixed; */
+ overflow: hidden;
display: flex;
flex-direction: row;
height: 100vh;
@@ -115,7 +116,13 @@
padding: 0;
border: none; /* Remove border to make it seamless */
}
- select, button { width: 80%; }
+ button { width: 80%; }
+ .headerButton {
+ width: 75px;
+ margin: 5px 0px;
+ border: none;
+ background-color: #5ea9e2;
+ }
#canvasContainer {
min-height: 84vh;
max-height: max-content;
@@ -228,8 +235,32 @@
select {
width: 100%;
}
+ .headerSelect{
+ width: 220px;
+ }
.chosen-container {
- width: 100% !important; /* Use !important to override inline styles if necessary */
+ width: 450px !important; /* Use !important to override inline styles if necessary */
+ }
+ .chosen-container-multi .chosen-choices{
+ border-radius: 6px;
+ height: 40px !important;
+ cursor: text;
+ margin-top: 3px;
+ border: 1px solid #ddd;
+ text-indent: 0;
+ font-size: medium;
+
+ padding: 0.3em;
+ min-height: 34px; /* Adjust the min-height accordingly */
+ overflow-y: auto;
+ }
+ .chosen-container-multi .chosen-choices li.search-choice {
+ line-height: 1.1;
+ margin: 3px;
+ border-radius: 3px;
+ }
+ .chosen-container .chosen-choices li.search-choice span {
+ font-size: 14px; /* Adjust font size here */
}
/* Removes the Chosen removal button image */
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
@@ -239,7 +270,14 @@
font-family: "Font Awesome 5 Brands", sans-serif;
content: "\f099";
color: red;
- font-size: 12px;
+ font-size: 14px;
+ }
+ #scrollable-panel {
+ flex: 1 1 auto; /* Don't grow, don't shrink, keep the size based on its content */
+ width: 50%; /* Adjust as needed */
+ max-height: 100vh;
+ position: sticky;
+ top: 0;
}
</style>
</head>
@@ -253,89 +291,123 @@
<div class="mb-3">
<label for="disabledTextInput" class="form-label" style="margin-top: 10px;">{{database}}.db</label>
</div>
- <div class="accordion" style="margin-top: 5px;">
- <div class="accordion-item">
- <h2 class="accordion-header">
- <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
- Schema
- </button>
- </h2>
- <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
- <div class="accordion-body">
- <form method="post">
- <input class="form-check-input" id="showAllClick" style="margin: 2px 2px 2px 5px; border-color: black;" type="checkbox" name="show_all" value="True" onchange="this.form.submit()">
- <!-- <span class="uk-label" style="margin: 1px;" >show all</span> -->
- <label class="form-check-label" for="showAllClick" style="margin-top: 3px;">
- Primary Tables
- </label>
- <select class="form-select" name="schema" id="schemaSelect" onchange="this.form.submit()" style="padding: 0px 1px 2px 1px;">
- <option value="">Choose here</option>
- {% for schema in schemas %}
- <option value="{{ schema }}" {% if schema == schema_Selected %} selected {% endif %}>{{ schema }}</option>
- {% endfor %}
- </select>
+
+ <ul uk-accordion>
+ <li>
+ <a class="uk-accordion-title" href="#">Database URL</a>
+ <div class="uk-accordion-content">
+
+ <form method="post" action="/">
+ <div class="mb-3">
+ <!-- <label for="exampleInputPassword1" name="database_uri" class="form-label">Database URI</label> -->
+ <input type="text" class="form-control" id="exampleInputPassword1" name="database_uri" placeholder="Enter Database URI">
+ <button type="submit" class="btn btn-primary headerButton"> Submit </button>
+ </div>
</form>
- </div>
- </div>
- </div>
- <div class="accordion-item">
- <h2 class="accordion-header">
- <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
- Time
- </button>
- </h2>
- <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
- <div class="accordion-body">
- <!-- <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. -->
- </div>
- </div>
- </div>
- <div class="accordion-item">
- <h2 class="accordion-header">
- <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
- Object
- </button>
- </h2>
- <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
- <div class="accordion-body">
- <!-- <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. -->
+
</div>
- </div>
- </div>
- <div class="accordion-item">
- <h2 class="accordion-header">
- <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
- Label
- </button>
- </h2>
- <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
- <div class="accordion-body">
- <!-- <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. -->
+ </li>
+
+
+ <li>
+ <a class="uk-accordion-title" href="#">Filter</a>
+ <div class="uk-accordion-content">
+
+ <div class="accordion">
+ <div class="accordion-item">
+ <h2 class="accordion-header">
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+ Schema
+ </button>
+ </h2>
+ <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+ <div class="accordion-body">
+ <form method="post">
+ <input class="form-check-input" id="showAllClick" style="margin: 2px 2px 2px 5px; border-color: black;" type="checkbox" name="show_all" value="True" onchange="this.form.submit()">
+ <!-- <span class="uk-label" style="margin: 1px;" >show all</span> -->
+ <label class="form-check-label" for="showAllClick" style="margin-top: 3px;">
+ Primary Tables
+ </label>
+ <select class="form-select" name="schema" id="schemaSelect" onchange="this.form.submit()" onclick="openTables()" style="padding: 0px 1px 2px 1px;">
+ <option value="">Choose here</option>
+ {% for schema in schemas %}
+ <option value="{{ schema }}" {% if schema == schema_Selected %} selected {% endif %}>{{ schema }}</option>
+ {% endfor %}
+ </select>
+ </form>
+ </div>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <h2 class="accordion-header">
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+ Time
+ </button>
+ </h2>
+ <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+ <div class="accordion-body">
+ <!-- <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. -->
+ </div>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <h2 class="accordion-header">
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+ Object
+ </button>
+ </h2>
+ <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+ <div class="accordion-body">
+ <!-- <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. -->
+ </div>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <h2 class="accordion-header">
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+ Label
+ </button>
+ </h2>
+ <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+ <div class="accordion-body">
+ <!-- <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. -->
+ </div>
+ </div>
+ </div>
+ </div>
+
</div>
- </div>
- </div>
- </div>
-
- <h4 style="margin-top: 0px;">Tables:</h4>
- <div class="border border-secondary rounded" id="table_list" style="margin-bottom: 5px; margin-top: -10px;">
- <div id="table_list_source">
- <div id="show_tables1" uk-sortable="group: sortable-group" class="uk-list uk-list-collapse">
- {% for table in tables %}
- <div id="show_tables2" class="uk-margin" style="height: 15px; margin-bottom: -4px;">
- <div class="list-group-item-action uk-card uk-card-default uk-card-body uk-card-small " style="height: 15px; padding-top: 5px;">{{ table }}</div>
+ </li>
+
+
+ <li class="uk-class">
+ <a class="uk-accordion-title" href="#">Tables</a>
+ <div class="uk-accordion-content">
+
+ <div class="border border-secondary rounded" id="table_list" style="margin-bottom: 5px; margin-top: -10px;">
+ <div id="table_list_source">
+ <div id="show_tables1" uk-sortable="group: sortable-group" class="uk-list uk-list-collapse">
+ {% for table in tables %}
+ <div id="show_tables2" class="uk-margin" style="height: 15px; margin-bottom: -4px;">
+ <div class="list-group-item-action uk-card uk-card-default uk-card-body uk-card-small " style="height: 15px; padding-top: 5px;">{{ table }}</div>
+ </div>
+ {% endfor %}
+ </div>
</div>
- {% endfor %}
+ </div>
+
</div>
- </div>
- </div>
+ </li>
+ </ul>
+
- <h4 style="margin-top: -4px;">Target Tables:</h4>
+ <legend style="margin-top: 3px;">Target Tables:</legend>
<div class="border border-secondary rounded" id="table_list" >
<div id="dropped_items">
<div uk-sortable="group: sortable-group" class="uk-list uk-list-collapse ">
{% for item in dropped_items %}
<div class="uk-margin" style="height: 15px; margin-bottom: -4px;">
- <div class="list-group-item-action uk-card uk-card-default uk-card-body uk-card-small" onclick="showOptions(this)" style="height: 15px; padding-top: 5px;">{{ item }}</div>
+ <div class="list-group-item-action uk-card uk-card-default uk-card-body uk-card-small" style="height: 15px; padding-top: 5px;">{{ item }}</div>
</div>
{% endfor %}
</div>
@@ -343,24 +415,25 @@
</div>
<!-- don't use form, try use javascript to handle the reset button -->
<form action="/handle-drop" method="POST">
- <button id="resetButton" type="submit" class="btn btn-secondary btn-sm">Reset</button>
+ <button id="resetButton" type="submit" class="btn btn-secondary headerButton">Reset</button>
</form>
</div>
<div id="content">
<button class="uk-button uk-button-default uk-button-small custom-push-button" type="button" uk-toggle="target: #sidebar1" onclick="toggleSidebar()"></button>
<ul uk-tab class="uk-flex-center" data-uk-tab="{connect:'#my-id'}" style="margin-top: 10px; z-index: 0;">
- <li><a href="#">ERD</a></li>
- <li><a href="#">Other Content</a></li>
+ <li><a href="#">ERD</a></li>
+ <li><a href="#">Create Data Header</a></li>
+ <li><a href="#">Create Data instance</a></li>
</ul>
<!-- <div> -->
<ul id="my-id" class="uk-switcher">
<li><a href="#" id="autoplayer" data-uk-switcher-item="next"></a>
- <div style="display: flex; flex-direction: row; height: 85vh;">
+ <div style="display: flex; flex-direction: row; height: 85vh; border: 0px 1px;">
<div style="flex: 0,3; display: flex; flex-direction: column;">
- <h4>Filtered ERD</h4>
+ <h4 style="margin: .0em .0em .6em .2em;">Filtered 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>
<div id="zoomButtons">
@@ -371,8 +444,8 @@
</div>
<div style="flex: 0,7; display: flex; flex-direction: column;">
- <h4>Target ERD</h4>
- <div class="uk-panel uk-panel-scrollable" id="canvasContainer" style="min-width: 20%; max-width: 70%;">
+ <h4 style="margin: .0em .0em .6em .2em;">Target ERD</h4>
+ <div class="uk-panel" id="canvasContainer" style="overflow-y: scroll; min-width: 20%; 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>
@@ -387,9 +460,9 @@
<li>
<div style="display: flex; flex-direction: row; height: 87vh;">
- <div style="flex: 0,4; display: flex; flex-direction: column;">
- <h4>Target ERD</h4>
- <div class="uk-panel uk-panel-scrollable" id="canvasContainer" style="margin-right: -1px; min-width: 30%;">
+ <div id="scrollable-panel" style="display: flex; flex-direction: column;">
+ <h4 style="margin: .0em .0em .6em .2em;">Target ERD</h4>
+ <div class="uk-panel" id="canvasContainer" style="overflow-y: auto;">
<canvas id="erdCanvas3" style="min-width: 30%;"></canvas>
<div id="zoomButtons">
<button class="uk-button uk-button-default uk-button-small custom-zoom-button" id="zoomInBtn3" uk-icon="plus-circle"></button>
@@ -398,41 +471,49 @@
</div>
</div>
- <div style="flex: 0,6; display: flex; width: 60%; max-width: 70%; flex-direction: column; border: 1px solid blue;">
+ <div style="flex-grow: 1; padding-left: 10px; margin-top: 3px; display: flex; flex-direction: column;">
<fieldset>
- <legend>Data Header</legend>
+ <legend style="margin: .2em .2em .4em -.4em; color:#5ea9e2; border-bottom: 1px solid gray; padding-bottom: 5px; padding-right: 3px;">Data Header</legend>
<div class="mb-3">
<label class="form-label" style="margin-top: 14px">Type</label>
<div class="uk-grid-small uk-child-width-auto uk-grid">
- <label><input class="uk-radio" type="radio" name="radio1"> Measurement </label><br><br>
- <label><input class="uk-radio" type="radio" name="radio1"> Event </label><br><br>
- <label><input class="uk-radio" type="radio" name="radio1"> Segment </label><br><br>
- <label><input class="uk-radio" type="radio" name="radio1"> Segment Data </label><br><br>
- <label><input class="uk-radio" type="radio" name="radio1"> Object </label>
+ <label><input class="uk-radio type-radio" type="radio" name="radio1" value="measurement" checked> Measurement </label><br><br>
+ <label><input class="uk-radio type-radio" type="radio" name="radio1" value="event"> Event </label><br><br>
+ <label><input class="uk-radio type-radio" type="radio" name="radio1" id="segmentType" value="segment"> Segment </label><br><br>
+ <label><input class="uk-radio type-radio" type="radio" name="radio1" value="segmentData"> Segment Data </label><br><br>
+ <label><input class="uk-radio type-radio" type="radio" name="radio1" id="objectType" value="object"> Object </label>
</div>
</div>
- <div class="mb-3">
- <label class="form-label">Self-defined Label</label>
- <input type="text" id="defined-label" class="form-control">
- <button class="btn btn-primary" onclick="addLabel()">add</button>
+ <div class="mb-3" id="object-column-selection" style="display: none;">
+ <label class="form-label">Object name</label><br>
+ <select id="select_column_object" class="form-select headerSelect" name="column" style="margin-right: 5px; display: inline;">
+ {% for column in columns %}
+ <option>Select a table first...</option>
+ <option value="{{label}}">{{ label }}</option>
+ {% endfor %}
+ </select><span style="color: red; font-size: 80%;">*</span>
+ </div>
+
+ <div class="mb-3" id="self-defined-label-selection">
+ <label class="form-label">Self-defined Label</label><br>
+ <input type="text" id="defined-label" class="form-control headerSelect">
+ <button class="btn btn-primary headerButton" onclick="addLabel()">add</button>
</div>
- <div class="mb-3">
+ <div class="mb-3" id="label-selection">
<label class="form-label">Label</label>
-
- <select id="select_column" class="form-select" name="column" onchange='handleLabelColumnClick(value)'>
+ <select id="select_column" class="form-select headerSelect" name="column" onchange='handleLabelColumnClick(value)'>
{% for column in columns %}
- <option>Column select...</option>
+ <option>Select a table first...</option>
<option value="{{label}}">{{ label }}</option>
{% endfor %}
- </select>
-
- <select id=label_values class="form-select">
- <option>Label select...</option>
+ </select>
+ <select id=label_values class="form-select headerSelect " style="margin-top: 2px; margin-right: 5px; display: inline;">
+ <option>Label select...</option>
<optgroup id="defined_label_values" label="self-defined label">
{% for self_label in self_labels %}
<option value="{{self_label}}">{{ self_label }}</option>
@@ -444,46 +525,118 @@
<option value="{{label_value}}">{{ label_value }}</option>
{% endfor %}
</optgroup>
- </select>
+ </select><span style="color: red; font-size: 80%;">*</span><br />
</div>
- <div class="mb-3">
- <label class="form-label">Feature</label>
- <select id="select_features" name = "value_column[]" data-placeholder="Value columns" multiple class="chosen-select" tabindex="8">
- <option value="GB">GB</option>
- <option value="RU">RU</option>
- <option value="RU">Hey</option>
+ <div class="mb-3" id="featuresSelection">
+ <label class="form-label">Feature</label><br />
+ <select id="select_features" name = "value_column[]" data-placeholder="Slect a table first..." multiple class="chosen-select" tabindex="4">
{% for column in columns %}
<option>Column select...</option>
<option value="{{label}}">{{ label }}</option>
{% endfor %}
</select>
-
- <script> $(".chosen-select").chosen(); </script>
- <br>
- <!-- <button type="submit" class="btn btn-primary">Submit</button> -->
-
+ <script> $(".chosen-select").chosen({tabindex: 6}); $("#select_features").css('font-size','25px'); </script>
+ <span id="span"></span><span style="color: red; font-size: 80%;">*</span><br>
</div>
- <!-- <div class="mb-3">
- <div class="form-check">
- <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck">
- <label class="form-check-label" for="disabledFieldsetCheck">
- Can't check this
- </label>
- </div>
- </div> -->
- <button type="submit" class="btn btn-primary">Submit</button>
+
+ <button type="submit" class="btn btn-primary headerButton" onclick="submitDataHeader()" style="margin-top: -11px;">Submit</button>
</fieldset>
</div>
</div>
</li>
+
+ <li>
+ <div style="display: flex; flex-direction: column; height: 87vh;">
+ <div class="table-container" style="flex: 1; overflow-y: auto;">
+ <table class="uk-table uk-table-striped" style="overflow-y: scroll;">
+ <thead>
+ <tr>
+ <th>Table Heading</th>
+ <th>Table Heading</th>
+ <th>Table Heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Table Data</td>
+ <td>Table Data</td>
+ <td>Table Data</td>
+ </tr>
+ <tr>
+ <td>Table Data</td>
+ <td>Table Data</td>
+ <td>Table Data</td>
+ </tr>
+ <tr>
+ <td>Table Data</td>
+ <td>Table Data</td>
+ <td>Table Data</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="table-container" style="flex: 1; overflow-y: auto;">
+ <div class="uk-overflow-auto">
+ <table class="uk-table uk-table-hover uk-table-middle uk-table-divider" style="overflow-y: scroll;">
+ <thead>
+ <tr>
+ <th class="uk-table-shrink"></th>
+ <th class="uk-table-shrink">Preserve</th>
+ <th class="uk-table-expand">Expand + Link</th>
+ <th class="uk-width-small">Truncate</th>
+ <th class="uk-table-shrink uk-text-nowrap">Shrink + Nowrap</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><input class="uk-checkbox" type="checkbox" aria-label="Checkbox"></td>
+ <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
+ <td class="uk-table-link">
+ <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
+ </td>
+ <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
+ <td class="uk-text-nowrap">Lorem ipsum dolor</td>
+ </tr>
+ <tr>
+ <td><input class="uk-checkbox" type="checkbox" aria-label="Checkbox"></td>
+ <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
+ <td class="uk-table-link">
+ <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
+ </td>
+ <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
+ <td class="uk-text-nowrap">Lorem ipsum dolor</td>
+ </tr>
+ <tr>
+ <td><input class="uk-checkbox" type="checkbox" aria-label="Checkbox"></td>
+ <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
+ <td class="uk-table-link">
+ <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
+ </td>
+ <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
+ <td class="uk-text-nowrap">Lorem ipsum dolor</td>
+ </tr>
+ <tr>
+ <td><input class="uk-checkbox" type="checkbox" aria-label="Checkbox"></td>
+ <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
+ <td class="uk-table-link">
+ <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
+ </td>
+ <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
+ <td class="uk-text-nowrap">Lorem ipsum dolor</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </li>
</ul>
<!-- </div> -->
-
<div class="custom-buttom-bar">
<div id="terminal" class="terminal">
<div id="terminal-header" class="terminal-header">
@@ -514,17 +667,16 @@
<p>Content for item 2.</p>
</div>
</li>
- <!-- Add more items as needed -->
</ul>
- <!-- set_database.html -->
+ <!-- set_database.html
<form method="post" action="/">
<div class="mb-3">
<label for="exampleInputPassword1" name="database_uri" class="form-label">Database URI</label>
<input type="text" class="form-control" id="exampleInputPassword1" name="database_uri" placeholder="Enter Database URI">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
- </form>
+ </form> -->
<div id="resize-handle-left" class="resize-handle-left"></div>
</div>
@@ -595,6 +747,118 @@
// });
// }
+
+ function submitDataHeader() {
+ var $ = function(id) { return document.getElementById(id); };
+ var isValid = true;
+
+ var radioSelect = document.querySelector('input[name="radio1"]:checked');
+ console.log(radioSelect.value);
+ var label = $("label_values").value;
+ console.log(label);
+ var object_column = $("select_column_object").value;
+ console.log(object_column);
+ var tmp = $("select_features").selectedOptions;
+ var features_list = Array.from(tmp).map(({ value }) => value);
+ console.log(features_list);
+
+ if (radioSelect.value == 'measurement') {
+ if (label == 'Label select...' || label == null || label == "") {
+ $("label_values").nextElementSibling.textContent = "This field is required.";
+ // alert("Please select a label");
+ console.log("Label is required");
+ if (features_list.length == 0 || features_list == null || features_list == []) {
+ $("span").nextElementSibling.textContent = "This field is required.";
+ // alert("Please select a feature");
+ console.log("Feature is required");
+ }
+ return;
+ }
+ if (features_list.length == 0 || features_list == null || features_list == []) {
+ $("span").nextElementSibling.textContent = "This field is required.";
+ // alert("Please select a feature");
+ console.log("Feature is required");
+ return;
+ }
+ } else if (radioSelect.value == 'event') {
+ if (label == 'Label select...' || label == null || label == "") {
+ $("label_values").nextElementSibling.textContent = "This field is required.";
+ // alert("Please select a label");
+ console.log("Label is required");
+ if (features_list.length == 0 || features_list == null || features_list == []) {
+ $("span").nextElementSibling.textContent = "This field is required.";
+ // alert("Please select a feature");
+ console.log("Feature is required");
+ }
+ return;
+ }
+ if (features_list.length == 0 || features_list == null || features_list == []) {
+ $("span").nextElementSibling.textContent = "This field is required.";
+ // alert("Please select a feature");
+ console.log("Feature is required");
+ return;
+ }
+ } else if (radioSelect.value == 'segment') {
+ if (label == 'Label select...' || label == null || label == '') {
+ $("label_values").nextElementSibling.textContent = "This field is required.";
+ // alert("Please select a label");
+ console.log("Label is required");
+ return;
+ }
+ } else if (radioSelect.value == 'segmentData') {
+ if (label == 'Label select...' || label == null || label == '') {
+ $("label_values").nextElementSibling.textContent = "This field is required.";
+ // alert("Please select a label");
+ console.log("Label is required");
+ if (features_list.length == 0 || features_list == null || features_list == []) {
+ $("span").nextElementSibling.textContent = "This field is required.";
+ // alert("Please select a feature");
+ console.log("Feature is required");
+ }
+ return;
+ }
+ if (features_list.length == 0 || features_list == null || features_list == []) {
+ $("span").nextElementSibling.textContent = "This field is required.";
+ // alert("Please select a feature");
+ console.log("Feature is required");
+ return;
+ }
+ } else if (radioSelect.value == 'object') {
+ if (object_column == 'Select a table first...' || object_column == null || object_column == '') {
+ $("select_column_object").nextElementSibling.textContent = "This field is required.";
+ // alert("Please select an object column");
+ console.log("Object column is required");
+ return;
+ }
+ }
+
+ $("label_values").nextElementSibling.textContent = "*";
+ $("span").nextElementSibling.textContent = "*";
+ $("select_column_object").nextElementSibling.textContent = "*";
+
+ console.log("HERE");
+ console.log(radioSelect, label, object_column, features_list);
+
+ // Send the value to the server with fetch API
+ fetch('/add-data-header', {
+ method: 'POST',
+ body: JSON.stringify({ 'type': radioSelect.value, 'label': label, 'object_column': object_column, 'value_list': features_list}),
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ })
+ .then(response => response.json())
+ .then(data => {
+
+ })
+ .catch(error => {
+ // Handle any error that occurred during the fetch
+ console.error('Error:', error);
+ });
+
+ }
+
+
function addLabel() {
const labelValue = document.getElementById('defined-label').value; // Get the value of the input
@@ -624,7 +888,7 @@
console.error('Error:', error);
});
- labelValue.value = ''; // Clear the input field
+ document.getElementById('defined-label').value = ''; // Clear the input field
}
function toggleSidebar() {
@@ -744,12 +1008,27 @@
// Display the table content in the terminal body
document.querySelector('.terminal-body').innerHTML = data.html_table;
+ // Assign data.table_columns to the select element
+ const selectElement0 = document.getElementById('select_column_object');
+ selectElement0.innerHTML = '';
+ const optionElement0 = document.createElement('option');
+ optionElement0.value = '';
+ optionElement0.textContent = 'Column select...';
+ selectElement0.appendChild(optionElement0);
+ // Add the table columns as options
+ data.table_columns.forEach(column => {
+ const optionElement = document.createElement('option');
+ optionElement.value = column;
+ optionElement.textContent = column;
+ selectElement0.appendChild(optionElement);
+ });
+
// Assign data.table_columns to the select element
const selectElement = document.getElementById('select_column');
selectElement.innerHTML = '';
const optionElement = document.createElement('option');
optionElement.value = '';
- optionElement.textContent = 'Label column select';
+ optionElement.textContent = 'Column select...';
selectElement.appendChild(optionElement);
// Add the table columns as options
data.table_columns.forEach(column => {
@@ -764,6 +1043,7 @@
selectFeatures.innerHTML = '';
// Add the table columns as options
data.feature_columns.forEach(column => {
+ console.log(column);
const optionElement = document.createElement('option');
optionElement.value = column;
optionElement.textContent = column;
@@ -809,7 +1089,6 @@
.catch(error => console.error('Error:', error));
}
-
function makeTerminalResizable() {
const terminal = document.getElementById('terminal');
const terminalHeader = document.getElementById('terminal-header');
@@ -833,26 +1112,52 @@
});
}
- function showOptions(clickedItem) {
- // Get the options container
- var optionsContainer = document.getElementById('options-container');
-
- // Position the options container near the clicked item
- optionsContainer.style.display = 'block';
- optionsContainer.style.left = clickedItem.getBoundingClientRect().left + 'px';
- optionsContainer.style.top = clickedItem.getBoundingClientRect().bottom + 'px';
-
- // Populate options specific to the clicked item
- populateOptions(clickedItem.textContent.trim());
+ function segmentTypeSelected() {
+ console.log('Segment type selected');
+ if (this.value == 'segment') {
+ // Hide the features selection div
+ document.getElementById('featuresSelection').style.display = 'none';
+ console.log('11Segment type selected');
+ } else {
+ // Show the features selection div
+ document.getElementById('featuresSelection').style.display = 'block';
+ console.log('22Segment type selected');
+ }
}
- function populateOptions(tableName) {
- // Logic to populate options based on the table name
- // This will depend on the specific options you want to show
- return 'abc';
- }
+ document.querySelectorAll('.type-radio').forEach(function(radio) {
+ radio.addEventListener('change', function() {
+ var $ = function(id) { return document.getElementById(id); };
+ $("label_values").nextElementSibling.textContent = "*";
+ $("span").nextElementSibling.textContent = "*";
+ $("select_column_object").nextElementSibling.textContent = "*";
+ var segmentType = document.getElementById('segmentType');
+ var objectType = document.getElementById('objectType');
+ var featuresSelection = document.getElementById('featuresSelection');
+ var objectSelection = document.getElementById('object-column-selection');
+ var selfdefinedlabelSelection = document.getElementById('self-defined-label-selection');
+ var labelSelection = document.getElementById('label-selection');
+
+ if (segmentType.checked && radio.value === "segment") {
+ featuresSelection.style.display = 'none';
+ objectSelection.style.display = 'none';
+ selfdefinedlabelSelection.style.display = 'block';
+ labelSelection.style.display = 'block';
+ } else if (objectType.checked && objectType.value === "object"){
+ featuresSelection.style.display = 'none';
+ objectSelection.style.display = 'block';
+ selfdefinedlabelSelection.style.display = 'none';
+ labelSelection.style.display = 'none';
+ } else {
+ featuresSelection.style.display = 'block';
+ objectSelection.style.display = 'none';
+ selfdefinedlabelSelection.style.display = 'block';
+ labelSelection.style.display = 'block';
+ }
+ });
+ });
document.addEventListener('DOMContentLoaded', function() {
// Show the ERD canvas
@@ -891,6 +1196,24 @@
}
});
+
+ document.getElementById('dropped_items').addEventListener('click', function(event) {
+ let target = event.target;
+ while (target != this) {
+ if (target.matches('.uk-card')) {
+ handleDroppedItemClick(target.textContent.trim());
+ return;
+ }
+ target = target.parentNode;
+ }
+ });
+
+
+ document.getElementById('close-terminal').addEventListener('click', function() {
+ closeTerminal();
+ });
+
+
// document.getElementById('resetButton').addEventListener('click', function(event) {
// event.preventDefault(); // Prevent the default form submission
@@ -929,23 +1252,7 @@
// });
// Attach click event listener to each dropped item
- document.getElementById('dropped_items').addEventListener('click', function(event) {
- let target = event.target;
- while (target != this) {
- if (target.matches('.uk-card')) {
- handleDroppedItemClick(target.textContent.trim());
- return;
- }
- target = target.parentNode;
- }
-
- showOptions(target.textContent.trim());
- });
-
- document.getElementById('close-terminal').addEventListener('click', function() {
- closeTerminal();
- });
-
+
});
</script>
</body>
--
GitLab