Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

532 UI restyle consent action on digitize before uploading sketchmaps #535

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

532 UI restyle consent action on digitize before uploading sketchmaps #535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e0c0955
refactor: restyle-consent-action
mcauer Feb 21, 2025
6bfdc32
refactor: replace consent checkbox by a hidden form field
mcauer Feb 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 38 additions & 3 deletions client-src/digitize/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ form {
.filebokz {
--color: var(--primary);

padding: 2rem;
padding: 2rem 2rem 1rem;
}

.filebokz label {
Expand Down Expand Up @@ -38,8 +38,43 @@ form {
display: inline !important;
}


#data-protection-section {
display: flex;
flex-direction: column;
align-items: center;

& .h1 {
margin-bottom: 1rem;
margin-top: 0;
}

& p#motif {
max-width: 80ch;
}
}


#main-grid {
background: linear-gradient(#000, #000) center/2px 100% no-repeat;
grid-template-columns: 1fr 3rem 1fr;
justify-items: center;
align-items: center;
padding: 1rem 3rem 0;
margin-bottom: 2rem;

& div.text-content {
max-width: 40ch;
}
}

button {
display: inline;
width: fit-content;
min-width: 30%;
}

#or {
font-size: larger;
background-color: white;
color: var(--heigit-red);
position: relative;
}
44 changes: 33 additions & 11 deletions client-src/digitize/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,35 +8,57 @@ import { setDisabled, setIsBusy } from "../shared";
// initialize the drag and drop enabled file-uploader
filebokz();

// disable submit...
setDisabled("submitBtn", true);
// initialize consent to be on reject
const consentField = document.getElementById("consent");
consentField.value = "False";

const consentCheckbox = document.getElementById("consent");
// disable submit...
setDisabled("agreeSubmitBtn", true);
setDisabled("rejectSubmitBtn", true);

// ...until files are added
const fileElement = document.querySelector(".filebokz");
fileElement.addEventListener("file-added", () => {
setDisabled("submitBtn", false);
setDisabled("agreeSubmitBtn", false);
setDisabled("rejectSubmitBtn", false);
});

// disable it again when all files are removed
fileElement.addEventListener("file-removed", (e) => {
if (!e.target.classList.contains("has-files")) {
setDisabled("submitBtn", true);
setDisabled("agreeSubmitBtn", true);
setDisabled("rejectSubmitBtn", true);
}
});

// disable the submit button after submit to prevent multiple submissions
document.forms.namedItem("upload").onsubmit = () => {
setDisabled("submitBtn", true);
setIsBusy("submitBtn", true);
document.forms.namedItem("upload").onsubmit = (event) => {
// disable the submit button after submit to prevent multiple submissions
setDisabled("agreeSubmitBtn", true);
setDisabled("rejectSubmitBtn", true);

// get the button which triggered the form submit
const buttonId = event.submitter.id;

// set the button that was pushed to be busy
setIsBusy(buttonId, true);

const consentDescisionMap = {
agreeSubmitBtn: "True",
rejectSubmitBtn: "False",
};

// set the consent value to the form field
consentField.value = consentDescisionMap[buttonId];
};

// In case the page is newly loaded, reset the upload button, the spinner, and the upload field.
// This prevents unexpected behaviour when clicking the back button after an upload.
window.addEventListener("pageshow", () => {
setDisabled("submitBtn", true);
setIsBusy("submitBtn", false);
consentField.checked = false;
setDisabled("agreeSubmitBtn", true);
setDisabled("rejectSubmitBtn", true);
setIsBusy("agreeSubmitBtn", false);
setIsBusy("rejectSubmitBtn", false);

// Remove all previously selected files. The used file selector (filebokz) seems not to
// provide a working solution to remove all selected files at once.
Expand Down
6 changes: 4 additions & 2 deletions sketch_map_tool/routes.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,8 +209,10 @@ def digitize(lang="en") -> str:
@app.post("/<lang>/digitize/results")
def digitize_results_post(lang="en") -> Response:
"""Upload files to create geodata results"""
# "consent" is a checkbox and value is only send if it is checked
consent: bool = "consent" in request.form.keys()
# user consent to use uploaded files for service improvement
consent: bool = False
if request.form["consent"] is "True":
consent = True
Comment on lines +213 to +215
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
consent: bool = False
if request.form["consent"] is "True":
consent = True
if request.form["consent"] == "True":
consent = True
else:
consent = False

For string comparison, use == instead of is. The latter is only used for comparison of bool and None (E.g. consent is None).

The if-else is just personal preference.

# No files uploaded
if "file" not in request.files:
return redirect(url_for("digitize", lang=lang))
Expand Down
40 changes: 32 additions & 8 deletions sketch_map_tool/templates/digitize.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,40 @@
<span class="info">{{ _('Files:') }} <span class="file-count"></span> (<span
class="size"></span>)&nbsp;&nbsp;&nbsp; {{ _('Max total size: 500 MB') }}</span>
</div>
<div>
<p>
{{ _(' Files are stored for processing until the results are generated.') }}
</p>
<p>
<input type="checkbox" id="consent" name="consent" value="True">
<label for="consent">{{ _('Enable us to keep the uploaded files beyond processing to further improve this service.') }}</label>
<div id="data-protection-section">
<div class="sketchy h1 center-text">{{ _('Help us to improve the Sketch Map Tool for everyone') }}</div>
<p id="motif">
{{ _('To train and improve the sketch detection algorithms,
we do need your real use-case data and would like to ask for your permission
to keep the uploaded files after processing.') }}
</p>
<input type="hidden" id="consent" name="consent" value="False">
<div id="main-grid" class="grid">

{# row 1#}
<button id="agreeSubmitBtn" type="submit">{{ _('Agree & Upload') }}</button>
<div id="or">{{ _('OR') }}</div>
<button id="rejectSubmitBtn" type="submit">{{ _('Reject & Upload') }}</button>

{# row 2#}
<div class="text-content">
{{ _('If you agree, we would keep your data internally to use it as training and
test data to improve the Sketch Map Tool.') }}
</div>
<div></div>
<div class="text-content">
{{ _("If you don't agree, your files are ONLY stored for processing for a short time
until your results are generated.") }}
</div>
</div>
<div>
{{ _('Read more info on') }}
<a target="_blank" href="{{ url_for('help', lang=lang) }}#data-sharing-for-improvement">
{{ _('Share your data for the Improvement of the Sketch Map Tool') }}</a>
</div>

</div>
<button id="submitBtn" type="submit" class="">{{ _('Upload') }}</button>
{# <button id="submitBtn" type="submit" class="">{{ _('Upload') }}</button>#}
</form>
<script>

Expand Down
Loading