learn_database-designer/index.html at main · CodeSignal/learn_database-designer · GitHub

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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>DB Schema Designer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./style.css" />
</head>
<body>
  <header>
    <h1>DB Schema Designer</h1>
    <button id="btn-save-solution">Save solution</button>
    <div id="status">Ready</div>
    <button id="btn-help" class="as-button ghost">Help</button>
  </header>

  <main class="layout">
    <!-- Sidebar: simple forms -->
    <aside id="sidebar">
      <section class="card">
        <h2>New Table</h2>
        <form id="form-new-table">
          <label>Table name
            <input id="nt-name" required placeholder="users" />
          </label>
          <button type="submit">Add Table</button>
        </form>
      </section>

      <section class="card" id="section-selected" hidden>
        <div class="row-between">
          <h2 id="sel-title">Selected: —</h2>
          <button id="btn-del-table" class="danger" title="Delete table">Delete</button>
        </div>
        <form id="form-rename-table">
          <label>Rename
            <input id="rt-name" required />
          </label>
          <button type="submit">Save Name</button>
        </form>

        <!-- NEW: table color picker -->
        <label>Table color
          <select id="rt-color">
            <option value="white">White</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="red">Red</option>
          </select>
        </label>

        <hr />

        <h3 id="field-form-title">Add Field</h3>
        <form id="form-new-col">
          <label>Column name
            <input id="nc-name" required placeholder="id" />
          </label>
          <label>Type
            <select id="nc-type"></select>
          </label>
          <label class="row">
            <input type="checkbox" id="nc-nullable" /> Nullable
          </label>
          <label>Default
            <input id="nc-default" placeholder="NULL or value" />
          </label>
          <label class="row">
            <input type="checkbox" id="nc-pk" /> Primary key
          </label>
          <label class="row">
            <input type="checkbox" id="nc-unique" /> Unique
          </label>
          <!-- app.js injects the Add/Save + Delete buttons -->
        </form>

        <hr />

        <h3>Add Foreign Key</h3>
        <form id="form-new-fk">
          <label>From column
            <select id="fk-from-col"></select>
          </label>
          <label>To table
            <select id="fk-to-table"></select>
          </label>
          <label>To column
            <select id="fk-to-col"></select>
          </label>
          <label>On Delete
            <select id="fk-ondelete">
              <option>NO ACTION</option><option>CASCADE</option>
              <option>SET NULL</option><option>RESTRICT</option>
            </select>
          </label>
          <button type="submit">Add FK</button>
        </form>
      </section>
    </aside>

    <!-- Diagram -->
    <div id="diagram-wrap">
      <svg id="diagram" width="100%" height="100%" viewBox="0 0 1400 900"></svg>
    </div>
  </main>

  <script src="./io.js"></script>
  <script src="./diagram.js"></script>
  <script src="./ui.js"></script>
  <script src="./help-modal.js"></script>
  <script src="./app.js"></script>
</body>
</html>