muqriz
/
SIBS2024
Watch 1
Star 0
Fork 0

2 Commits
53340ac003 ... d83a0ca17e

Author SHA1 Message Date
  Muqriz d83a0ca17e Merge remote-tracking branch 'origin/master' 4 months ago
  Muqriz d619e4f967 add text on maps and fix some 4 months ago
5 changed files with 161 additions and 18 deletions
Unified View Show Diff Stats
  1. 1
    1
      details/detail_hsd2384.html
  2. 156
    14
      index.html
  3. 2
    1
      index.js
  4. 1
    1
      lists/pekan.html
  5. 1
    1
      pdf_pages/view_pdf_hsd2384.html

+ 1
- 1
details/detail_hsd2384.html View File

237
237
238 
     <script>
 238 
     <script>
239 
         var map;
 239 
         var map;
240 
-        var src = 'https://dev.suite.psk.gov.my/kml/HSM%202384.kml';
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSD%202384.kml';
241
241
242 
         function initMap() {
 242 
         function initMap() {
243 
             map = new google.maps.Map(document.getElementById('map'), {
 243 
             map = new google.maps.Map(document.getElementById('map'), {

+ 156
- 14
index.html View File

13 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 13 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
14 
     <link rel="stylesheet" href="./css/app.css">
 14 
     <link rel="stylesheet" href="./css/app.css">
15
15
16 
-
16 
+
17 
+
17 
     <script>
 18 
     <script>
18 
         // window.addEventListener('load', (event) => {
 19 
         // window.addEventListener('load', (event) => {
19 
         //     document.querySelector(".hello").textContent = "Hello from Electron with bulma css!";
 20 
         //     document.querySelector(".hello").textContent = "Hello from Electron with bulma css!";
24 
 <body>
 25 
 <body>
25 
     <section class="section" style="max-height: 120vh;">
 26 
     <section class="section" style="max-height: 120vh;">
26
27
27 
-        <div style="background-image: url(Mask_Group_2.png); min-height: 175px; display: flex; flex-direction: column; justify-content: center; padding-left: 100px;padding-right: 100px;">
28 
+        <div
29 
+            style="background-image: url(Mask_Group_2.png); min-height: 175px; display: flex; flex-direction: column; justify-content: center; padding-left: 100px;padding-right: 100px;">
28 
             <img class="pb-2" src="Group_49433x.png" style="height: auto;width: 8%" alt="">
 30 
             <img class="pb-2" src="Group_49433x.png" style="height: auto;width: 8%" alt="">
29 
             <h6 style="color: white; margin-bottom: 2px;">Pelan Kawasan Tanah Milik Perbadanan</h6>
 31 
             <h6 style="color: white; margin-bottom: 2px;">Pelan Kawasan Tanah Milik Perbadanan</h6>
30 
-            <h6 style="color: white; margin-bottom: 10px;font-weight: 400;">Setiausaha Kerajaan (PSK) Pahang Tanpa Skala</h6>
32 
+            <h6 style="color: white; margin-bottom: 10px;font-weight: 400;">Setiausaha Kerajaan (PSK) Pahang Tanpa Skala
33 
+            </h6>
34 
+
35 
+            <form id="fileForm" style="display: flex; align-items: center;">
36 
+                <input id="fileNumber" type="search" class="p-1"
37 
+                    style="border-radius: 21px; border: none; padding-left: 20px !important; flex: 1;"
38 
+                    placeholder="Search Here">
39 
+                <button class="btn btn-primary" type="submit" style="margin-left: 10px;">Search</button>
40 
+            </form>
41 
+
31
42
32 
-            <input type="search" class="p-1" style="border-radius: 21px; border: none; padding-left: 20px !important;" placeholder="Search Here">
33 
         </div>
 43 
         </div>
34
44
35 
-        <div class="text-center pt-1" style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
45 
+        <div class="text-center pt-1"
46 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 0px;">
36 
             <div class="pt-5" style="width: 600px;height: 100px;">
 47 
             <div class="pt-5" style="width: 600px;height: 100px;">
37 
                 <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
 48 
                 <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
38 
                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
 49 
                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
39 
                     style="enable-background: new 0 0 1080 1080" xml:space="preserve">
 50 
                     style="enable-background: new 0 0 1080 1080" xml:space="preserve">
40 
                     <g>
 51 
                     <g>
41 
                         <!-- Cameron Highland -->
 52 
                         <!-- Cameron Highland -->
42 
-                        <a href="./lists/bentong.html" data-area="cameron-highland"
43 
-                            data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
53 
+                        <a href="./lists/bentong.html" data-area="cameron-highland" data-bs-toggle="tooltip"
54 
+                            data-bs-placement="top" title="Tooltip on top">
44 
                             <path id="cameron-highland" class="pahang-barat" d="M77.6,205.5c11.6-0.8,19.5-9.2,28.7-12c13-4,14.2-13.4,19.1-21.7c0,0,0,0,0,0c0,0,0,0,0,0
 55 
                             <path id="cameron-highland" class="pahang-barat" d="M77.6,205.5c11.6-0.8,19.5-9.2,28.7-12c13-4,14.2-13.4,19.1-21.7c0,0,0,0,0,0c0,0,0,0,0,0
45 
                                 c-0.1-5-0.2-10.1-0.3-15.1c-2.4-4.8-11.7-7.4-4.9-15.2h0c-0.1-1.5-0.3-3.1-0.4-4.6c0,0,0,0,0,0c-3.5-5.5-3.3-11-0.1-16.5
 56 
                                 c-0.1-5-0.2-10.1-0.3-15.1c-2.4-4.8-11.7-7.4-4.9-15.2h0c-0.1-1.5-0.3-3.1-0.4-4.6c0,0,0,0,0,0c-3.5-5.5-3.3-11-0.1-16.5
46 
                                 c0,0,0,0,0,0c0.2-1.4,0.4-2.8,0.6-4.2c0.3,0.6,0.6,1.2,0.8,1.8c-0.1-0.7-0.3-1.3-0.8-1.8c-0.1-4.3-0.2-8.5-0.3-12.8
 57 
                                 c0,0,0,0,0,0c0.2-1.4,0.4-2.8,0.6-4.2c0.3,0.6,0.6,1.2,0.8,1.8c-0.1-0.7-0.3-1.3-0.8-1.8c-0.1-4.3-0.2-8.5-0.3-12.8
231 
                     </g>
 242 
                     </g>
232 
                 </svg>
 243 
                 </svg>
233
244
234 
-
245 
+
235 
             </div>
 246 
             </div>
236 
         </div>
 247 
         </div>
237
248
238
249
239
250
240 
-
241 
-
242 
-
243 
-
244 
-
245
251
246
252
247 
-
253 
+
254 
+
255 
+
256 
+
257 
+
258 
+
248 
     </section>
 259 
     </section>
249
260
250 
     <script defer src="/ruta relativa a mi archivo .js"></script>
 261 
     <script defer src="/ruta relativa a mi archivo .js"></script>
251
262
263 
+    <script>
264 
+
265 
+        document.getElementById('fileForm').addEventListener('submit', function (event) {
266 
+            event.preventDefault(); // Prevent the form from submitting the traditional way
267 
+
268 
+            var fileInput = document.getElementById('fileNumber').value;
269 
+            var numberRegex = /\d/; // Regular expression to check for any digit
270 
+            var matchedFile;
271 
+
272 
+            if (numberRegex.test(fileInput)) {
273 
+                // Hardcoded list of files containing numbers
274 
+                var numberFiles = [
275 
+                    'details/detail_hsd2384.html',
276 
+                    'details/detail_hsd4638.html',
277 
+                    'details/detail_hsd5621.html',
278 
+                    'details/detail_hsd5625.html',
279 
+                    'details/detail_hsd5627.html',
280 
+                    'details/detail_hsd5714.html',
281 
+                    'details/detail_hsd5715.html',
282 
+                    'details/detail_hsd5734.html',
283 
+                    'details/detail_hsd5738.html',
284 
+                    'details/detail_hsd5745.html',
285 
+                    'details/detail_hsd5749.html',
286 
+                    'details/detail_hsd5761.html',
287 
+                    'details/detail_hsd5762.html',
288 
+                    'details/detail_hsd5763.html',
289 
+                    'details/detail_hsd5764.html',
290 
+                    'details/detail_hsd11863.html',
291 
+                    'details/detail_hsd11991.html',
292 
+                    'details/detail_pn16507.html',
293 
+                    'details/detail_pn28612.html',
294 
+                    'details/penternakan_hsd_19372.html'
295 
+                ];
296 
+
297 
+                var regex = new RegExp(fileInput);
298 
+                matchedFile = numberFiles.find(file => regex.test(file));
299 
+            } else {
300 
+                // Hardcoded list of files containing names
301 
+                var nameFiles = [
302 
+                    'lists/bentong.html',
303 
+                    'lists/maran.html',
304 
+                    'lists/pekan.html',
305 
+                    'lists/raub.html',
306 
+                    'lists/rompin.html',
307 
+                    'lists/temerloh.html'
308 
+                ];
309 
+
310 
+                var nameRegex = new RegExp(fileInput, 'i'); // Case-insensitive search
311 
+                matchedFile = nameFiles.find(file => nameRegex.test(file));
312 
+            }
313 
+
314 
+            if (matchedFile) {
315 
+                // File found, redirect to it
316 
+                window.location.href = matchedFile;
317 
+            } else {
318 
+                alert('No file containing the input ' + fileInput + ' was found.');
319 
+            }
320 
+        });
321 
+    </script>
322 
+
323 
+    <script>
324 
+        let maran = document.querySelector("#maran");
325 
+        let cameronHighland = document.querySelector("#cameron-highland");
326 
+        let bentong = document.querySelector("#bentong");
327 
+        let lipis = document.querySelector("#lipis");
328 
+        let raub = document.querySelector("#raub");
329 
+        let jerantut = document.querySelector("#jerantut");
330 
+        let kuantan = document.querySelector("#kuantan");
331 
+        let temerloh = document.querySelector("#temerloh");
332 
+        let rompin = document.querySelector("#rompin");
333 
+        let bera = document.querySelector("#bera");
334 
+        let pekan = document.querySelector("#pekan");
335 
+
336 
+        addLabelText(maran, "Maran");
337 
+        addLabelText(cameronHighland, "Cameron");
338 
+        addLabelText(cameronHighland, "Highland");
339 
+        addLabelText(bentong, "Bentong");
340 
+        addLabelText(lipis, "Lipis");
341 
+        addLabelText(raub, "Raub");
342 
+        addLabelText(jerantut, "Jerantut");
343 
+        addLabelText(kuantan, "Kuantan");
344 
+        addLabelText(temerloh, "Temerloh");
345 
+        addLabelText(rompin, "Rompin");
346 
+        addLabelText(bera, "Bera");
347 
+        addLabelText(pekan, "Pekan");
348 
+
349 
+        function addLabelText(bgPath, labelText) {
350 
+            let bbox = bgPath.getBBox();
351 
+            let x = bbox.x + bbox.width / 2;
352 
+            let y = bbox.y + bbox.height / 2;
353 
+
354 
+            // Create a <text> element
355 
+            let textElem = document.createElementNS(bgPath.namespaceURI, "text");
356 
+            // X axis
357 
+            if (labelText == "Bentong") {
358 
+                textElem.setAttribute("x", 286);
359 
+            } else if (labelText == "Pekan") {
360 
+                textElem.setAttribute("x", 870);
361 
+            } else if (labelText == "Cameron") {
362 
+                textElem.setAttribute("x", 75);
363 
+            } else {
364 
+                textElem.setAttribute("x", x);
365 
+            }
366 
+            // Y axis
367 
+            if (labelText == "Rompin") {
368 
+                textElem.setAttribute("y", 935);
369 
+            } else if (labelText == "Pekan") {
370 
+                textElem.setAttribute("y", 650);
371 
+            } else if (labelText == "Kuantan") {
372 
+                textElem.setAttribute("y", 440);
373 
+            } else if (labelText == "Cameron") {
374 
+                textElem.setAttribute("y", 130);
375 
+            } else if (labelText == "Highland") {
376 
+                textElem.setAttribute("y", 155);
377 
+            } else {
378 
+                textElem.setAttribute("y", y);
379 
+            }
380 
+            // Centre text horizontally at x,y
381 
+            textElem.setAttribute("text-anchor", "middle");
382 
+            // Give it a class that will determine the text size, colour, etc
383 
+            if (labelText == "Cameron" || labelText == "Highland") {
384 
+                textElem.classList.add("label-text-cameron");
385 
+            } else {
386 
+                textElem.classList.add("label-text");
387 
+            }
388 
+            // Set the text
389 
+            textElem.textContent = labelText;
390 
+            // Add this text element directly after the label background path
391 
+            bgPath.after(textElem);
392 
+        }
393 
+    </script>
252 
 </body>
 394 
 </body>
253
395
254 
 </html>
 396 
 </html>

+ 2
- 1
index.js View File

8 
 const createWindow = () => {
 8 
 const createWindow = () => {
9 
   const win = new BrowserWindow({
 9 
   const win = new BrowserWindow({
10 
     width: 800,
 10 
     width: 800,
11 
-    height: 600
11 
+    height: 600,
12 
+
12 
   })
 13 
   })
13 
   //The HTML file that will be shown, we will create this file in the next section.
 14 
   //The HTML file that will be shown, we will create this file in the next section.
14 
   win.setMenuBarVisibility(false)
 15 
   win.setMenuBarVisibility(false)

+ 1
- 1
lists/pekan.html View File

20
20
21 
         <div class=""
 21 
         <div class=""
22 
             style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
 22 
             style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
23 
-            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="index.html"><i
23 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../index.html"><i
24 
                         class="fas fa-chevron-left"></i></a></h6>
 24 
                         class="fas fa-chevron-left"></i></a></h6>
25 
             <h6 style="color: white;">Pekan</h6>
 25 
             <h6 style="color: white;">Pekan</h6>
26 
         </div>
 26 
         </div>

+ 1
- 1
pdf_pages/view_pdf_hsd2384.html View File

157 
             style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
 157 
             style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
             <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd2384.html"><i
 158 
             <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd2384.html"><i
159 
                         class="fas fa-chevron-left"></i></a></h6>
 159 
                         class="fas fa-chevron-left"></i></a></h6>
160 
-            <h6 style="color: white;">Jerantut</h6>
160 
+            <h6 style="color: white;">Maran</h6>
161 
         </div>
 161 
         </div>
162
162
163 
         <!-- <div class="text-center pt-5"
 163 
         <!-- <div class="text-center pt-5"

Write Preview
Loading…
Cancel
Save