Skip to content

Commit

Permalink
Instructor config: improve drag reorder implementation; improve acces…
Browse files Browse the repository at this point in the history 
…sibility.
  • Loading branch information
@liffiton
liffiton committed Jun 21, 2024
1 parent 9bc52b8 commit ca738eb
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 15 deletions.
27 changes: 15 additions & 12 deletions src/codehelp/templates/class_config_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,25 +35,28 @@ <h2 class="title is-size-4">
dragenter(index) {
if (this.drag_index === null) { return }
if (index === this.drag_index) { return }
// reorder the list
const origlist = this.languages;
// reorder the list, placing the dragged item at this index and shifting others
let new_languages = [];
origlist.forEach((el, i) => {
const drag_item = this.languages[this.drag_index];
this.languages.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(drag_item);
new_languages.push(el);
}
else if (i === index && i > this.drag_index) {
new_languages.push(el);
new_languages.push(origlist[this.drag_index]);
new_languages.push(drag_item);
}
else {
new_languages.push(el);
}
});
this.languages = new_languages;
this.drag_index = index;
this.languages = new_languages; // update w/ newly ordered list
this.drag_index = index; // this new index is now the one we're dragging
},
stop_drag() {
this.drag_index = null;
},
}));
});
Expand All @@ -71,17 +74,17 @@ <h2 class="title is-size-4">
</thead>
<tbody>
<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'}">
<tr x-bind:data-index="index" x-bind:draggable="(drag_index == index)" @dragenter="dragenter(index)" @dragover.prevent @dragend="stop_drag" @drop="stop_drag" 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">
<td style="cursor: move; vertical-align: middle; text-align: center;" @mousedown="drag_index=index" @mouseup="stop_drag" 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">
<input required type="radio" name="default_lang" x-bind:value="lang" x-model="default_lang" aria-label="set default">
</td>
<td class="has-text-centered">
<span class="delete mt-1 mb-1" @click="languages = languages.filter(item => item !== lang)"></span>
<button class="delete mt-1 mb-1" @click="languages = languages.filter(item => item !== lang)" aria-label="remove"></button>
</td>
</tr>
</template>
Expand All @@ -90,7 +93,7 @@ <h2 class="title is-size-4">
<td colspan=3>
<div class="field has-addons">
<div class="control">
<input class="input is-small" size=20 x-model="add_language" @keydown.enter.prevent="add_lang()">
<input class="input is-small" size=20 x-model="add_language" @keydown.enter.prevent="add_lang()" placeholder="New language" aria-label="New language">
</div>
<div class="control">
<button class="button is-success is-small" type="button" @click="add_lang()">add</button>
Expand Down
6 changes: 3 additions & 3 deletions src/gened/templates/instructor_class_config.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ <h2 class="title is-size-4">Access</h2>
<input name="link_reg_active" x-model="link_reg_active" id="link_reg_expires" type="radio" value="date" {% if link_reg_state == "date" %}checked{% endif %}>
Only until:
</label>
<input class="input" name="link_reg_expires" required x-bind:disabled="link_reg_active !== 'date'" type="date" style="width: inherit; vertical-align: baseline;" value="{{ class_row.link_reg_expires if link_reg_state == "date" else "" }}">
<input required class="input" name="link_reg_expires" x-bind:disabled="link_reg_active !== 'date'" type="date" style="width: inherit; vertical-align: baseline;" value="{{ class_row.link_reg_expires if link_reg_state == "date" else "" }}">
<em class="has-text-grey">anywhere on Earth</em>
</div>
<div class="control">
Expand Down Expand Up @@ -180,14 +180,14 @@ <h2 class="title is-size-4 mt-5">Language Model</h2>

<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Model:</label>
<label class="label" for="model_id">Model:</label>
<p class="has-text-grey">Note that GPT-4 produces more accurate results than 3.5 but is also roughly 10 times the cost.</p>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<div class="select">
<select name="model_id" required id="model_id" x-on:change="llm_config_saved=false">
<select required name="model_id" id="model_id" x-on:change="llm_config_saved=false">
<option value="">Please select one</option>
{% for model in models %}
<option value="{{model.id}}" {% if model.id == class_row.model_id %}selected{% endif %}>{{model.name}}</option>
Expand Down

0 comments on commit ca738eb

Please sign in to comment.