Skip to content

Commit

Permalink
refactor-bank-grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@deannaflare
deannaflare committed Oct 3, 2024
1 parent f45282b commit d94b31b
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 95 deletions.
113 changes: 31 additions & 82 deletions hasher-matcher-actioner/src/OpenMediaMatch/templates/components/add_to_bank_form.html.j2
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,38 @@
{# Copyright (c) Meta Platforms, Inc. and affiliates. #}
<h3> Add Content to Bank</h3>
<form id="add_content_to_bank">
<div class="row">
<div class="col">
<input class="form-control" type="file" name="file" required>
</div>
<div class="col">
<select class="form-select" name="bank_name" required>
<option selected disabled value="">Select bank</option>
{% for b in bankList %}
<option value="{{b['name']}}">{{b['name']}}</option>
{% endfor %}
</select>
</div>
<div class="col">
<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 class="col">
<button type="submit" class="btn btn-primary">Submit</button>
<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: 10px">
<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-primary">Submit</button>
</div>
</form>
<div id="hash_result_{{ bank_title }}">
<!-- Added to by javascript -->
</div>
</div>
</div>
</form>
<div id="content_result">
<!-- Added to by javascript -->
</div>
<script>
const add_content_to_bank_form = document.getElementById("add_content_to_bank");
const content_result = document.getElementById("content_result");
add_content_to_bank_form.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/${event.target.bank_name.value}/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);
});
})
const renderAddBankResult = (result) => {
const hashHeader = `
<h4>Added Hashes:</h4>
<p>Content ID: ${result.id}</p>
`;
// Render hashes table
const hashesTableHTML = renderHashTable(result.signals);
// render on HTML
content_result.innerHTML = hashHeader + hashesTableHTML;
}
const renderHashTable = (hashes) => {
return `
<h3>Hash Values:</h3>
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
${Object.entries(hashes).map(([key, value]) => `
<tr>
<td>${key}</td>
<td>${value}</td>
</tr>
`).join('')}
</table>
`;
}
</script>
116 changes: 104 additions & 12 deletions hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks_grid.html.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,31 @@
</form>
</div>
<div class="row row-cols-1 row-cols-md-4 g-4">
{% for b in bankList %}
<div class="col">
<div class="card">
<div class="card-header bg-info">
<h5 class="my-0 fw-normal">{{b['name']}}</h4>
</div>
<div class="card-body">
<p class="card-text">We'll add stats here later.</p>
</div>
</div>
</div>
{% endfor %}
<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>
<th scope="row">{{ loop.index }}</th>
<td>{{ bank['name'] }}</td>
<td>{{ bank['matching_enabled_ratio'] }}</td>
<td>
{% with bank_title=bank['name'] %}
{% include 'components/add_to_bank_form.html.j2' with context %}
{% endwith %}
</td>
</tr>
{% endfor %}
</tbody>

</table>
</div>
<script>
document.getElementById('create_bank_bank_name').addEventListener('blur', function() {
Expand Down Expand Up @@ -67,4 +80,83 @@
});
})
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 add_content_modal = document.getElementById(bankTitle);
const add_content_to_bank_form = document.getElementById("add_content_to_bank_" + bankTitle);
const content_result = document.getElementById("hash_result_" + bankTitle);
add_content_to_bank_form.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 hash innerHTML
add_content_modal.addEventListener('hidden.bs.modal', function () {
content_result.innerHTML = ""
});
const renderAddBankResult = (result) => {
const hashHeader = `
<h4>Added Hashes:</h4>
<p>Content ID: ${result.id}</p>
`;
// Render hashes table
const hashesTableHTML = renderHashTable(result.signals);
// render on HTML
content_result.innerHTML = hashHeader + hashesTableHTML;
}
const renderHashTable = (hashes) => {
return `
<h3>Hash Values:</h3>
<table class="table table-hover">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
${Object.entries(hashes).map(([key, value]) => `
<tr>
<td>${key}</td>
<td>${value}</td>
</tr>
`).join('')}
</tbody>
</table>
`;
}
});
</script>
2 changes: 1 addition & 1 deletion ...er-matcher-actioner/src/OpenMediaMatch/templates/components/create_exchange_modal.html.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<div class="modal-content">
<form id="exchange_create_form">
<div class="modal-header">
<h1 class="modal-title fs-5" id="createExchangeLabel">Create Exchange</h1>
<h1 class="modal-title fs-5" id="createExchangeLabel">{{bank.name}}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Expand Down

0 comments on commit d94b31b

Please sign in to comment.