gawells/Self-Service-Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

add in confirm change button

Browse Source
This commit is contained in:
gawells
2026-06-11 18:38:37 -04:00
parent d82d2bba20
commit c9f9f3ef6c
2 changed files with 19 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/profile_page.html
+13 -3
View File
@@ -104,6 +104,7 @@
<div id="resize_photo_dialouge" class="card static_center hidden"> <div id="resize_photo_dialouge" class="card static_center hidden">
<div id="resize_photo_box"></div> <div id="resize_photo_box"></div>
<img id="new_profile_image" alt="new-profile-image" /> <img id="new_profile_image" alt="new-profile-image" />
<button id="confirm_change">Confirm Change</button>
</div> </div>
<img id="logo_image" alt="logo" src="/logo" /> <img id="logo_image" alt="logo" src="/logo" />
@@ -176,6 +177,7 @@
<script type="text/javascript"> <script type="text/javascript">
const button = document.getElementById("edit_picture_button"); const button = document.getElementById("edit_picture_button");
const fileInput = document.getElementById("file_input"); const fileInput = document.getElementById("file_input");
const confirm_change = document.getElementById("confirm_change");
button.addEventListener("click", () => { button.addEventListener("click", () => {
fileInput.click(); // opens file picker fileInput.click(); // opens file picker
@@ -183,12 +185,14 @@
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
var currentPreviewURL = null; var currentPreviewURL = null,
image = null,
file = null;
fileInput.addEventListener("change", async () => { fileInput.addEventListener("change", async () => {
document.getElementById("popup_background").classList.remove("hidden"); document.getElementById("popup_background").classList.remove("hidden");
const file = fileInput.files[0]; file = fileInput.files[0];
if (!file) return; if (!file) return;
if (file.type !== "image/jpeg") { if (file.type !== "image/jpeg") {
alert("Only JPEG images are allowed."); alert("Only JPEG images are allowed.");
@@ -200,7 +204,7 @@
.getElementById("resize_photo_dialouge") .getElementById("resize_photo_dialouge")
.classList.remove("hidden"); .classList.remove("hidden");
var image = URL.createObjectURL(file); image = URL.createObjectURL(file);
const bitmap = await createImageBitmap(file); const bitmap = await createImageBitmap(file);
var new_profile_image = document.getElementById("new_profile_image"); var new_profile_image = document.getElementById("new_profile_image");
@@ -213,6 +217,12 @@
bitmap.height + "px", bitmap.height + "px",
); );
return; return;
});
confirm_change.addEventListener("click", async () => {
document
.getElementById("resize_photo_dialouge")
.classList.add("hidden");
const formData = new FormData(); const formData = new FormData();
formData.append("photo", file); formData.append("photo", file);
static/profile_page.css
+6 -22
View File
@@ -156,27 +156,11 @@
#resize_photo_box { #resize_photo_box {
background-color: black; background-color: black;
width: 100px;
height: 100px;
position: absolute; position: absolute;
opacity: 40%; left: 50%;
width: var(--img-width); top: 50%;
height: var(--img-height); transform: translateX(-50%) translateY(-50%);
--percent: 0.5;
--smalled-dim: min(var(--img-width), var(--img-height));
--smaller-pixel: calc((0.5 - (var(--percent)) / 2) * var(--smalled-dim));
--larger-pixel: calc((0.5 + (var(--percent)) / 2) * var(--smalled-dim));
clip-path: polygon(
0% 0%,
0% 100%,
var(--smaller-pixel) 100%,
var(--smaller-pixel) var(--smaller-pixel),
var(--larger-pixel) var(--smaller-pixel),
var(--larger-pixel) var(--larger-pixel),
var(--smaller-pixel) var(--larger-pixel),
var(--smaller-pixel) 100%,
100% 100%,
100% 0%
);
} }