Update demo2/pages/__init__.py

demo2/pages/__init__.py

@@ -111,7 +111,11 @@ lbl_land_use_btn = [{'EN': 'civil societies',
                      {'EN': 'women',
                      'TR': 'kadınlar'},
                      {'EN': 'youth',
-                     'TR': 'gençler'},]
+                     'TR': 'gençler'}]
+lbl_hazard_btn = [{'EN': 'EARTHQUAKE',
+                     'TR': 'DEPREM'},
+                     {'EN': 'FLOOD',
+                     'TR': 'SEL'}]
 lbl_maintitle = {'EN': 'Tomorrow\'s Cities Decision Making Simulation','TR': 'Yarının Şehirleri için Karar Verme Simülasyonu'}
 lbl_earthquake= {'EN': 'Earthquake', 'TR': 'Deprem'}
 lbl_flood = {'EN': 'Flood', 'TR': 'Sel'}
@@ -588,6 +592,7 @@ def LandUsePlans():
                     with solara.Row(justify="center"):
                         solara.Image(f"landuse_tv50_{i+1}.png", width="100%")
 
+hazard_selected = solara.reactive(1)
 @solara.component
 def Page():
     def reset_view():
@@ -598,6 +603,16 @@ def Page():
             luf_type_selected[luf_type].value = True
         landuseplan_selected.value = 1
 
+    def hazard_1():
+        hazard_selected.value = 1
+        hazard_type.set("earthquake")
+    
+    def hazard_2():
+        hazard_selected.value = 2
+        hazard_type.set("flood")
+
+    funcs2 = {1: hazard_1, 2: hazard_2}
+    
     solara.Style(css)
     with solara.Columns([1,98,1]):
         solara.HTML(unsafe_innerHTML="")
@@ -639,27 +654,40 @@ def Page():
                     with solara.Card(title=lbl_infobox_title[lang.value], style={"text-align": "justify"}):
                         solara.HTML(unsafe_innerHTML=lbl_infobox[lang.value], classes=["infobox"])
                     with solara.Card(title=lbl_density_map_title[lang.value]):
-                        with solara.Columns([30,30,30]):
-                            with solara.Column():
-                                if hazard_type.value == "earthquake":
-                                    bgcolor = "background-color: #545454;"
-                                else:
-                                    bgcolor = ""
-                                with solara.Row(justify="center"):
-                                    solara.Button(lbl_earthquake[lang.value], value="earthquake", text=True, on_click=lambda: hazard_type.set("earthquake"), style=f"{bgcolor} width: 100%; height: 26px")
-                                # DensityMap("earthquake")
-                                with solara.Row(justify="center"):
-                                    solara.Image("/static/public/eq.png")
-                            with solara.Column():
-                                if hazard_type.value == "flood":
-                                    bgcolor = "background-color: #545454;"
-                                else:
-                                    bgcolor = ""
-                                with solara.Row(justify="center"):
-                                    solara.Button(lbl_flood[lang.value], value="flood", text=True,  on_click=lambda: hazard_type.set("flood"), style=f"{bgcolor} width: 100%; height: 26px")    
-                                # DensityMap("flood")
-                                with solara.Row(justify="center"):
-                                    solara.Image("/static/public/fl.png")
+                        with solara.Columns([50,50]):
+                            for i in range(0,2):
+                                with solara.Column():
+                                    if hazard_selected.value == i + 1: 
+                                        solara.Button(lbl_hazard_btn[i][lang.value], value=i+1, text=True,
+                                            on_click=funcs2[i+1], style="background-color: #545454; height: 26px")
+                                        with solara.Row(justify="center"):
+                                            solara.Image(f"/static/public/hazard_{i+1}_selected.png", width="100%")
+                                    else:
+                                        solara.Button(lbl_hazard_btn[i][lang.value], value=i+1, text=True,
+                                            on_click=funcs2[i+1], style=f"width: 100%; height: 26px")
+                                        with solara.Row(justify="center"):
+                                            solara.Image(f"/static/public/hazard_{i+1}.png", width="100%")
+                        # with solara.Columns([50,50]):
+                            # with solara.Column():
+                                # if hazard_type.value == "earthquake":
+                                    # bgcolor = "background-color: #545454;"
+                                # else:
+                                    # bgcolor = ""
+                                # with solara.Row(justify="center"):
+                                    # solara.Button(lbl_earthquake[lang.value], value="earthquake", text=True, on_click=lambda: hazard_type.set("earthquake"), style=f"{bgcolor} width: 100%; height: 26px")
+                                # # DensityMap("earthquake")
+                                # with solara.Row(justify="center"):
+                                    # solara.Image("/static/public/eq.png")
+                            # with solara.Column():
+                                # if hazard_type.value == "flood":
+                                    # bgcolor = "background-color: #545454;"
+                                # else:
+                                    # bgcolor = ""
+                                # with solara.Row(justify="center"):
+                                    # solara.Button(lbl_flood[lang.value], value="flood", text=True,  on_click=lambda: hazard_type.set("flood"), style=f"{bgcolor} width: 100%; height: 26px")    
+                                # # DensityMap("flood")
+                                # with solara.Row(justify="center"):
+                                    # solara.Image("/static/public/fl.png")
                             # with solara.Column():
                                 # if hazard_type.value == "debris":
                                     # bgcolor = "background-color: #545454;"