-
Notifications
You must be signed in to change notification settings - Fork 321
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[UI] Refactor Banks Page #1652
[UI] Refactor Banks Page #1652
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
<div class="mt-4 mb-4"> | ||
{% include "components/banks/match_form.html.j2" %} | ||
<div class="d-flex mt-5 mb-4 justify-content-end"> | ||
{% include 'components/banks/create_new_bank.html.j2' %} | ||
</div> | ||
</div> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
{# Copyright (c) Meta Platforms, Inc. and affiliates. #} | ||
<button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#{{bank_title}}">Add content</button> | ||
<!-- Modal --> | ||
<div class="modal fade" id="{{bank_title}}" tabindex="-1"> | ||
<div class="modal-dialog modal-dialog-centered modal-xl" style="width: 60%; max-width: none;"> | ||
<div class="modal-content modal-xl" style="padding: 20px"> | ||
<form id="add_content_to_bank_{{ bank_title }}"> | ||
<div class="modal-header"> | ||
<h1 class="modal-title fs-5">Add Content: {{ bank_title }}</h1> | ||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | ||
</div> | ||
<div class="modal-body"> | ||
<div class="row" style="width: 80%"> | ||
<input class="form-control" type="file" name="file" required style="margin-bottom: 20px"> | ||
<select class="form-select" name="content_type" required> | ||
<option selected disabled value="">Select content type</option> | ||
{% for c in content %} | ||
{% if c['enabled'] %} | ||
<option value="{{c['name']}}">{{c['name'].capitalize()}}</option> | ||
{% endif %} | ||
{% endfor %} | ||
</select> | ||
</div> | ||
</div> | ||
<div class="modal-footer"> | ||
<button type="submit" class="btn btn-success">Add</button> | ||
</div> | ||
</form> | ||
<div id="hash_result_{{ bank_title }}"> | ||
<!-- Added to by javascript --> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<script> | ||
|
||
</script> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
{# Copyright (c) Meta Platforms, Inc. and affiliates. #} | ||
<h1>Banks</h1> | ||
<p class="text-secondary">Banks are like folders. You can do the following on this page:</p> | ||
<ul class="text-secondary"> | ||
<li>Create new banks</li> | ||
<li>Add content: Add content to each bank</li> | ||
<li>Search by content: Find banks that contain a certain piece of content</li> | ||
</ul> | ||
Comment on lines
+3
to
+8
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I made this up lol. Someone should come up with better copy to describe these concepts. I think all the pages should have a h1 title and a description There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I agree, and was tempted to give you and @levi-cloudflare a nudge in that direction. I'm fine to land-and-iterate on the content. Why I agree:
|
||
{% include 'components/banks/actions_bar.html.j2' %} | ||
|
||
<div class="row row-cols-1 row-cols-md-4 g-4"> | ||
<table class="table table-hover"> | ||
<thead> | ||
<tr> | ||
<th scope="col">#</th> | ||
<th scope="col">Bank Name</th> | ||
<th scope="col">Matching Enabled Ratio</th> | ||
<th scope="col">Actions</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
{% for bank in bankList %} | ||
<tr id="bank_item_{{bank['name']}}"> | ||
<th scope="row" style="background-color: transparent;">{{ loop.index }}</th> | ||
<td style="background-color: transparent;">{{ bank['name'] }}</td> | ||
<td style="background-color: transparent;">{{ bank['matching_enabled_ratio'] }}</td> | ||
<td style="background-color: transparent;"> | ||
{% with bank_title=bank['name'] %} | ||
{% include 'components/banks/add_to_bank_form.html.j2' %} | ||
{% endwith %} | ||
</td> | ||
</tr> | ||
Comment on lines
+23
to
+32
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. eventually, these will link to their own page with stats and such. Leaving that up to ya'll too |
||
{% endfor %} | ||
</tbody> | ||
|
||
</table> | ||
</div> | ||
<script> | ||
const banksData = [ | ||
{% for bank in bankList %} | ||
{ | ||
name: "{{ bank.name|e }}" | ||
}{% if not loop.last %},{% endif %} | ||
{% endfor %} | ||
]; | ||
|
||
banksData.forEach(function(bank) { | ||
const bankTitle=bank.name; | ||
const addContentModal = document.getElementById(bankTitle); | ||
const addContentToBankForm = document.getElementById("add_content_to_bank_" + bankTitle); | ||
const formContent = addContentToBankForm.innerHTML; | ||
addContentToBankForm.addEventListener("submit", (event) => { | ||
event.preventDefault(); | ||
const formData = new FormData(event.target); | ||
formData.append(event.target.content_type.value, event.target.file.files[0]); | ||
formData.delete("file"); | ||
|
||
fetch(`/c/bank/${bankTitle}/content`, { | ||
method: 'POST', | ||
body: formData | ||
}) | ||
.then(response => response.json()) | ||
.then(data => { | ||
// Handle the response from the server here | ||
renderAddBankResult(data); | ||
|
||
}) | ||
.catch(error => { | ||
console.error('Error:', error); | ||
}); | ||
}) | ||
|
||
|
||
|
||
// reset modal innerHTML | ||
addContentModal.addEventListener('hidden.bs.modal', function () { | ||
addContentToBankForm.innerHTML = formContent; | ||
}); | ||
|
||
const renderAddBankResult = (result) => { | ||
// Render hashes table | ||
const hashTable = HashTable(result); | ||
|
||
// render on HTML | ||
addContentToBankForm.innerHTML = hashTable; | ||
} | ||
|
||
const HashTable = (result) => { | ||
return ` | ||
<div class="modal-header"> | ||
<h3 class="text-success">Success!</h3> | ||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | ||
</div> | ||
<div class="modal-body"> | ||
<h4>Added Hashes:</h4> | ||
<p>Content ID: ${result.id}</p> | ||
<h4>Hash Values:</h4> | ||
<table class="table table-hover" => | ||
<thead> | ||
<tr> | ||
<th>Key</th> | ||
<th>Value</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
${Object.entries(result.signals).map(([key, value]) => ` | ||
<tr> | ||
<td>${key}</td> | ||
<td style="overflow: scroll; max-width: 200px; white-space: no-wrap;">${value}</td> | ||
</tr> | ||
`).join('')} | ||
</tbody> | ||
|
||
</table> | ||
</div> | ||
`; | ||
} | ||
|
||
}); | ||
|
||
</script> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wish this was an icon and not "Add content" but I didn't want to mess around with icon libraries either lol
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Agree - we want to keep things as simple as possible, which sometimes means that things may look a little odd because we are trading off against adding more dependencies or custom styling.