From 4e7d2c2dd792c9fded0b1eea1a93b342073bcf38 Mon Sep 17 00:00:00 2001
From: Trung Le <trungle@rta.vn>
Date: Wed, 11 Dec 2024 01:35:12 -0800
Subject: [PATCH] Create demo-mapkey.html

---
 html/demo-mapkey.html | 105 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 html/demo-mapkey.html
diff --git a/html/demo-mapkey.html b/html/demo-mapkey.html
new file mode 100644
index 0000000..f174e4d
--- /dev/null
+++ b/html/demo-mapkey.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+
+    <!-- Preconnect to external domains -->
+    <link rel="preconnect" href="https://cdn.jsdelivr.net">
+    <link rel="preconnect" href="https://therealtimex.github.io">
+    <link rel="preconnect" href="https://maps.google.com">
+
+    <!-- Modern Bootstrap -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://therealtimex.github.io/rtlibrary/css/rt-dmview-css-min.css">
+    <script src="https://therealtimex.github.io/rtlibrary/js/rt-html-abs.js" defer></script>
+    <script src="https://therealtimex.github.io/rtlibrary/js/dm-template-handler.js" defer></script>
+
+
+
+</head>
+
+<body>
+    <main class="container">
+        <div>
+            <h2 class="dmview-title">##store_lb##</h2>
+
+            <div class="tab-container">
+                <ul class="nav nav-pills mb-3" id="dmTabs" role="tablist">
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link active" id="tab1" data-bs-toggle="tab" data-bs-target="#info-content"
+                            type="button" role="tab" aria-controls="info-content" aria-selected="true">
+                            👤 Profile
+                        </button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link" id="tab2" data-bs-toggle="tab" data-bs-target="#media-content"
+                            type="button" role="tab" aria-controls="media-content" aria-selected="false">
+                            💼 Documents
+                        </button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link" id="tab3" data-bs-toggle="tab" data-bs-target="#map-content"
+                            type="button" role="tab" aria-controls="map-content" aria-selected="false">
+                            📍 Maps
+                        </button>
+                    </li>
+                </ul>
+
+                <div id="TabContent">
+                    <div class="tab-pane fade show active" id="info-content" role="tabpanel" aria-labelledby="tab1">
+                        <div class="content-scroll">
+                            <p class="mb-1">
+                                <span aria-hidden="true">👤</span> ##crm_info_en##<br>##crm_desp##
+                            </p>
+                            <p class="mb-1">
+                                <span aria-hidden="true">✅</span> Care status: ##crm_interact_status##
+                            </p>
+                            <p class="mb-1">
+                                <span aria-hidden="true">🏷</span> Classifying label: ##customer_status_lb##
+                            </p>
+                            <p class="mb-1">
+                                <span aria-hidden="true">🔗</span> Source: ##crm_source_ct##
+                            </p>
+                            <p class="mb-1">
+                                <span aria-hidden="true">🆔</span> ID: ##store_id##
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="tab-pane fade" id="media-content" role="tabpanel" aria-labelledby="tab2">
+                        <div class="media-container" id="media-slider-container" aria-label="Media Gallery">
+                        </div>
+                    </div>
+                    <div class="tab-pane fade" id="map-content" role="tabpanel" aria-labelledby="tab3">
+                        <iframe tabindex="-1" width=100% height=100% style="border:0;" loading="lazy" allowfullscreen
+                            src="https://maps.google.com/maps?key=" + fetchGoogleMapsApiKey()
+                            + "&q=##crm_gpsLatitude##,##crm_gpsLongitude##&z=14&output=embed"></iframe>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Modern JS Dependencies -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"
+        defer></script>
+    <script src="https://therealtimex.github.io/rtlibrary/js/mediaSlider.js" defer></script>
+    <script>
+        const listFiles = "##input_files##";
+        let listFilesArray;
+        if (listFiles === "null" || listFiles.trim() === "") {
+            listFilesArray = [];
+        } else {
+            listFilesArray = listFiles.split(";");
+        }
+        document.addEventListener('DOMContentLoaded', () => {
+            new MediaSlider('media-slider-container', listFilesArray);
+        });
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
