Hugging Face's logo

Spaces:
eshan6704
/
backendfastapi
Running

App Files Community
1
eshan6704 commited on
Commit
7040167
·
verified ·
1 Parent(s): e01da75

Create ui_html.py

Browse files
Files changed (1) hide show
  1. app/ui_html.py +164 -0
app/ui_html.py ADDED
@@ -0,0 +1,164 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # ui_html.py
2
+ from . import screener
3
+
4
+ def build_frontend_html():
5
+ return """
6
+ <!DOCTYPE html>
7
+ <html lang="en">
8
+ <head>
9
+ <meta charset="UTF-8">
10
+ <title>Stock / Index Backend UI</title>
11
+
12
+ <style>
13
+ body {
14
+ font-family: Arial, sans-serif;
15
+ margin: 0;
16
+ padding: 10px;
17
+ }
18
+ .controls {
19
+ display: flex;
20
+ flex-wrap: wrap;
21
+ gap: 10px;
22
+ }
23
+ select, input, button {
24
+ padding: 6px;
25
+ font-size: 14px;
26
+ }
27
+ #response {
28
+ margin-top: 15px;
29
+ padding: 10px;
30
+ border: 1px solid #ccc;
31
+ height: calc(100vh - 120px);
32
+ overflow: auto;
33
+ }
34
+ </style>
35
+ </head>
36
+
37
+ <body>
38
+
39
+ <h2>Stock / Index Fetcher</h2>
40
+
41
+ <div class="controls">
42
+ <select id="mode">
43
+ <option value="stock">stock</option>
44
+ <option value="index">index</option>
45
+ <option value="screener">screener</option>
46
+ </select>
47
+
48
+ <select id="req_type"></select>
49
+ <select id="name"></select>
50
+
51
+ <input id="date_start" placeholder="YYYY-MM-DD">
52
+ <input id="date_end" placeholder="YYYY-MM-DD">
53
+
54
+ <button onclick="fetchData()">Fetch</button>
55
+ </div>
56
+
57
+ <div id="response">Loading req_type list...</div>
58
+
59
+ <script>
60
+ const API_URL = "/api/fetch";
61
+ let REQ_MAP = {};
62
+
63
+ /* ---------------- LOAD LIST ---------------- */
64
+ async function loadReqTypes() {
65
+ const res = await fetch(API_URL, {
66
+ method: "POST",
67
+ headers: {"Content-Type":"application/json"},
68
+ body: JSON.stringify({ mode: "list" })
69
+ });
70
+
71
+ const html = await res.text();
72
+ const doc = new DOMParser().parseFromString(html, "text/html");
73
+
74
+ REQ_MAP = { stock: [], index: [], screener: [] };
75
+
76
+ doc.querySelectorAll("li").forEach(li => {
77
+ const mode = li.dataset.mode;
78
+ const type = li.dataset.type;
79
+ const names = (li.dataset.names || "").split(",").filter(Boolean);
80
+
81
+ if (mode && type) {
82
+ REQ_MAP[mode].push({ type, names });
83
+ }
84
+ });
85
+
86
+ updateReqType();
87
+ }
88
+
89
+ /* ---------------- REQ TYPE ---------------- */
90
+ function updateReqType() {
91
+ const mode = document.getElementById("mode").value;
92
+ const sel = document.getElementById("req_type");
93
+ sel.innerHTML = "";
94
+
95
+ REQ_MAP[mode].forEach(r => {
96
+ const o = document.createElement("option");
97
+ o.value = r.type;
98
+ o.textContent = r.type;
99
+ sel.appendChild(o);
100
+ });
101
+
102
+ if (mode === "stock") sel.value = "info";
103
+ if (mode === "index") sel.value = "indices";
104
+ if (mode === "screener") sel.value = "from-high";
105
+
106
+ updateName();
107
+ }
108
+
109
+ /* ---------------- NAME ---------------- */
110
+ function updateName() {
111
+ const mode = document.getElementById("mode").value;
112
+ const rt = document.getElementById("req_type").value;
113
+ const sel = document.getElementById("name");
114
+ sel.innerHTML = "";
115
+
116
+ const entry = REQ_MAP[mode].find(r => r.type === rt);
117
+
118
+ if (entry && entry.names.length) {
119
+ entry.names.forEach(n => {
120
+ const o = document.createElement("option");
121
+ o.value = n;
122
+ o.textContent = n;
123
+ sel.appendChild(o);
124
+ });
125
+ } else {
126
+ const o = document.createElement("option");
127
+ o.value = "";
128
+ o.textContent = "-- none --";
129
+ sel.appendChild(o);
130
+ }
131
+
132
+ if (mode === "stock") sel.value = "ITC";
133
+ if (mode === "index") sel.value = "NIFTY 50";
134
+ }
135
+
136
+ /* ---------------- FETCH ---------------- */
137
+ async function fetchData() {
138
+ const payload = {
139
+ mode: mode.value,
140
+ req_type: req_type.value,
141
+ name: name.value,
142
+ date_start: date_start.value,
143
+ date_end: date_end.value
144
+ };
145
+
146
+ const res = await fetch(API_URL, {
147
+ method: "POST",
148
+ headers: {"Content-Type":"application/json"},
149
+ body: JSON.stringify(payload)
150
+ });
151
+
152
+ document.getElementById("response").innerHTML = await res.text();
153
+ }
154
+
155
+ /* EVENTS */
156
+ mode.addEventListener("change", updateReqType);
157
+ req_type.addEventListener("change", updateName);
158
+
159
+ loadReqTypes();
160
+ </script>
161
+
162
+ </body>
163
+ </html>
164
+ """