Skip to content

Commit

Permalink
Cooperative edit
Browse files Browse the repository at this point in the history 
Signed-off-by: spetrovi <samuel.petrovic.sk@gmail.com>
  • Loading branch information
@spetrovi
spetrovi committed Oct 28, 2024
1 parent 9dd1d75 commit f71b71d
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 34 deletions.
19 changes: 19 additions & 0 deletions app/main.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -324,3 +324,22 @@ def get_song_editor(
"song_editor.html",
{"song": song, "metadata": metadata, "rows": 20, "songedit_id": songedit_id},
)


@app.get("/transcript_queue", response_class=HTMLResponse)
@login_required
def transcript_queue(request: Request, session: Session = Depends(db.yield_session)):
# give me songedits
songs = session.exec(
select(SongEdit).where(SongEdit.user_id == request.user.username)
).all()
# Extract unique folders
unique_folders = {str(Path(song.img_src_path).parent) for song in songs}
folders = list(unique_folders)

return render(
request,
"transcript_queue.html",
{"songs": songs, "folders": folders},
status_code=200,
)
1 change: 1 addition & 0 deletions app/templates/admin/transcript_queue.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ <h2 class="accordion-header" id="headingOne">
</div>
<div class="card-body">
<img src="/{{song.img_src_path}}" width="100px" height="200px">
<p>Current user: {{song.user_id}}</p>
</div>
<div class="card-footer">
<a href="/song_editor/{{song.id}}" class="btn btn-primary">Edit</a>
Expand Down
3 changes: 3 additions & 0 deletions app/templates/snippets/nav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/transcript_queue">Transcript</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
Expand Down
93 changes: 59 additions & 34 deletions app/templates/song_editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,64 +103,89 @@ <h5 class="card-title">Score</h5>
</div>
<img id="dynamicImage" src="/tmp/editor/{{songedit_id}}/source.cropped{% if theme == "dark" %}.dark{% endif %}.png"/>
</div>
</div>
<div class="container mt-5">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Help
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>For changing time inside score, write <code>\time 4/4</code>. For changing time in the beginning, please use form above</p>
<p>For tuplet (triola) write <code>\tuplet 2/3 {a8 g8 g8} </code></p>
<p>For bowing, use ( for beginning and ) for end of the bow, e.g. <code>a4( b8)</code></p>
<p>For after grace, use <code>\afterGrace a4 {\once \omit Flag.stroke=grace e8) }</code></p>
<p>For repetition, enclose the repeated block like this \repeat volta 2 {a4 b8 c8}</p>
<p>For linebreak, use <code>\break</code>. Please break according to the score</p>
<p>For rest, write r with duration, e.g <code>r4 r8 r16</code></p>
<p>Please use english notation for h and b, i.e. b and bes<p>
</div>
</div>
</div>
</div>
</div>

</div>

<div class="card my-5">
<div class="card-header">
<h2>Verses</h2>
</div>

</div>

<div class="card my-5">
<div class="card-header">
<h2>Verses</h2>
</div>
<div class="card-body">
<form hx-post="/song_editor/update_verses" hx-trigger="keyup delay:500ms" hx-target="this" hx-swap="none" id="versesForm">
<input type='hidden' name='songedit_id' value='{{songedit_id}}'/>
<textarea class="form-control" name="verses" rows="{{rows}}" style="min-width:500px; max-width:100%; min-height:50px; height:100%; width:100%;">{% if song.verses %}{{song.verses}}{% endif %}</textarea>
</form>
</div>
</div>
</div>
<div class="card-body">
<form hx-post="/song_editor/update_verses" hx-trigger="keyup delay:500ms" hx-target="this" hx-swap="none" id="versesForm">
<input type='hidden' name='songedit_id' value='{{songedit_id}}'/>
<textarea class="form-control" name="verses" rows="{{rows}}" style="min-width:500px; max-width:100%; min-height:50px; height:100%; width:100%;">{% if song.verses %}{{song.verses}}{% endif %}</textarea>
</form>
<div class="col col-md-6">
<img src="/{{song.img_src_path}}" class="sticky-top" width=500px>
</div>

</div>
</div>
<div class="col col-md-6">
<img src="/{{song.img_src_path}}" class="sticky-top" width=500px>
</div>

</div>
</div>




<script>
<script>

document.addEventListener('htmx:afterRequest', (event) => {
refreshImage();
});
function refreshImage() {
const resultImg = document.getElementById('dynamicImage');
document.addEventListener('htmx:afterRequest', (event) => {
refreshImage();
});
function refreshImage() {
const resultImg = document.getElementById('dynamicImage');

// Get the current src value of the image
let currentSrc = resultImg.getAttribute('src');
let currentSrc = resultImg.getAttribute('src');

// Remove any existing timestamp from the URL
currentSrc = currentSrc.split('?')[0];
currentSrc = currentSrc.split('?')[0];

// Append a unique timestamp to force reload of the image
const timestamp = new Date().getTime();
const newSrc = `${currentSrc}?t=${timestamp}`;
const timestamp = new Date().getTime();
const newSrc = `${currentSrc}?t=${timestamp}`;

// Set a delay to allow the backend to update the image

console.log('Reloading image after delay...');
console.log('Reloading image after delay...');

// Preload the image to avoid flicker
const preloadedImg = new Image();
preloadedImg.src = newSrc;
const preloadedImg = new Image();
preloadedImg.src = newSrc;

preloadedImg.onload = function() {
preloadedImg.onload = function() {
// Once the image is preloaded, replace the displayed image
resultImg.src = newSrc;
};
resultImg.src = newSrc;
};


}
</script>
}
</script>
{% endblock %}
47 changes: 47 additions & 0 deletions app/templates/transcript_queue.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
{% extends "base.html" %}

{% block content %}


<div class="accordion" id="accordionExample">
{% for folder in folders %}:
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
{{folder}}
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="container d-grid mx-3">
<div class="row">
{% for song in songs %}
{% if folder in song.img_src_path %}
<div class="col-auto">
<div class="card my-3">
<div class="card-header">
{{song.img_src_path}}
</div>
<div class="card-body">
<img src="/{{song.img_src_path}}" width="100px" height="200px">
</div>
<div class="card-footer">
<a href="/song_editor/{{song.id}}" class="btn btn-primary">Edit</a>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>





{% endblock %}

0 comments on commit f71b71d

Please sign in to comment.