You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

302 lines
16 KiB
Go

package pages
import "fmt"
func MainFormPage(jwtToken string) string {
return fmt.Sprintf(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Faculty Activity Report</title>
<link rel="stylesheet" href="https://unpkg.com/rivet-core@2/css/rivet.min.css">
<script>var JWT = "%s";</script>
</head>
<body>
<header class="rvt-header-wrapper">
<a class="rvt-header-wrapper__skip-link" href="#main-content">Skip to main content</a>
<div class="rvt-header-global">
<div class="rvt-container-xl">
<div class="rvt-header-global__inner">
<div class="rvt-header-global__logo-slot">
<a class="rvt-lockup" href="/">
<div class="rvt-lockup__tab">
<svg xmlns="http://www.w3.org/2000/svg" class="rvt-lockup__trident" viewBox="0 0 28 34">
<path d="M-3.34344e-05 4.70897H8.83308V7.174H7.1897V21.1426H10.6134V2.72321H8.83308V0.121224H18.214V2.65476H16.2283V21.1426H19.7889V7.174H18.214V4.64047H27.0471V7.174H25.0614V23.6761L21.7746 26.8944H16.2967V30.455H18.214V33.8787H8.76463V30.592H10.6819V26.8259H5.20403L1.91726 23.6077V7.174H-3.34344e-05V4.70897Z" fill="currentColor"></path>
</svg>
</div>
<div class="rvt-lockup__body">
<span class="rvt-lockup__title">Maurer School of Law</span>
<span class="rvt-lockup__subtitle">Faculty Public Activity Report</span>
</div>
</a>
</div>
</div>
</div>
</div>
</header>
<main id="main-content" class="rvt-container-xl rvt-p-top-xxl rvt-p-bottom-xxl">
<!-- Input view -->
<div id="input-view">
<h1 class="rvt-ts-xxl rvt-m-bottom-xxl">Faculty Public Activity Report</h1>
<p>The Faculty Public Activity Report portal is a way for you to keep the school up to date with your recent scholarship, talks, media appearances and other activities related to your academic career. Below you will find three categories of input form: <strong>Scholarship</strong> &mdash; for academic papers, articles and other publications&semi; <strong>Talks and Activities</strong> &mdash; for conference talks and other public appearances&semi; <strong>Media Appearances</strong> &mdash; for media interviews, profiles and other reports that feature your work. To add an item, simply type in the fields in the relevant section. A button labeled "Save Item" will appear. Click this button when you are finished to add it to the list. You may edit or remove items at any time. Click the "Review and Submit" button to see the final list and submit it to the Associate Dean for Research and Faculty Affairs. Thank you for keeping us informed!</p>
<form method="post" id="report-form">
<!-- Scholarship -->
<fieldset class="rvt-fieldset rvt-m-bottom-xxl">
<legend class="rvt-ts-xl rvt-m-bottom-sm">Scholarship</legend>
<p class="rvt-m-bottom-lg">Please enter citations for recent publications here:</p>
<div class="section-summary rvt-m-bottom-lg" style="display:none"></div>
<div class="rvt-m-bottom-lg">
<label class="rvt-label" for="scholarship-citation">Citation:</label>
<textarea class="rvt-input" id="scholarship-citation" name="scholarship_citation" rows="5"></textarea>
</div>
<div class="rvt-m-bottom-lg">
<label class="rvt-label" for="scholarship-hyperlink">Hyperlink (if available):</label>
<input class="rvt-input" type="url" id="scholarship-hyperlink" name="scholarship_hyperlink">
</div>
<div class="section-save-btn" style="display:none">
<button class="rvt-button rvt-button--secondary" type="button">Save Item</button>
</div>
</fieldset>
<!-- Talks and Activities -->
<fieldset class="rvt-fieldset rvt-m-bottom-xxl">
<legend class="rvt-ts-xl rvt-m-bottom-sm">Talks and Activities</legend>
<p class="rvt-m-bottom-lg">Please tell us about any recent talks and activities here:</p>
<div class="section-summary rvt-m-bottom-lg" style="display:none"></div>
<div class="rvt-m-bottom-lg">
<label class="rvt-label" for="talks-title">Title:</label>
<input class="rvt-input" type="text" id="talks-title" name="talks_title">
</div>
<div class="rvt-m-bottom-lg">
<label class="rvt-label" for="talks-description">Description:</label>
<textarea class="rvt-input" id="talks-description" name="talks_description" rows="5"></textarea>
</div>
<div class="rvt-m-bottom-lg">
<label class="rvt-label" for="talks-hyperlink">Hyperlink (if available):</label>
<input class="rvt-input" type="url" id="talks-hyperlink" name="talks_hyperlink">
</div>
<div class="section-save-btn" style="display:none">
<button class="rvt-button rvt-button--secondary" type="button">Save Item</button>
</div>
</fieldset>
<!-- Media Appearances -->
<fieldset class="rvt-fieldset rvt-m-bottom-xxl">
<legend class="rvt-ts-xl rvt-m-bottom-sm">Media Appearances</legend>
<p class="rvt-m-bottom-lg">Please tell us about any recent media appearances you have made:</p>
<div class="section-summary rvt-m-bottom-lg" style="display:none"></div>
<div class="rvt-m-bottom-lg">
<label class="rvt-label" for="media-title">Title:</label>
<input class="rvt-input" type="text" id="media-title" name="media_title">
</div>
<div class="rvt-m-bottom-lg">
<label class="rvt-label" for="media-description">Description:</label>
<textarea class="rvt-input" id="media-description" name="media_description" rows="5"></textarea>
</div>
<div class="rvt-m-bottom-lg">
<label class="rvt-label" for="media-hyperlink">Hyperlink (if available):</label>
<input class="rvt-input" type="url" id="media-hyperlink" name="media_hyperlink">
</div>
<div class="section-save-btn" style="display:none">
<button class="rvt-button rvt-button--secondary" type="button">Save Item</button>
</div>
</fieldset>
<button class="rvt-button" type="button" id="review-btn">Review and Submit</button>
</form>
</div>
<!-- Review view -->
<div id="review-view" style="display:none">
<h1 class="rvt-ts-xxl rvt-m-bottom-lg">Review Your Submission</h1>
<p class="rvt-m-bottom-xxl">These are the items you have entered. If you would like to edit or remove any of these items, click on &#8220;Return to Input&#8221;. If you are satisfied with them and would like to submit them to the Associate Dean for Research and Faculty Affairs, please click &#8220;Submit&#8221;.</p>
<div id="review-content" class="rvt-m-bottom-xxl"></div>
<div style="display:flex; gap:1rem; flex-wrap:wrap;">
<button class="rvt-button rvt-button--secondary" type="button" id="return-btn">Return to Input</button>
<button class="rvt-button" type="button" id="submit-btn">Submit</button>
</div>
</div>
<!-- Confirmation view -->
<div id="confirm-view" style="display:none">
<h1 class="rvt-ts-xxl rvt-m-bottom-lg">Thank You!</h1>
<p class="rvt-ts-lg">Thank you for keeping us up to date! Your items have been submitted for review. If you have questions, concerns or additional information to provide, please contact the Associate Dean for Research and Faculty Affairs.</p>
</div>
</main>
<script src="https://unpkg.com/rivet-core@2/js/rivet.min.js"></script>
<script type="module" src="https://unpkg.com/rivet-icons@3/dist/rivet-icons.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Per-fieldset save item behavior
document.querySelectorAll('fieldset').forEach(function(fieldset) {
var fields = fieldset.querySelectorAll('input, textarea');
var saveBtnWrapper = fieldset.querySelector('.section-save-btn');
var summaryArea = fieldset.querySelector('.section-summary');
function hasAnyContent() {
return Array.prototype.some.call(fields, function(f) {
return f.value.trim() !== '';
});
}
fields.forEach(function(field) {
field.addEventListener('blur', function() {
if (saveBtnWrapper) {
saveBtnWrapper.style.display = hasAnyContent() ? 'block' : 'none';
}
});
});
if (saveBtnWrapper) {
saveBtnWrapper.querySelector('button').addEventListener('click', function() {
var savedValues = {};
fields.forEach(function(field) {
savedValues[field.id] = field.value.trim();
});
var itemDiv = document.createElement('div');
itemDiv.style.cssText = 'display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid #ddd; padding-bottom:0.5rem; margin-bottom:0.5rem;';
var contentDiv = document.createElement('div');
contentDiv.className = 'item-content';
fields.forEach(function(field) {
var value = savedValues[field.id];
if (!value) return;
var label = fieldset.querySelector('label[for="' + field.id + '"]');
var labelText = label ? label.textContent : field.name;
var p = document.createElement('p');
p.className = 'rvt-m-bottom-xxs';
var strong = document.createElement('strong');
strong.textContent = labelText + ' ';
p.appendChild(strong);
p.appendChild(document.createTextNode(value));
contentDiv.appendChild(p);
});
var iconBtnStyle = 'background:none; border:none; cursor:pointer; padding:0; flex-shrink:0; margin-left:0.5rem;';
var pencilBtn = document.createElement('button');
pencilBtn.type = 'button';
pencilBtn.setAttribute('aria-label', 'Edit item');
pencilBtn.style.cssText = iconBtnStyle + ' color:#555;';
var pencilIcon = document.createElement('rvt-icon');
pencilIcon.setAttribute('name', 'pencil-solid');
pencilBtn.appendChild(pencilIcon);
pencilBtn.addEventListener('click', function() {
fields.forEach(function(field) {
field.value = savedValues[field.id] || '';
});
itemDiv.remove();
if (summaryArea.children.length === 0) {
summaryArea.style.display = 'none';
}
saveBtnWrapper.style.display = 'block';
});
var deleteBtn = document.createElement('button');
deleteBtn.type = 'button';
deleteBtn.setAttribute('aria-label', 'Remove item');
deleteBtn.style.cssText = iconBtnStyle + ' color:#c00;';
var trashIcon = document.createElement('rvt-icon');
trashIcon.setAttribute('name', 'trash-solid');
deleteBtn.appendChild(trashIcon);
deleteBtn.addEventListener('click', function() {
itemDiv.remove();
if (summaryArea.children.length === 0) {
summaryArea.style.display = 'none';
}
});
var iconGroup = document.createElement('div');
iconGroup.style.cssText = 'display:flex; align-items:center; flex-shrink:0; margin-left:1rem;';
iconGroup.appendChild(pencilBtn);
iconGroup.appendChild(deleteBtn);
itemDiv.appendChild(contentDiv);
itemDiv.appendChild(iconGroup);
summaryArea.appendChild(itemDiv);
summaryArea.style.display = 'block';
fields.forEach(function(f) { f.value = ''; });
saveBtnWrapper.style.display = 'none';
});
}
});
// Review and Submit button
document.getElementById('review-btn').addEventListener('click', function() {
var reviewContent = document.getElementById('review-content');
reviewContent.innerHTML = '';
document.querySelectorAll('fieldset').forEach(function(fieldset) {
var summaryArea = fieldset.querySelector('.section-summary');
if (!summaryArea || summaryArea.children.length === 0) return;
var legend = fieldset.querySelector('legend');
var sectionName = legend ? legend.textContent.trim() : '';
var sectionDiv = document.createElement('div');
sectionDiv.className = 'rvt-m-bottom-xl';
var heading = document.createElement('h2');
heading.className = 'rvt-ts-lg rvt-m-bottom-md';
heading.textContent = sectionName;
sectionDiv.appendChild(heading);
Array.prototype.forEach.call(summaryArea.children, function(itemDiv) {
var contentDiv = itemDiv.querySelector('.item-content');
if (!contentDiv) return;
var clone = contentDiv.cloneNode(true);
clone.style.cssText = 'border-bottom:1px solid #ddd; padding-bottom:0.5rem; margin-bottom:0.5rem;';
sectionDiv.appendChild(clone);
});
reviewContent.appendChild(sectionDiv);
});
document.getElementById('input-view').style.display = 'none';
document.getElementById('review-view').style.display = 'block';
});
// Return to Input button
document.getElementById('return-btn').addEventListener('click', function() {
document.getElementById('review-view').style.display = 'none';
document.getElementById('input-view').style.display = 'block';
});
// Submit button
document.getElementById('submit-btn').addEventListener('click', function() {
document.getElementById('review-view').style.display = 'none';
document.getElementById('confirm-view').style.display = 'block';
});
});
</script>
</body>
</html>`, jwtToken)
}