diff --git a/.gh-pages/app.js b/.gh-pages/app.js index 73cbd1fb..63a16e5b 100644 --- a/.gh-pages/app.js +++ b/.gh-pages/app.js @@ -1,54 +1,158 @@ -document.addEventListener('alpine:init', () => { - Alpine.data('list', () => ({ - isLoading: true, - query: '', - _query: '', - items: [], +const ChannelItem = { + props: ['channel'], + template: ` + + + + + +

+ + + + + +

+ + + ` +} - search() { - this._query = this.query.toLowerCase() - }, - - async init() { - const countries = await fetch('api/countries.json') - .then(response => response.json()) - .catch(console.log) - - const channels = await fetch('api/channels.json') - .then(response => response.json()) - .catch(console.log) - - let items = {} - for (let channel of channels) { - if (!items[channel.country]) { - if (!countries[channel.country]) { - console.log('Warning: Wrong country code', channel) - continue - } - - const country = countries[channel.country] - - items[channel.country] = { - flag: country.flag, - name: country.name, - expanded: false, - channels: [] - } - } - - channel.hash = `${channel.id}_${channel.name}`.toLowerCase() - - items[channel.country].channels.push(channel) - } - - items = Object.values(items).sort((a, b) => { - if (a.name > b.name) return 1 - if (a.name < b.name) return -1 - return 0 - }) - - this.items = items - this.isLoading = false +const CountryItem = { + components: { + ChannelItem + }, + props: ['item', 'query'], + data() { + return { + count: 0 } - })) -}) + }, + computed: { + countryChannels() { + if (!this.query) return this.item.channels + + return ( + this.item.channels.filter(c => { + return c.key.includes(this.query) + }) || [] + ) + } + }, + watch: { + countryChannels: function (value) { + this.count = value.length + } + }, + template: ` +
+
+ {{item.flag}} {{item.name}} + +
+
+
+ + + + + + + + + + + + +
NameTVG-IDEPG
+
+
+
+ ` +} + +const App = { + components: { + CountryItem + }, + data() { + return { + isLoading: true, + query: '', + normQuery: '', + items: [] + } + }, + methods: { + search() { + this.normQuery = this.query.replace(/\s/g, '').toLowerCase() + } + }, + async mounted() { + const guides = await fetch('https://iptv-org.github.io/epg/api/channels.json') + .then(response => response.json()) + .catch(console.log) + + const channels = await fetch('https://iptv-org.github.io/api/channels.json') + .then(response => response.json()) + .then(arr => + arr.map(c => { + const found = guides.find(g => g.id === c.id) + c.key = `${c.id}_${c.name}`.replace(/\s/g, '').toLowerCase() + c.guides = found ? found.guides : [] + return c + }) + ) + .then(arr => groupBy(arr, 'country')) + .catch(console.log) + + const countries = await fetch('https://iptv-org.github.io/api/countries.json') + .then(response => response.json()) + .catch(console.log) + + this.items = countries.map(i => { + i.expanded = false + i.channels = channels[i.code] || [] + return i + }) + + this.isLoading = false + } +} + +Vue.createApp(App).mount('#app') diff --git a/.gh-pages/index.html b/.gh-pages/index.html index 1d28b8b0..6249ab8b 100644 --- a/.gh-pages/index.html +++ b/.gh-pages/index.html @@ -5,154 +5,65 @@ iptv-org/epg - + + -
-
-
- - - - - - - +
+
+
+
+ + + + + + + +
-
-
-
-
-
-
-
-
- -
-
- -
-
-
- -
-
Loading...
-
- - + + +