| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Team Registration - JSON Editor</title> |
| |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spectre.css@latest/dist/spectre.min.css"> |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spectre.css@latest/dist/spectre-exp.min.css"> |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> |
|
|
|
|
| <style> |
| body { font-family: Arial, sans-serif; padding: 20px; } |
| #editor_holder { margin-bottom: 20px; } |
| .btn-group-custom { |
| display: flex; |
| justify-content: center; |
| gap: 1rem; |
| margin-top: 3rem; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Team Registration Form</h1> |
| <div id="editor_holder"></div> |
| <div class="btn-group btn-group-custom "> |
| <button id="submit" class="btn btn-primary">Submit</button> |
| <button id="cancel" class="btn btn-error">Cancel</button> |
| </div> |
| <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script> |
| </body> |
|
|
| <script> |
| const schema = { |
| "title": `All the information you provide in the form must be accurate; otherwise, your registration will be rejected. If you are a student participant, please check the "Is Student" box and fill in the relevant information.`, |
| "type": "object", |
| "definitions": { |
| "student": { |
| "type": "object", |
| "id": "student", |
| "properties": { |
| "majar": { |
| "type": "string", |
| "title": "Majar", |
| "minLength": 1, |
| }, |
| "degree": { |
| "type": "string", |
| "title": "Degree", |
| "enum": ["Bachelor", "Master", "PhD"] |
| }, |
| "advising_professor": { |
| "type": "string", |
| "title": "Advising Professo", |
| "minLength": 1, |
| }, |
| "grade": { |
| "type": "string", |
| "title": "Grade", |
| "minLength": 1, |
| }, |
| "expected_graduation_year": { |
| "type": "string", |
| "title": "Expected Graduation Year", |
| "minLength": 1, |
| } |
| } |
| } |
| }, |
| "properties": { |
| "team_name": { |
| "type": "string", |
| "title": "Team Name", |
| "minLength": 1, |
| }, |
| "team_members": { |
| "type": "array", |
| "title": "Team Members", |
| "minItems": 1, |
| "maxItems": 12, |
| "format": "tabs", |
| "items": { |
| "type": "object", |
| "title": "Member", |
| "properties": { |
| "name": { |
| "type": "string", |
| "title": "Name", |
| "minLength": 1 |
| }, |
| "email": { |
| "type": "string", |
| "title": "Email", |
| "format": "email", |
| "minLength": 1 |
| }, |
| "institution": { |
| "type": "string", |
| "title": "Institution", |
| "minLength": 1 |
| }, |
| "student_info": { |
| "title": "Is Student", |
| "oneOf": [ |
| { |
| "title": "no", |
| "type": "null" |
| }, |
| { |
| "title": "yes", |
| "$ref": "#/definitions/student" |
| } |
| ] |
| } |
| } |
| } |
| } |
| } |
| } |
| |
| const editor = new JSONEditor(document.getElementById('editor_holder'), { |
| schema: schema, |
| theme: 'spectre', |
| iconlib: 'fontawesome5', |
| disable_array_delete_all_rows: true, |
| disable_array_delete_last_row: true, |
| disable_collapse: true, |
| disable_edit_json: true, |
| disable_properties: true, |
| disable_array_reorder: true, |
| prompt_before_delete: false, |
| required_by_default: true, |
| array_controls_top: true, |
| remove_button_labels: true, |
| show_errors: "change", |
| }); |
| |
| submitButton = document.getElementById('submit'); |
| cancelButton = document.getElementById('cancel'); |
| |
| submitButton.addEventListener('click', () => { |
| const errors = editor.validate(); |
| editor.showValidationErrors(errors); |
| if (errors.length > 0) { |
| return; |
| } |
| const regsiterData = editor.getValue(); |
| regsiterData.team_members = regsiterData.team_members.map(member => { |
| return { |
| name: member.name, |
| email: member.email, |
| institution: member.institution, |
| is_student: member.student_info !== null, |
| ...member.student_info |
| }; |
| }); |
| |
| submitButton.textContent = "Submitting..."; |
| submitButton.classList.add('disabled'); |
| cancelButton.classList.add('disabled'); |
| fetch('/register', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(regsiterData) }) |
| .then(response => { |
| if (response.status !== 200) { |
| throw new Error('Network response was not ok'); |
| } |
| return response.json(); |
| }) |
| .then(data => { |
| if (data.success) { |
| window.location.href = "/" |
| } else { |
| alert("Registration failed: " + data.response); |
| } |
| }) |
| .finally(() => { |
| setTimeout(() => { |
| submitButton.textContent = "Submit"; |
| submitButton.classList.remove('disabled'); |
| cancelButton.classList.remove('disabled'); |
| }, 2000); |
| }) |
| }); |
| cancelButton.addEventListener('click', () => { |
| window.location.href = "/"; |
| }); |
| </script> |
| </html> |
|
|
