BLUR-40 delete-uploaded-file

blurme/pages/settings.py

@@ -10,20 +10,32 @@ color = "rgb(107,99,246)"
 
 @template(route="/settings", title="Zdjęcie", image = "/image-icon.png")
 def settings() -> rx.Component:
-   return rx.vstack(
+    return rx.vstack(
         rx.heading("BlurMe", font_size="3em", margin_bottom="25px", background_image="linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", background_clip="text", padding = "10px"),
         rx.text("Dodaj zdjęcie, które chcesz zanonimizować", font_size="1.2em"),
         rx.upload(
-            rx.vstack(rx.text("Drag and drop files here or click to select files"),),
+            rx.vstack(rx.text("Przeciągnij albo kliknij, aby wybrać pliki"),),
             border=f"1px dotted {color}",
             padding="5em",),
         rx.hstack(rx.foreach(rx.selected_files, rx.text)),
-        rx.button( "Upload",
+        rx.button( "Załaduj zdjęcie",
             on_click=lambda: State.handle_upload(
             rx.upload_files()),),
-        rx.button("Clear",
-            on_click=rx.clear_selected_files),
+        #rx.button("Clear",
+        #    on_click=rx.clear_selected_files),),
         rx.foreach(
-            State.img, lambda img: rx.image(src=f'/{img}')),
-        padding="5em",
+            State.img,
+            lambda img: rx.vstack(
+                rx.image(src=f'/{img}', max_width = "800px"),
+                rx.hstack(rx.button("Usuń",
+                          on_click=lambda img_name=img: State.delete_image(img_name),
+                          width = "125px"),
+                          rx.button("Anonimizuj",
+                          width = "125px"),
+                          rx.button("Pobierz",
+                          width = "125px"),
+                          padding="1em"
+            ),
+        padding="3em",
     )
+    ))

blurme/state.py

@@ -4,26 +4,14 @@ import reflex as rx
 from blurme import styles
 import asyncio
 
-
-#class State(rx.State):
-#    def __init__(self):
-#        super().__init__()
-#        self.dark_mode_state: bool = False
-#    def __str__(self):
-#        self.dark_mode_state
-#    def toggle_dark_mode(self) -> None:
-#        self.dark_mode_state = not self.dark_mode_state
-#        text_color = styles.text_color_light if self.dark_mode_state == True else styles.text_color_dark
-#        styles.text_color = text_color
-#        print(f"Dark Mode State: {self.dark_mode_state}")
-#        print(f"Current Text Color: {text_color}")   
-#    pass
-
 class State(rx.State):
    """The app state."""
 
    # The images to show.
    img: list[str]  = []
+   # Dark mode status
+   #dark_mode: bool = False
+
    async def handle_upload(self, files: list[rx.UploadFile]):
        """Handle the upload of file(s).
        Args:
@@ -36,11 +24,30 @@ class State(rx.State):
            # Save the file.
            with open(outfile, "wb") as file_object:
                file_object.write(upload_data)
-               
+
            # Update the img var.
            self.img.append(file.filename)       
        self.img = self.img
-       print(f"Current Text Color: {self.img[0]}")  
-   
+   def delete_image(self, img_name: str):
+       if img_name in self.img:
+           self.img.remove(img_name)
+       self.img=self.img
 
 
+   #async def toggle_dark_mode(self):
+   #     self.dark_mode = not self.dark_mode
+   #     print(f"Dark Mode State: {self.dark_mode}")
+        
+#class State(rx.State):
+#    def __init__(self):
+#        super().__init__()
+#        self.dark_mode_state: bool = False
+#    def __str__(self):
+#        self.dark_mode_state
+#    def toggle_dark_mode(self) -> None:
+#        self.dark_mode_state = not self.dark_mode_state
+#        text_color = styles.text_color_light if self.dark_mode_state == True else styles.text_color_dark
+#        styles.text_color = text_color
+#        print(f"Dark Mode State: {self.dark_mode_state}")
+#        print(f"Current Text Color: {text_color}")   
+#    pass

blurme/styles.py

@@ -13,9 +13,6 @@ text_color_light = "black"
 text_color_dark = "white"
 accent_text_color = "black"
 accent_color = "linear-gradient(linear-gradient(43deg, rgba(201,238,248,1) 18%, rgba(253,210,227,0.7792366946778712) 86%)"
-#linear-gradient(120deg, #d299c2 0%, #fef9d7 100%);"
-#linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);"
-
 hover_accent_color = {"_hover": {"color": accent_color}}
 hover_accent_bg = {"_hover": {"bg": accent_color}}
 content_width_vw = "90vw"
@@ -43,16 +40,6 @@ overlapping_button_style = {
     "border_radius": border_radius,
 }
 
-#base_style = {
-#    rx.MenuButton: {
-#        "width": "3em",
-#        "height": "3em",
-#        **overlapping_button_style,
-#    },
-#    rx.MenuItem: hover_accent_bg,
-#}
-
-
 markdown_style = {
     "code": lambda text: rx.code(text, color="#1F1944", bg="#EAE4FD", margin="10px 0"),
     "a": lambda text, **props: rx.link(