-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
191 lines (176 loc) · 11.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>DER</title>
<link rel="stylesheet" href="design/Main.css" />
<script type="module" src="source/Main.js"></script>
</head>
<body class="light-mode">
<aside class="aside">
<div class="aside-content">
<header>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
<path d="M480-520q150 0 255-47t105-113q0-66-105-113t-255-47q-150 0-255 47T120-680q0 66 105 113t255 47Zm0 100q41 0 102.5-8.5T701-456q57-19 98-49.5t41-74.5v100q0 44-41 74.5T701-356q-57 19-118.5 27.5T480-320q-41 0-102.5-8.5T259-356q-57-19-98-49.5T120-480v-100q0 44 41 74.5t98 49.5q57 19 118.5 27.5T480-420Zm0 200q41 0 102.5-8.5T701-256q57-19 98-49.5t41-74.5v100q0 44-41 74.5T701-156q-57 19-118.5 27.5T480-120q-41 0-102.5-8.5T259-156q-57-19-98-49.5T120-280v-100q0 44 41 74.5t98 49.5q57 19 118.5 27.5T480-220Z"/>
</svg>
<h1 data-action="open-select">DER</h1>
</header>
<section class="schema-filter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" height="24px" width="24px">
<path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
</svg>
<input type="text" name="filter" placeholder="Filter tables" />
<a href="#" class="close" data-action="clear-filter"></a>
<div class="schema-total"></div>
</section>
<section class="schema-list">
<ol></ol>
</section>
</div>
<div class="aside-resizer" data-action="resize-aside"></div>
<div class="aside-arrow arrow" data-action="toggle-aside"></div>
</aside>
<main class="main">
<section class="canvas"></section>
</main>
<ol class="mode">
<li class="mode-light selected" data-action="mode-light">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
<path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM80-440q-17 0-28.5-11.5T40-480q0-17 11.5-28.5T80-520h80q17 0 28.5 11.5T200-480q0 17-11.5 28.5T160-440H80Zm720 0q-17 0-28.5-11.5T760-480q0-17 11.5-28.5T800-520h80q17 0 28.5 11.5T920-480q0 17-11.5 28.5T880-440h-80ZM480-760q-17 0-28.5-11.5T440-800v-80q0-17 11.5-28.5T480-920q17 0 28.5 11.5T520-880v80q0 17-11.5 28.5T480-760Zm0 720q-17 0-28.5-11.5T440-80v-80q0-17 11.5-28.5T480-200q17 0 28.5 11.5T520-160v80q0 17-11.5 28.5T480-40ZM226-678l-43-42q-12-11-11.5-28t11.5-29q12-12 29-12t28 12l42 43q11 12 11 28t-11 28q-11 12-27.5 11.5T226-678Zm494 495-42-43q-11-12-11-28.5t11-27.5q11-12 27.5-11.5T734-282l43 42q12 11 11.5 28T777-183q-12 12-29 12t-28-12Zm-42-495q-12-11-11.5-27.5T678-734l42-43q11-12 28-11.5t29 11.5q12 12 12 29t-12 28l-43 42q-12 11-28 11t-28-11ZM183-183q-12-12-12-29t12-28l43-42q12-11 28.5-11t27.5 11q12 11 11.5 27.5T282-226l-42 43q-11 12-28 11.5T183-183Z"/>
</svg>
</li>
<li class="mode-dark" data-action="mode-dark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
<path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Z"/>
</svg>
</li>
</ol>
<aside class="menu">
<ol class="zoom">
<li class="zoom-in" data-action="zoom-in">+</li>
<li class="zoom-percent" data-action="reset-zoom">100%</li>
<li class="zoom-out" data-action="zoom-out">-</li>
</ol>
<div class="icon" data-action="open-group">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M10 4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm12 8h4c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2zm0-6h4v4h-4V6zM10 20H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2zm0 6H6v-4h4v4zm16-6h-4c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2z" />
<path d="M28 16h-2c-2.671 0-5.182-1.04-7.071-2.929S16 8.671 16 6V4c0-2.2-1.8-4-4-4H4C1.8 0 0 1.8 0 4v8c0 2.2 1.8 4 4 4h2c2.671 0 5.182 1.04 7.071 2.929S16 23.329 16 26v2c0 2.2 1.8 4 4 4h8c2.2 0 4-1.8 4-4v-8c0-2.2-1.8-4-4-4zm2 12c0 .53-.209 1.031-.589 1.411S28.53 30 28 30h-8c-.53 0-1.031-.209-1.411-.589S18 28.53 18 28v-2c0-6.627-5.373-12-12-12H4c-.53 0-1.031-.209-1.411-.589S2 12.53 2 12V4c0-.53.209-1.031.589-1.411S3.47 2 4 2h8c.53 0 1.031.209 1.411.589S14 3.47 14 4v2c0 6.627 5.373 12 12 12h2c.53 0 1.031.209 1.411.589S30 19.47 30 20v8z" />
</svg>
</div>
</div>
</aside>
<div class="selector"></div>
<section>
<div class="select-dialog backdrop" data-dialog="select">
<dialog open>
<h2>Select a Schema</h2>
<p class="select-empty">Use the button bellow to add a new Schema.</p>
<ol class="select-list"></ol>
<button class="btn btn-fill" data-action="open-add">Add Schema</button>
<a href="#" class="close" data-action="close-select"></a>
</dialog>
</div>
<div class="schema-dialog backdrop" data-dialog="schema">
<dialog open>
<h2>Schema</h2>
<p>Name the Schema and select the json files or urls.</p>
<form>
<label class="toggle-input" data-field="urls">
<input type="checkbox" role="switch" name="useUrls" value="1" data-action="schema-urls"></input>
<div>Use urls</div>
</label>
<div class="field" data-field="name">
<label>Name</label>
<input type="text" name="name" />
<div class="error" data-error="name">You must complete the schema name.</div>
</div>
<div class="field file-input schema-file" data-field="file0">
<section>
<div>
<label>Main File</label>
<div class="file-name"></div>
</div>
<div>
<a href="#" class="close" data-action="remove-main-file"></a>
<a href="#" class="btn" data-action="upload-main-file">Upload File</a>
</div>
</section>
<div class="error" data-error="file">You must complete the schema main file.</div>
<div class="error" data-error="json0">The file must be a valid JSON file.</div>
</div>
<div class="field file-input schema-file" data-field="file1">
<section>
<div>
<label>Secondary File</label>
<div class="file-name"></div>
</div>
<div>
<a href="#" class="close" data-action="remove-sec-file"></a>
<a href="#" class="btn" data-action="upload-sec-file">Upload File</a>
</div>
</section>
<div class="error" data-error="json1">The file must be a valid JSON file.</div>
</div>
<div class="field schema-url" data-field="url0">
<label>Main Url</label>
<input type="text" name="mainUrl" />
<div class="error" data-error="url">You must complete de main url.</div>
</div>
<div class="field schema-url" data-field="url1">
<label>Secondary Url</label>
<input type="text" name="secUrl" />
</div>
<div class="field schema-position" data-field="position">
<label>Position</label>
<input type="number" name="position" />
</div>
<button class="btn btn-fill dialog-btn" data-action="edit-schema">Schema</button>
<button class="btn" data-action="close-schema">Cancel</button>
</form>
<a href="#" class="close" data-action="close-schema"></a>
</dialog>
</div>
<div class="backdrop" data-dialog="delete">
<dialog open>
<h2>Delete Schema</h2>
<p class="select-empty">Do you really want to delete the selected Schema?</p>
<button class="btn btn-fill" data-action="delete-schema">Delete Schema</button>
<button class="btn" data-action="close-delete">Cancel</button>
<a href="#" class="close" data-action="close-delete"></a>
</dialog>
</div>
<div class="backdrop" data-dialog="group">
<dialog open>
<h2>Group</h2>
<p class="group-empty">You must first select tables to create a group or select a group to edit it.</p>
<form class="group-content">
<div class="field" data-field="name">
<label>Group Name</label>
<input type="text" name="name" />
<div class="error" data-error="name">You must complete de name of the group.</div>
</div>
<div class="field" data-field="tables">
<label>Selected Tables</label>
<div class="group-tables checkbox-box"></div>
<div class="error" data-error="table">You must indicate at least one table.</div>
<div class="error" data-error="repeated">Some tables are in another group.</div>
</div>
<button class="btn btn-fill dialog-btn" data-action="update-group">Group</button>
<button class="btn" data-action="open-remove">Remove Group</button>
</form>
<a href="#" class="close" data-action="close-group"></a>
</dialog>
</div>
<div class="backdrop" data-dialog="remove">
<dialog open>
<h2>Remove Group</h2>
<p class="select-empty">Do you really want to remove the selected Group?</p>
<button class="btn btn-fill" data-action="remove-group">Remove Group</button>
<button class="btn" data-action="close-remove">Cancel</button>
<a href="#" class="close" data-action="close-remove"></a>
</dialog>
</div>
</section>
</body>
</html>