src/components.py

import streamlit as st
from datetime import datetime
from huggingface_hub import HfApi
from src.text_content import REVIEW_TEXT, INTRO_TEXT_AR, INTRO_TEXT_EN, INTRO_TEXT_FR


def id_review_submission(api: HfApi):
    """Id review submission form"""
    # collapse the text
    with st.expander("🔍 Review of requests | مراجعة طلب مساعدة"):
        st.markdown(REVIEW_TEXT)

        id_to_review = st.number_input("Enter id / أدخل الرقم", min_value=0, value=0, step=1)
        reason_for_review = st.text_area("Explain why / أدخل سبب المراجعة")
        if st.button("Submit / أرسل"):
            if reason_for_review == "":
                st.error("Please enter a reason / الرجاء إدخال سبب")
            else:
                filename = f"review_id_{id_to_review}_{datetime.now().strftime('%Y-%m-%d_%H-%M-%S')}.txt"
                with open(filename, "w") as f:
                    f.write(f"id: {id_to_review}, explanation: {reason_for_review}\n")
                api.upload_file(
                    path_or_fileobj=filename,
                    path_in_repo=filename,
                    repo_id="nt3awnou/review_requests",
                    repo_type="dataset",
                )
                st.success("Submitted at https://huggingface.co/datasets/nt3awnou/review_requests/ تم الإرسال")


def show_embed_code():
    with st.expander("💻 For Developers only, embed code for the map | للمطورين فقط، يمكنك نسخ كود الخريطة"):
        st.code(
            """
    <iframe id="nt3awnou-map"
    src="https://nt3awnou-embed-rescue-map.hf.space/?embed=true" width="1200" height="720"
    frameborder="0"
    width="850"
    height="450"
    title="Nt3awno Rescue Map">
    </iframe>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/iframeResizer.min.js"></script>
    <script>
    iFrameResize({}, "#nt3awnou-map");
    </script>
            """,
            language="html",
        )


def show_dataframes_metrics(len_requests, len_interventions, len_solved_verified_requests):
    tab_ar, tab_en, tab_fr = st.tabs(["العربية", "English", "Français"])
    with tab_en:
        st.markdown(INTRO_TEXT_EN, unsafe_allow_html=True)
        col1, col2, col3 = st.columns([1, 1, 1])
        with col1:
            st.metric(
                "# Number of help requests",
                len_requests,
            )
        with col2:
            st.metric(
                "# Number of interventions",
                len_interventions + len_solved_verified_requests,
            )
        with col3:
            st.metric(
                "# Number of solved requests",
                len_solved_verified_requests,
            )
    with tab_ar:
        st.markdown(INTRO_TEXT_AR, unsafe_allow_html=True)
        col1, col2, col3 = st.columns([1, 1, 1])
        with col1:
            st.metric(
                "# عدد طلبات المساعدة",
                len_requests,
            )
        with col2:
            st.metric(
                "# عدد التدخلات",
                len_interventions + len_solved_verified_requests,
            )
        with col3:
            st.metric(
                "# عدد الطلبات المستجاب لها",
                len_solved_verified_requests,
            )
    with tab_fr:
        st.markdown(INTRO_TEXT_FR, unsafe_allow_html=True)
        col1, col2, col3 = st.columns([1, 1, 1])
        with col1:
            st.metric(
                "# Nombre de demandes d'aide",
                len_requests,
            )
        with col2:
            st.metric(
                "# Nombre d'interventions",
                len_interventions + len_solved_verified_requests,
            )
        with col3:
            st.metric(
                "# Nombre de demandes résolues",
                len_solved_verified_requests,
            )

def show_donations():
    st.subheader("📝 **Donations / التبرعات / Dons**")
    tab_ar, tab_en, tab_fr = st.tabs(["العربية", "English", "Français"])
    with tab_en:
        st.markdown(
            """
            <div style="text-align: center;">
            <h4>The official bank account dedicated to tackle the consequences of the earthquake is:</h4>
            <b>Account number:</b>
            <h2>126</h2>
            <b>RIB:</b> 001-810-0078000201106203-18
            <br>
            <b>For the money transfers coming from outside Morocco</b>
            <br>
            <b>IBAN:</b> MA64001810007800020110620318
            <br>
            """,
            unsafe_allow_html=True,
        )
    with tab_ar:
        st.markdown(
            """
            <div style="text-align: center;">
            <h4>الحساب البنكي الرسمي المخصص لمواجهة عواقب الزلزال</h4>
            <b>رقم الحساب</b>
            <h2>126</h2>
            <b>RIB:</b> 001-810-0078000201106203-18
            <br>
            <b>للتحويلات القادمة من خارج المغرب</b>
            <br>
            <b>IBAN:</b> MA64001810007800020110620318
            <br>
            </div>
            """,
            unsafe_allow_html=True,
        )
    with tab_fr:
        st.markdown(
            """
            <div style="text-align: center;">
            <h4>Le compte bancaire officiel dédié à la lutte contre les conséquences du séisme est le suivant:</h4>
            <b>Numéro de compte:</b>
            <h2>126</h2>
            <b>RIB:</b> 001-810-0078000201106203-18
            <br>
            <b>Pour les transferts d'argent en provenance de l'étranger</b>
            <br>
            <b>IBAN:</b> MA64001810007800020110620318
            <br>
            """,
            unsafe_allow_html=True,
        )