|
|
<!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> |
|
|
|
