From 3c1b32746de23fc6752d5d283ba58e171bbc17d6 Mon Sep 17 00:00:00 2001
From: Aleksandr Statciuk <free.arhey@gmail.com>
Date: Sat, 4 Sep 2021 21:51:08 +0300
Subject: [PATCH] Update index.html

---
 .gh-pages/index.html | 170 +++++++++++++++++++++++++------------------
 1 file changed, 98 insertions(+), 72 deletions(-)
diff --git a/.gh-pages/index.html b/.gh-pages/index.html
index 78a7df40..bb08788c 100644
--- a/.gh-pages/index.html
+++ b/.gh-pages/index.html
@@ -4,42 +4,76 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>iptv-org/epg</title>
-    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
   </head>
-  <body>
+  <body style="background-color: #f6f8fa; min-height: 100vh">
+    <div class="container">
+      <div class="navbar" style="background-color: transparent">
+        <div class="navbar-end">
+          <div class="navbar-item">
+            <a href="https://github.com/iptv-org/epg">
+              <span class="icon">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                  <path
+                    d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9a17.56 17.56 0 003.8.4c8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1a102.4 102.4 0 01-22.6 2.7c-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1a63 63 0 0025.6-6c2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8a18.64 18.64 0 015-.5c8.1 0 26.4 3.1 56.6 24.1a208.21 208.21 0 01112.2 0c30.2-21 48.5-24.1 56.6-24.1a18.64 18.64 0 015 .5c12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5a19.35 19.35 0 004-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"
+                  />
+                </svg>
+              </span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
     <div class="section">
-      <div class="container" x-data="data">
+      <div class="container" x-data="list">
         <div class="columns is-centered">
           <div class="column is-9">
-            <div class="field is-grouped">
-              <div class="control is-expanded has-icons-right" :class="{ 'is-loading': isLoading }">
-                <input class="input" type="search" x-model="query" />
-                <span class="icon is-small is-right">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    style="width: 1.25rem; height: 1.25rem"
-                    viewBox="0 0 512 512"
-                  >
-                    <path
-                      d="M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z"
-                    />
-                  </svg>
-                </span>
+            <form class="mb-5" @submit.prevent="search()">
+              <div class="field has-addons">
+                <div class="control is-expanded">
+                  <input
+                    class="input"
+                    type="search"
+                    x-model="query"
+                    placeholder="Search by channel name..."
+                  />
+                </div>
+                <div class="control">
+                  <button class="button is-info" type="submit">
+                    <span class="icon is-small is-right">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        style="width: 1.25rem; height: 1.25rem"
+                        viewBox="0 0 512 512"
+                      >
+                        <path
+                          fill="#ffffff"
+                          d="M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
               </div>
+            </form>
+
+            <div x-show="isLoading" class="level">
+              <div class="level-item">Loading...</div>
             </div>
 
-            <template x-for="country in countries">
+            <template x-for="country in items">
               <div
                 class="card mb-3 is-shadowless"
                 style="border: 1px solid #dbdbdb"
-                x-data="{ 
-                  get countryChannels() { 
+                x-data="{
+                  get countryChannels() {
+                    if (!_query) return country.channels
+
                     return country.channels.filter(c => {
-                      return c.hash.includes(query.toLowerCase())
+                      return c.hash.includes(_query)
                     })
-                  } 
+                  }
                 }"
                 x-show="countryChannels.length > 0"
               >
@@ -52,6 +86,7 @@
                     <span class="icon">
                       <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
                         <path
+                          x-show="!country.show"
                           fill="none"
                           stroke="currentColor"
                           stroke-linecap="round"
@@ -59,38 +94,54 @@
                           stroke-width="48"
                           d="M112 184l144 144 144-144"
                         />
+                        <path
+                          x-show="country.show"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="48"
+                          d="M112 328l144-144 144 144"
+                        />
                       </svg>
                     </span>
                   </button>
                 </div>
                 <div
                   class="card-content"
-                  x-show="country.show || (query.length && countryChannels.length)"
+                  x-show="country.show || (countryChannels.length && _query.length)"
                 >
-                  <table class="table is-fullwidth">
-                    <thead>
-                      <tr>
-                        <td></td>
-                        <td>Name</td>
-                        <td>TVG-ID</td>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <template x-for="channel in countryChannels">
+                  <div class="table-container">
+                    <table class="table is-fullwidth">
+                      <thead>
                         <tr>
-                          <td style="width: 150px; text-align: center">
-                            <img
-                              x-show="channel.logo"
-                              :src="channel.logo"
-                              style="max-width: 100px; max-height: 50px; vertical-align: middle"
-                            />
-                          </td>
-                          <td class="is-vcentered"><div x-text="channel.display_name"></div></td>
-                          <td class="is-vcentered"><code x-text="channel.tvg_id"></code></td>
+                          <td></td>
+                          <td>Name</td>
+                          <td>TVG-ID</td>
                         </tr>
-                      </template>
-                    </tbody>
-                  </table>
+                      </thead>
+                      <tbody>
+                        <template x-for="channel in countryChannels">
+                          <tr>
+                            <td style="width: 150px; text-align: center">
+                              <img
+                                loading="lazy"
+                                x-show="channel.logo"
+                                :src="channel.logo"
+                                style="max-width: 100px; max-height: 50px; vertical-align: middle"
+                              />
+                            </td>
+                            <td class="is-vcentered">
+                              <div x-text="channel.display_name"></div>
+                            </td>
+                            <td class="is-vcentered">
+                              <code x-text="channel.tvg_id"></code>
+                            </td>
+                          </tr>
+                        </template>
+                      </tbody>
+                    </table>
+                  </div>
                 </div>
               </div>
             </template>
@@ -99,31 +150,6 @@
       </div>
     </div>
 
-    <script src="countries.js"></script>
-    <script>
-      document.addEventListener('alpine:init', () => {
-        Alpine.data('data', () => ({
-          countries,
-          query: '',
-          isLoading: true,
-
-          async init() {
-            const channels = await axios
-              .get('http://iptv-org.local/epg/codes.json')
-              .then(r => r.data)
-              .catch(console.log)
-
-            channels.forEach(channel => {
-              if (this.countries[channel.country]) {
-                channel.hash = JSON.stringify(channel).toLowerCase()
-                this.countries[channel.country].channels.push(channel)
-              }
-            })
-
-            this.isLoading = false
-          }
-        }))
-      })
-    </script>
+    <script src="app.js"></script>
   </body>
 </html>
