49 lines
3.3 KiB
HTML
49 lines
3.3 KiB
HTML
<div id="workout-note-{{workout_id}}" hx-target="this" hx-swap="outerHTML swap:0.5s" class="animate-fadeIn">
|
|
{% if is_edit|default(false, true) == false %}
|
|
{% if note|length > 0 %}
|
|
<span class="text-base font-normal text-gray-500 whitespace-normal">{{ note | replace('\n', '<br>') | safe }}</span>
|
|
<a class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer"
|
|
hx-get="{{ url_for('get_workout_note_edit_form', person_id=person_id, workout_id=workout_id) }}"
|
|
hx-target="#workout-note-{{workout_id}}">
|
|
Edit
|
|
</a>
|
|
{% else %}
|
|
<a class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer float-none sm:float-right"
|
|
hx-get="{{ url_for('get_workout_note_edit_form', person_id=person_id, workout_id=workout_id) }}"
|
|
hx-target="#workout-note-{{workout_id}}">
|
|
Add note
|
|
</a>
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="flex items-center">
|
|
<textarea
|
|
class="block ml-1 p-2.5 w-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 overflow-y-hidden"
|
|
_="on load set my.style.height to my.scrollHeight + 'px'
|
|
on input set my.style.height to 0 then set my.style.height to my.scrollHeight + 'px'"
|
|
placeholder="Your note..." name="note">{{ note }}</textarea>
|
|
<div class="flex flex-col">
|
|
<button
|
|
class="inline-flex justify-center p-2 text-blue-600 rounded-full cursor-pointer hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-gray-600"
|
|
hx-get="{{ url_for('get_workout_note', person_id=person_id, workout_id=workout_id) }}"
|
|
hx-target="#workout-note-{{workout_id}}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
<span class="sr-only">Cancel</span>
|
|
</button>
|
|
<button
|
|
class="inline-flex justify-center p-2 text-blue-600 rounded-full cursor-pointer hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-gray-600"
|
|
hx-put="{{ url_for('update_workout_note', person_id=person_id, workout_id=workout_id) }}"
|
|
hx-include="[name='note']">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
|
|
</svg>
|
|
<span class="sr-only">Save note</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div> |