tartini-simple/addEditData.html at main · kia-z/tartini-simple · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tartini Database</title>
    <meta name="description" content="Database interface for the project Tartinians in Europe">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#header').load('header.html');
        });
    </script>
</head>
<body>
    <!-- start header (incl.navbar) -->
    <div id="header"></div>
    <!-- end header -->
    <main>
        <div class="container mt-5">
            <h2>DATABASE INTERFACE</h2>
            <p>The data entry workflow consists of three steps:
                <ol>
                    <li>Choose what you want to add or check (4 key entities: person, activity, work, place)</li>
                    <li>Check if the record already exists in the database (searching by name/title)</li>
                    <li>Add or edit the data</li>
                </ol>
                <p>In the <b>first step</b>, you can choose between four key entities: person, activity, work, or place. Each entity has its own form and data structure.</p>
                <p>In the <b>second step</b>, you can check if the record already exists in the database by searching for the name or title (the fetch field is automatically updated depending on which entity you chose in step 1).</p>
                <p>In the <b>third step</b>, you can either add or edit the data.<br>
                  If the record exists, you can edit it: the form automatically appears below, prefilled with the existing data (and with a summary table on the left side of the screen).<br>
                  If the record does not exist, you can add a new one by filling out the form. The form will dynamically change based on the entity you selected in the first step.</p>
                <p>There are few <b>validation rules and check lists</b> implemented:
                  <ul>
                    <li>When fetching data (Step 2): a datalist function automatically shows records matching the name/title (also partial)</li>
                    <li>Dates: the recommended format is DD-MM-YYYY, if the input is MM-YYYY or only YYYY there will be an alert (are you sure you want to submit a partial date?); any other format will not be accepted (error message).</li>
                    <li>Place names: the datalist function will show places matching the name (also partial) and will suggest the closest match (based on place_name field in table "places", i.e. places that have been fully registered already).</li>
                    <li>for debugging/exploring purposes: there are many logs, documenting each step (in the console for the javascript; in the google app for the google app script)</li>
                    <li>relationships: if you add a work/activity departing from a person, relationship_type is controlled by an array created by me (i.e. you need to choose one of the existing terms)</li>
                    <li>factoids now work</li>
                    <li>If I mention a new person in a factoid, I'm prompted to record it in the people db</li>
                    <li>automatic WikidataID for person_name works well</li>
                    <li>graph visualisation is messy, attempting to show entities, factoids, and relationships (so a kitchen sink approach to networks/knowledge/whatever), but it allowed testing the endpoints and mapping the json in a decent way for d3.js viz</li>
                  </ul>
                </p>
            </p>

            <h5>OPEN PROBLEMS FOR THE GROUP</h5>
            <ul>
              <li><b>Data modelling questions</b>: relationships / factoids /  both (i.e. now there are relationships between pepole-activity-work-place + factoids)?</li>
              <li>theoretically, I could easily implement Geonames identifiers, fetching also country/lat/long (but it requires an account, and I don't want to expose my username on Github for long term; hence, not working right now)</li>
              <li>fetching <b>RISM identifiers</b>: is more complicated, it is possible to fetch MARC XML and then parse, apparently the API should give also JSON-LD but it is not so clear - but there are also ambiguities about names, etc. which could be problematic with automatic fetch and we would need to implement more controls...</li>
              <li>not a problem, but probably consider whether to reduce the alerts (and what to keep in console, what in alerts)</li>
            </ul>
            <h5>NEXT ON CHIARA TODO (TOTRY...):</h5>
            <ul>
              <li>add zotero validation/linking</li>
              <li>consider whether to have more tables showing more data/related data/entitities, i.e. think about how to show records/relationships</li>
              <li>check if I can reduce my own code and use a google form for adding data instead (and my code will remain only for edit/viewing data eventually)</li>
            </ul>
        </div>
        <!-- choosing starting point -->
         <div class="container mt-5 bg-info bg-opacity-10 border border-info" style="padding: 10px;">
            <h4>Step 1: What do you want to add or check</h4>
            <p>Do you want to check/add/edit a record about a person, an activity, a work, or a place?</p>
            <p>Click on one of the following buttons to begin.</p>
            <div class="row">
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary d-block mx-auto" id="person">Person</button>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary d-block mx-auto" id="activity">Activity</button>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary d-block mx-auto" id="work">Work</button>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary d-block mx-auto" id="place">Place</button>
                </div>
            </div>
            </div>
       <!-- FETCH Section (hidden by default) -->
        <div class="container mt-5 bg-danger bg-opacity-10 border border-danger" style="padding: 10px;">
            <h4>Step 2: Check if record already exists</h4>
<div class="container mt-5" id="fetch_section" style="display: none;" data-entity="">
    <h6 id="step2_heading">Check if this person already exists</h6>
    <p id="step2_description">
      Enter the name of the pupil/musician in the field below and click on "Fetch Data".<br>
      If the person is already in the database, the results will appear in the table on the left, and you can edit the data using the form on the right.
    </p>
    <label for="entity_search_input" id="search_label">Enter Name to search:</label>
    <input
  type="text"
  id="entity_search_input"
  list="dynamicSuggestions"
  class="form-control mb-3"
  placeholder="Start typing..." />
<datalist id="dynamicSuggestions"></datalist>
    <button type="button" class="btn btn-danger" id="fetch_for_me">Fetch Data</button>
    <p><h5 id="fetch_response" class="mt-3 bg-danger-subtle text-danger p-3 rounded"></h5></p>
  </div>
</div>
  <!-- table and form -->

<!-- step 3: add or edit data -->
<div class="container mt-5 border border-success" style="padding: 10px;">
    <div class="row">
        <h4>Step 3: Add or edit data</h4>
        <p>On the left column, you see any record which we have for this person/activity/work/place. You can modify them in the right part of the screen.</p>
        <p>In case we do not have any record, add a new one.</p>
    </div>

    <!-- Existing Data Table -->
  <div class="row">
    <div class="col-md-3 bg-light border border-secondary" id="data_table_section" style="display: none;">
    <h6>Existing Data</h6>
    <p>We currently have the following data for this record:</p>
    <table class="table table-bordered table-light">
        <thead>
        <tr>
            <th>Field</th>
            <th>Value</th>
        </tr>
      </thead>
      <tbody id="data_table_body">
        <!-- This will be populated dynamically -->
      </tbody>
    </table>
  </div>
  <!-- Dynamic Form -->
  <div class="col-md-9" id="form_section" style="display: none;">
    <h6>Add/Edit Data</h6>
    <form id="my_form">
      <div id="form_fields"></div>
      <button type="button" id="dynamic_btn" class="btn btn-success mt-3">Submit</button>
    </form>
  </div>
  </div>
  </div>
</main>
    <!-- start footer -->
    <footer>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#myfooter').load('footer.html');
            });
        </script>
        <div id="myfooter"></div>
    </footer>
    <!-- end footer -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/constants.js"></script>
    <script src="js/suggestions.js"></script>
    <script src="js/validationDate.js"></script>
    <script src="js/fetch.js"></script>
    <script src="js/identifiers.js"></script>
    <script src="js/render.js"></script>
    <script src="js/factoids.js"></script>
    <script src="js/relationships.js"></script>
    <script src="js/submission/submitMainLogic.js"></script>
    <script src="js/submission/submitForms.js"></script>
    <script src="js/submission/submitSubPlaces.js"></script>
    <script src="js/submission/submitRelationships.js"></script>
    <script src="js/submission/submitFactoids.js"></script>
    <script src="js/relatedForms.js"></script>
</body>
</html>