Skip to content

Commit

Permalink
Drag and drop to reorder language options.
Browse files Browse the repository at this point in the history
  • Loading branch information
@liffiton
liffiton committed Jun 21, 2024
1 parent 9916f06 commit 9bc52b8
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 15 deletions.
64 changes: 50 additions & 14 deletions src/codehelp/templates/class_config_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,54 +7,90 @@
<h2 class="title is-size-4">
Queries &amp; Responses
</h2>
{% if not class_config or (class_config.languages and not class_config.default_lang) %}
<p class="is-size-5 mb-2 has-text-danger">[We recommended configuring the language(s) for your class before your students use CodeHelp.]</p>
{% endif %}
<form action="{{ url_for("class_config.set_config") }}" method="post">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Languages:</label>
{% if not class_config or (class_config.languages and not class_config.default_lang) %}
<p class="is-size-5 mb-2 has-text-danger">Please configure the language(s) for your class before your students use CodeHelp.</p>
{% endif %}
<p class="has-text-grey">Add and remove language options, reorder the list, and choose a default that will be pre-selected for students who have not chosen a language previously.</p>
</div>
<div class="field-body">
<script type="text/javascript">
document.addEventListener('alpine:init', () => {
Alpine.data('lang_config', () => ({
languages: {{ class_config.languages | tojson }},
default_lang: {{ class_config.default_lang | tojson }},
new_language: null,
add_language: null,
drag_index: null,

add_lang() {
const newlang = this.new_language;
if (newlang && !this.languages.includes(newlang)) {
this.languages.push(newlang);
this.new_language = null;
const addlang = this.add_language;
if (addlang && !this.languages.includes(addlang)) {
this.languages.push(addlang);
this.add_language = null;
}
}
},
dragenter(index) {
if (this.drag_index === null) { return }
if (index === this.drag_index) { return }
// reorder the list
const origlist = this.languages;
let new_languages = [];
origlist.forEach((el, i) => {
if (i === this.drag_index) { return }
else if (i === index && i < this.drag_index) {
new_languages.push(origlist[this.drag_index]);
new_languages.push(el);
}
else if (i === index && i > this.drag_index) {
new_languages.push(el);
new_languages.push(origlist[this.drag_index]);
}
else {
new_languages.push(el);
}
});
this.languages = new_languages;
this.drag_index = index;
},
}));
});
</script>
<table class="table is-narrow" x-data="lang_config">
<thead>
<tr><th>Default</th><th>Language</th><th class="has-text-grey"><small>remove</small></th></tr>
<tr>
<th class="p-0 has-text-centered has-text-grey" aria-label="Reorder">
<svg aria-hidden="true" class="icon is-small" style="vertical-align: bottom;"><use href="#svg_arrow_up_down" /></svg>
</th>
<th style="min-width: 11em;">Name</th>
<th class="has-text-centered">Default</th>
<th class="has-text-centered has-text-grey"><small>remove</small></th>
</tr>
</thead>
<tbody>
<template x-for="lang in languages" x-bind:key="lang">
<tr>
<template x-for="(lang, index) in languages" x-bind:key="lang">
<tr x-bind:data-index="index" @dragstart="drag_index=index" @dragenter="dragenter(index)" @dragover.prevent @dragend="drag_index=null" @drop="$event.target.closest('tr').draggable=false" x-bind:style="(drag_index == index) && {background: '#fc9'}">
<input type="hidden" name="languages[]" x-bind:value="lang">
<td style="cursor: move; vertical-align: middle; text-align: center;" @mousedown="$event.target.closest('tr').draggable=true" aria-label="drag to reorder">
<svg aria-hidden="true" class="icon is-small"><use href="#svg_grip" /></svg>
</td>
<td x-text="lang"></td>
<td class="has-text-centered">
<input type="radio" name="default_lang" required x-bind:value="lang" x-model="default_lang">
</td>
<td x-text="lang"></td>
<td class="has-text-centered">
<span class="delete mt-1 mb-1" @click="languages = languages.filter(item => item !== lang)"></span>
</td>
</tr>
</template>
<tr>
<td></td>
<td colspan=3>
<div class="field has-addons">
<div class="control">
<input class="input is-small" x-model="new_language" @keydown.enter.prevent="add_lang()">
<input class="input is-small" size=20 x-model="add_language" @keydown.enter.prevent="add_lang()">
</div>
<div class="control">
<button class="button is-success is-small" type="button" @click="add_lang()">add</button>
Expand Down
4 changes: 3 additions & 1 deletion src/gened/templates/icons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,5 +35,7 @@
<symbol id="svg_flask" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"/><path d="M8.5 2h7"/><path d="M7 16h10"/>
</symbol>
<symbol id="svg_plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></symbol>
<symbol id="svg_plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></symbol>
<symbol id="svg_arrow_up_down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 16 4 4 4-4"/><path d="M7 20V4"/><path d="m21 8-4-4-4 4"/><path d="M17 4v16"/></symbol>
<symbol id="svg_grip" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"/><circle cx="19" cy="5" r="1"/><circle cx="5" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/><circle cx="12" cy="19" r="1"/><circle cx="19" cy="19" r="1"/><circle cx="5" cy="19" r="1"/></symbol>
</svg>

0 comments on commit 9bc52b8

Please sign in to comment.