Update app.py

app.py

@@ -10,6 +10,7 @@ import os
 import json
 import random
 import time
+import requests
 
 # تنظیمات اولیهه
 st.set_page_config(layout="wide", page_title="راهیار - تحلیل انصاف قیمتی", page_icon="🚖")
@@ -773,57 +774,139 @@ body, .stApp {
 
 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل با دکمه‌های رادیویی افقی و مرکزی در Streamlit"""
+    """لیکرت اسکیل با محدوده 0 تا scale و استفاده از Flask برای مدیریت انتخاب‌ها"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
     labels = question_data.get("labels", ["کاملاً مخالفم", "کاملاً موافقم"])
     
-    # مقداردهی اولیه
-    if key not in st.session_state:
-        st.session_state[key] = 0
+    # دریافت مقدار فعلی از سرور Flask
+    try:
+        response = requests.get(f"http://localhost:5000/get_selection/{key}")
+        current_value = response.json().get('value', 0)
+    except Exception as e:
+        st.error(f"خطا در ارتباط با سرور: {e}")
+        current_value = 0
 
     # نمایش سوال
     st.markdown(f"<div style='text-align:right; font-weight:bold; margin-bottom:15px; direction: rtl;'>{question}</div>", 
                 unsafe_allow_html=True)
 
-    # تنظیم چیدمان مرکزی با ستون‌ها
-    total_cols = scale + 2  # یک ستون برای هر نقطه + 2 ستون برای برچسب‌ها
-    col_widths = [1] * 2 + [2] * scale  # 2 ستون برای برچسب‌ها (هر کدام 1) و نقاط (هر کدام 2)
-    cols = st.columns(col_widths)
-
-    # نمایش برچسب سمت راست
-    with cols[0]:
-        st.markdown(f"<div style='text-align:right; font-size:14px; font-weight:bold; color:#6a0dad; direction: rtl;'>{labels[0]}</div>", 
-                    unsafe_allow_html=True)
-
-    # نمایش دکمه‌های رادیویی به صورت افقی و مرکزی
-    options = [str(i) for i in range(1, scale + 1)]
-    selected_value = st.session_state.get(key, 0)
+    # ایجاد خط و نقاط با HTML/CSS
+    scale_html = f"""
+    <style>
+        @font-face {{
+            font-family: 'B Nazanin';
+            src: url('https://www.fontyab.com/fonts/b-nazanin/BNazanin.woff2') format('woff2');
+        }}
+        .likert-line {{
+            width: 80%;
+            height: 2px;
+            background: #6a0dad;
+            margin: 0 auto;
+            position: relative;
+            display: flex;
+            justify-content: space-between;
+            direction: rtl;
+        }}
+        .likert-dot {{
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: white;
+            border: 2px solid #6a0dad;
+            position: relative;
+            top: -9px;
+            cursor: pointer;
+        }}
+        .likert-dot.active {{
+            background: #6a0dad;
+        }}
+        .likert-labels {{
+            width: 80%;
+            margin: 5px auto 15px;
+            display: flex;
+            justify-content: space-between;
+            direction: rtl;
+            font-size: 14px;
+            font-family: 'B Nazanin', sans-serif;
+            font-weight: bold;
+            color: #6a0dad;
+        }}
+        .separator-line {{
+            width: 80%;
+            height: 2px;
+            background: #6a0dad;
+            margin: 20px auto;
+        }}
+        @media (max-width: 768px) {{
+            .likert-line {{
+                width: 90%;
+            }}
+            .likert-labels {{
+                width: 90%;
+            }}
+        }}
+        @media (min-width: 768px) {{
+            .likert-container {{
+                width: 475px;
+                margin: 0 auto;
+            }}
+        }}
+    </style>
     
-    for i in range(scale):
-        with cols[i + 2]:  # شروع از ستون دوم (پس از برچسب‌ها)
-            button_key = f"{key}_btn_{i}"
-            is_selected = selected_value == int(options[i])
-            st.markdown(f'<div style="text-align: center;">', unsafe_allow_html=True)
-            if st.button(options[i], key=button_key, disabled=selected_value != 0 and not is_selected):
-                st.session_state[key] = int(options[i])
-            st.markdown(f'</div>', unsafe_allow_html=True)
-
-    # نمایش برچسب سمت چپ
-    with cols[1]:
-        st.markdown(f"<div style='text-align:left; font-size:14px; font-weight:bold; color:#6a0dad; direction: rtl;'>{labels[1]}</div>", 
-                    unsafe_allow_html=True)
+    <div class="likert-container">
+        <div class="likert-labels">
+            <span>{labels[0]}</span>
+            <span>{labels[1]}</span>
+        </div>
+        <div class="likert-line">
+    """
+
+    # اضافه کردن نقاط فقط برای مقادیر 1 تا scale
+    for i in range(1, scale + 1):
+        value = i
+        active_class = "active" if current_value == value else ""
+        scale_html += f"""
+        <div class='likert-dot {active_class}' 
+             onclick='parent.window.parent.postMessage({{type: "update_selection", key: "{key}", value: {value}}}, "*")'>
+        </div>
+        """
+    
+    scale_html += """
+        </div>
+    </div>
+    <script>
+        window.addEventListener('message', function(event) {
+            if (event.data.type === 'update_selection') {
+                fetch('http://localhost:5000/update_selection', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ key: event.data.key, value: event.data.value })
+                }).then(response => response.json()).then(data => {
+                    if (data.status === 'success') {
+                        document.querySelectorAll('.likert-dot').forEach(dot => dot.classList.remove('active'));
+                        let dots = document.querySelectorAll('.likert-dot');
+                        dots[event.data.value - 1].classList.add('active');
+                    }
+                });
+            }
+        });
+    </script>
+    """
+    
+    # نمایش کامپوننت HTML
+    components.html(scale_html, height=60)
 
     # نمایش پاسخ انتخاب‌شده
-    if st.session_state[key] != 0:
-        st.markdown(f"<p style='text-align:right; color:#6a0dad; direction: rtl;'>پاسخ شما: {st.session_state[key]}</p>", 
+    if current_value != 0:
+        st.markdown(f"<p style='text-align:right; color:#6a0dad; direction: rtl;'>پاسخ شما: {current_value}</p>", 
                     unsafe_allow_html=True)
     else:
         st.markdown(f"<p style='text-align:right; color:#6a0dad; direction: rtl;'>پاسخ شما: هنوز انتخاب نشده</p>", 
                     unsafe_allow_html=True)
 
-    # خط جداکننده بنفش و استایل‌های سفارشی
+    # خط جداکننده بنفش
     st.markdown("""
     <style>
         .likert-separator {
@@ -833,46 +916,16 @@ def enhanced_likert_scale(question_data):
             margin: 20px auto;
             direction: rtl;
         }
-        /* استایل خاص برای دکمه‌های لیکرت */
-        [data-testid="stButton"] {
-            margin: 0 5px !important;
-            width: 30px !important;
-            height: 30px !important;
-            border-radius: 50% !important;
-            padding: 0 !important;
-            text-align: center !important;
-            line-height: 30px !important;
-            background-color: #fff !important;
-            border: 2px solid #6a0dad !important;
-            color: #6a0dad !important;
-            cursor: pointer !important;
-        }
-        [data-testid="stButton"]:disabled {
-            background-color: #6a0dad !important;
-            color: #fff !important;
-        }
-        /* اجبار به چیدمان افقی در موبایل */
         @media (max-width: 768px) {
             .likert-separator {
                 width: 90%;
             }
-            [data-testid="stHorizontalBlock"] [data-testid="stButton"] {
-                margin: 0 2px !important;
-            }
-        }
-        /* تنظیم مرکزیت در فریم موبایل (475px) */
-        @media (min-width: 768px) {
-            [data-testid="stAppViewContainer"] [data-testid="stHorizontalBlock"] {
-                justify-content: center !important;
-                width: 475px !important;
-                margin: 0 auto !important;
-            }
         }
     </style>
     <div class="likert-separator"></div>
     """, unsafe_allow_html=True)
 
-    return st.session_state.get(key)
+    return current_value
     
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""