Spaces:

OrganizedProgrammers
/

3GPPDocFinder

Running

App Files Files Community

om4r932 commited on 2 days ago

Commit

53fa589

1 Parent(s): 5fccac9

Add filters

Browse files

Files changed (3) hide show

static/script.js +20 -2
static/style.css +60 -0
templates/index.html +55 -3

static/script.js CHANGED Viewed

@@ -14,6 +14,12 @@ const docIdInput = document.getElementById('doc-id');
 const batchIdsInput = document.getElementById('batch-ids');
 const keywordInput = document.getElementById("keywords");
 const searchBtn = document.getElementById('search-btn');
 const batchSearchBtn = document.getElementById('batch-search-btn');
 const keywordSearchBtn = document.getElementById("keyword-search-btn");
@@ -64,6 +70,11 @@ keywordModeBtn.addEventListener('click', () => {
     keywordSearchInput.style.display = "block";
 })
 keywordSearchBtn.addEventListener("click", async ()=>{
     const keywords = keywordInput.value.trim();
     if (!keywords) {
@@ -80,7 +91,14 @@ keywordSearchBtn.addEventListener("click", async ()=>{
             headers: {
                 "Content-Type": "application/json"
             },
-            body: JSON.stringify({ keywords })
         });
         const data = await response.json();
@@ -242,7 +260,7 @@ function displayKeywordResults(data) {
         `;
         resultsList.appendChild(resultItem);
     });
-    resultsStats.textContent = `Found in ${data.search_time.toFixed(2)} seconds`
     resultsContainer.style.display = 'block';
 }

 const batchIdsInput = document.getElementById('batch-ids');
 const keywordInput = document.getElementById("keywords");
+const releaseFilter = document.querySelector("input[name=release]")
+const modeFilter = document.querySelector("select[name=mode]")
+const specTypeFilter = document.querySelector("select[name=spec_type]")
+const workingGroupFilter = document.querySelector("select[name=working_group]")
+const caseSensitiveFilter = document.querySelector("input[name=case_sensitive]")
 const searchBtn = document.getElementById('search-btn');
 const batchSearchBtn = document.getElementById('batch-search-btn');
 const keywordSearchBtn = document.getElementById("keyword-search-btn");
     keywordSearchInput.style.display = "block";
 })
+document.getElementById('toggleFilters').onclick = function() {
+  var target = document.getElementById('filtersForm');
+  target.style.display = (target.style.display === 'none' || target.style.display === '') ? 'flex' : 'none';
+};
 keywordSearchBtn.addEventListener("click", async ()=>{
     const keywords = keywordInput.value.trim();
     if (!keywords) {
             headers: {
                 "Content-Type": "application/json"
             },
+            body: JSON.stringify({
+                keywords,
+                "case_sensitive": caseSensitiveFilter.checked,
+                "release": releaseFilter.value != '' ? releaseFilter.value : null,
+                "mode": modeFilter.value,
+                "working_group": workingGroupFilter != '' ? workingGroupFilter.value : null,
+                "spec_type": specTypeFilter != "" ? specTypeFilter.value : null
+            })
         });
         const data = await response.json();
         `;
         resultsList.appendChild(resultItem);
     });
+    resultsStats.textContent = `Found ${data.results.length} in ${data.search_time.toFixed(2)} seconds`
     resultsContainer.style.display = 'block';
 }

static/style.css CHANGED Viewed

@@ -10,6 +10,66 @@
     --shadow-color: rgba(0, 0, 0, 0.1);
 }
 * {
     margin: 0;
     padding: 0;

     --shadow-color: rgba(0, 0, 0, 0.1);
 }
+.filter-tab-container {
+  margin-top: 20px;
+  margin-bottom: 15px;
+}
+.filter-toggle-btn {
+  background: #3182ce;
+  color: #fff;
+  border: none;
+  border-radius: 4px 4px 0 0;
+  padding: 8px 14px;
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  transition: background 0.3s;
+  box-shadow: 0 2px 4px rgba(44, 82, 130, 0.05);
+}
+.filter-toggle-btn:hover {
+  background: #2c5282;
+}
+.filters-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  background: #f8f8f8;
+  padding: 13px 14px;
+  border: 1px solid #ddd;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  margin: 0;
+  margin-top: -1px;
+  box-shadow: 0 2px 4px rgba(44, 82, 130, 0.06);
+}
+.filter-input, .filter-select {
+  padding: 7px 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: #fff;
+  color: #333;
+  font-size: 15px;
+}
+.filter-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 15px;
+  color: #2c5282;
+  margin: 0;
+}
+.filter-checkbox {
+  accent-color: #3182ce;
+}
 * {
     margin: 0;
     padding: 0;

templates/index.html CHANGED Viewed

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,6 +8,7 @@
     <link rel="stylesheet" href="/static/style.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap">
 </head>
 <body>
     <header>
         <div class="container header-content">
@@ -20,7 +22,8 @@
         <div class="search-container">
             <div class="search-header">
                 <h2 id="dynamicTitle">Find 3GPP Documents</h2>
-                <p id="dynamicDesc">Enter a TSG document ID / specification ID (e.g., S1-123456, C2-987654 or 31.102) to locate the document in the 3GPP FTP server.</p>
             </div>
             <div class="search-mode">
@@ -33,14 +36,16 @@
                 <div class="input-group single-input">
                     <label for="doc-id">Document ID</label>
                     <div class="input-field">
-                        <input type="text" id="doc-id" placeholder="Enter document ID or specification ID (e.g., S1-123456, 12.345)">
                         <button id="search-btn" class="btn">Search</button>
                     </div>
                 </div>
                 <div class="input-group batch-input">
                     <label for="batch-ids">Document IDs or Specification IDs (one per line)</label>
-                    <textarea id="batch-ids" placeholder="Enter document IDs or specification IDs, one per line (e.g., S1-123456, C2-987654, 31.102)"></textarea>
                     <div class="hint">Enter one document ID per line</div>
                     <button id="batch-search-btn" class="btn" style="margin-top: 10px;">Search All</button>
                 </div>
@@ -51,6 +56,52 @@
                         <input type="text" id="keywords" placeholder="Enter your keywords separated by space">
                         <button id="keyword-search-btn" class="btn">Search</button>
                     </div>
                 </div>
             </div>
@@ -77,4 +128,5 @@
     <script src="/static/script.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/static/style.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap">
 </head>
 <body>
     <header>
         <div class="container header-content">
         <div class="search-container">
             <div class="search-header">
                 <h2 id="dynamicTitle">Find 3GPP Documents</h2>
+                <p id="dynamicDesc">Enter a TSG document ID / specification ID (e.g., S1-123456, C2-987654 or 31.102) to
+                    locate the document in the 3GPP FTP server.</p>
             </div>
             <div class="search-mode">
                 <div class="input-group single-input">
                     <label for="doc-id">Document ID</label>
                     <div class="input-field">
+                        <input type="text" id="doc-id"
+                            placeholder="Enter document ID or specification ID (e.g., S1-123456, 12.345)">
                         <button id="search-btn" class="btn">Search</button>
                     </div>
                 </div>
                 <div class="input-group batch-input">
                     <label for="batch-ids">Document IDs or Specification IDs (one per line)</label>
+                    <textarea id="batch-ids"
+                        placeholder="Enter document IDs or specification IDs, one per line (e.g., S1-123456, C2-987654, 31.102)"></textarea>
                     <div class="hint">Enter one document ID per line</div>
                     <button id="batch-search-btn" class="btn" style="margin-top: 10px;">Search All</button>
                 </div>
                         <input type="text" id="keywords" placeholder="Enter your keywords separated by space">
                         <button id="keyword-search-btn" class="btn">Search</button>
                     </div>
+                    <div class="filter-tab-container">
+                        <button type="button" id="toggleFilters" class="filter-toggle-btn">
+                            <span>Filtres avancés</span>
+                            <svg width="16" height="16" style="vertical-align:middle" fill="currentColor">
+                                <path d="M4 7l4 4 4-4"></path>
+                            </svg>
+                        </button>
+                        <form id="filtersForm" class="filters-row" style="display:none;">
+                            <input type="number" min="0" max="21" name="release" placeholder="Release"
+                                class="filter-input">
+                            <select name="mode" class="filter-select">
+                                <option value="and">AND</option>
+                                <option value="or">OR</option>
+                            </select>
+                            <select name="spec_type" class="filter-select">
+                                <option value="">All types</option>
+                                <option value="TR">Report</option>
+                                <option value="TS">Specification</option>
+                            </select>
+                            <select name="working_group" class="filter-select">
+                                <option value="">Group</option>
+                                <option value="CP">CP</option>
+                                <option value="C1">C1</option>
+                                <option value="C2">C2</option>
+                                <option value="C3">C3</option>
+                                <option value="C4">C4</option>
+                                <option value="C5">C5</option>
+                                <option value="C6">C6</option>
+                                <option value="SP">SP</option>
+                                <option value="S1">S1</option>
+                                <option value="S2">S2</option>
+                                <option value="S3">S3</option>
+                                <option value="S4">S4</option>
+                                <option value="S5">S5</option>
+                                <option value="S6">S6</option>
+                            </select>
+                            <label class="filter-checkbox-label">
+                                <input type="checkbox" name="case_sensitive" class="filter-checkbox" />
+                                Sensible à la casse
+                            </label>
+                        </form>
+                    </div>
                 </div>
             </div>
     <script src="/static/script.js"></script>
 </body>
 </html>