Skip to content

Commit

Permalink
fix reload on edit
Browse files Browse the repository at this point in the history
  • Loading branch information
@clarksonator
clarksonator committed Nov 26, 2024
1 parent dc00dda commit d7931d4
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 61 deletions.
99 changes: 62 additions & 37 deletions app/views/layouts/_memo.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,64 @@
<div class="card" >
<div class="card-content viewMemo">
<div class="content">
<%= raw renderMarkdown(memo.body) %>
<% if memo.attachment != nil && memo.attachment != 0 %>
<div id="modal1" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<p class="image is-1by1">
<img src="data:image/png;base64,<%= memo.attachment %>" style="width:auto;height:auto" />
</p>
</div>
<button class="modal-close is-large" aria-label="close" />
</div>
<img src="data:image/png;base64,<%= memo.attachment %>" style="width:200px" onclick="openModal();" />
<% end %>
<div id="memo">
<div class="card">
<div class="card-content viewMemo">
<div class="content">
<%= raw renderMarkdown(memo.body) %>
<% if memo.attachment != nil && memo.attachment != 0 %>
<div id="modal1" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<p class="image is-1by1">
<img
src="data:image/png;base64,<%= memo.attachment %>"
style="width:auto;height:auto"
/>
</p>
</div>
<button class="modal-close is-large" aria-label="close"/>
</div>
</div>
<div class="card-content updateMemo" data-url="<%= memo_path(memo.id) %>" >
<div class="content">
<input type="hidden"><textarea id="editMemoTA" class="textarea"><%= memo.body %></textarea></input>
<% if memo.attachment != nil && memo.attachment != 0 %>
<img src="data:image/png;base64,<%= memo.attachment %>" style="width:200px" onclick="openModal();" />
<% end %>
</div>
</div>
<footer class="card-footer">
<div class="card-footer-item left">
<button id="editMemo" class="button left" style="background-color:var(--ctp-frappe-peach);color:black;" ><i class="fa-regular fa-pen-to-square"></i></button>
<button id="saveMemo" class="button left" style="background-color:var(--ctp-frappe-blue);color:black;" ><i class="fa-regular fa-floppy-disk"></i></button>
<button id="cancelEdit" class="button left" style="background-color:var(--ctp-frappe-maroon);color:black;" ><i class="fa-solid fa-ban"></i></button>
</div>
<div class="card-footer-item right">
<%= button_to memo_path(memo), :action => "destroy", :method => :delete, :class => "button right is-danger", data: { turbo_confirm: "Are you sure you want to delete?" } do %>
<i class="fa-regular fa-trash-can"></i>
<% end %>
</div>
</footer>
<img
src="data:image/png;base64,<%= memo.attachment %>"
style="width:200px"
onclick="openModal();"
/>
<% end %>
</div>
</div>
<div class="card-content updateMemo" data-url="<%= memo_path(memo.id) %>">
<div class="content">
<textarea id="editMemoTA" class="textarea"><%= memo.body %></textarea>
<% if memo.attachment != nil && memo.attachment != 0 %>
<img
src="data:image/png;base64,<%= memo.attachment %>"
style="width:200px"
onclick="openModal();"
/>
<% end %>
</div>
</div>
<footer class="card-footer">
<div class="card-footer-item left">
<button
id="editMemo"
class="button left"
style="background-color:var(--ctp-frappe-peach);color:black;"
><i class="fa-regular fa-pen-to-square"></i></button>
<button
id="saveMemo"
class="button left"
style="background-color:var(--ctp-frappe-blue);color:black;"
><i class="fa-regular fa-floppy-disk"></i></button>
<button
id="cancelEdit"
class="button left"
style="background-color:var(--ctp-frappe-maroon);color:black;"
><i class="fa-solid fa-ban"></i></button>
</div>
<div class="card-footer-item right">
<%= button_to memo_path(memo), :action => "destroy", :method => :delete, :class => "button right is-danger", data: { turbo_confirm: "Are you sure you want to delete?" } do %>
<i class="fa-regular fa-trash-can"></i>
<% end %>
</div>
</footer>
</div>
</div>
45 changes: 21 additions & 24 deletions app/views/memos/index.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,18 @@
<% if user_signed_in? %>
<%= csrf_meta_tag %>
<script>
<%= csrf_meta_tag %>
<script>
function openModal() {
document.getElementById("modal1")
.classList.add("is-active");
}
</script>
<% require 'markdown_checkboxes'

#markdown = CheckboxMarkdown.new(CustomRender, autolink: true, tables: true, fenced_code_blocks: true)
#markdown = Redcarpet::Markdown.new(CustomRender, fenced_code_blocks: true)
%>
<div style="margin: 0 auto;width: 800px; height: 100%">
<%= render "layouts/new" %>
<% current_user.memos.each do |memo| %>
<%= render :partial => "layouts/memo", :object => memo %>
<% end %>
</div>
<script>
</script>
<div style="margin: 0 auto;width: 800px; height: 100%">
<%= render "layouts/new" %>
<% current_user.memos.each do |memo| %>
<%= render partial: "layouts/memo", object: memo %>
<% end %>
</div>
<script>
document.querySelectorAll('.modal-background, .modal-close,.modal-card-head .delete, .modal-card-foot .button').forEach(($el) => {const $modal = $el.closest('.modal');$el.addEventListener('click', () => {$modal.classList.remove("is-active");});});

$("#editMemo").on("click", function() {
Expand All @@ -41,14 +36,16 @@
var url = card.children(".updateMemo").data('url');
var body = card.find("#editMemoTA").val();
$.ajax({
url: url,
beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
data: "memo%5Bbody%5D="+encodeURIComponent(body),
type: 'PUT',
success: function(result) {
console.log(result);
}
});
url: url,
beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
data: "memo%5Bbody%5D="+encodeURIComponent(body),
dataType: "html",
type: 'PUT',
success: function(result) {
var memoDiv = card.parents("#memo");
memoDiv.replaceWith(result);
}
});
});
</script>
</script>
<% end %>

0 comments on commit d7931d4

Please sign in to comment.