Delete site

This commit is contained in:
Aleksandr Statciuk 2022-02-01 19:23:56 +03:00
parent 1214d86174
commit 53066ebc8a
2 changed files with 0 additions and 240 deletions

View file

@ -1,166 +0,0 @@
const ChannelItem = {
props: ['channel'],
template: `
<tr>
<td class="is-vcentered" style="min-width: 150px; text-align: center">
<img
loading="lazy"
referrerpolicy="no-referrer"
v-show="channel.logo"
:src="channel.logo"
style="max-width: 100px; max-height: 50px; vertical-align: middle"
/>
</td>
<td class="is-vcentered" nowrap>
<p v-text="channel.name"></p>
</td>
<td class="is-vcentered" nowrap>
<code v-text="channel.id"></code>
</td>
<td class="is-vcentered">
<p v-for="guide in channel.guides"><code style="white-space: nowrap" v-text="guide"></code></p>
</td>
</tr>
`
}
const CountryItem = {
components: {
ChannelItem
},
props: ['item', 'normQuery', 'regQuery'],
data() {
return {
count: 0
}
},
computed: {
countryChannels() {
if (!this.normQuery) return this.item.channels
return (
this.item.channels.filter(c => {
const normResult = c.key.includes(this.normQuery)
const regResult = this.regQuery
? this.regQuery.test(c.name) || this.regQuery.test(c.id)
: false
return normResult || regResult
}) || []
)
}
},
watch: {
countryChannels: function (value) {
this.count = value.length
}
},
template: `
<div
class="card mb-3 is-shadowless"
style="border: 1px solid #dbdbdb"
v-show="countryChannels && countryChannels.length > 0"
>
<div
class="card-header is-shadowless is-clickable"
@click="item.expanded = !item.expanded"
>
<span class="card-header-title">{{item.flag}}&nbsp;{{item.name}}</span>
<button class="card-header-icon" aria-label="more options">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<path
v-show="!item.expanded"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M112 184l144 144 144-144"
/>
<path
v-show="item.expanded"
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" v-show="item.expanded || (count > 0 && normQuery.length)">
<div class="table-container">
<table class="table" style="min-width: 100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>TVG-ID</th>
<th>EPG</th>
</tr>
</thead>
<tbody>
<channel-item v-for="channel in countryChannels" :channel="channel"></channel-item>
</tbody>
</table>
</div>
</div>
</div>
`
}
const App = {
components: {
CountryItem
},
data() {
return {
isLoading: true,
query: '',
normQuery: '',
regQuery: null,
items: []
}
},
methods: {
search() {
this.normQuery = this.query.replace(/\s/g, '').toLowerCase()
this.regQuery = new RegExp(this.query)
}
},
async mounted() {
const guides = await fetch('api/guides.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.filter(g => g.channel === c.id)
c.key = `${c.id}_${c.name}`.replace(/\s/g, '').toLowerCase()
c.guides = found.map(f => f.url) || []
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')

View file

@ -1,74 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>iptv-org/epg</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
</head>
<body style="background-color: #f6f8fa; min-height: 100vh">
<div id="app">
<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 class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-9">
<form class="mb-5" @submit.prevent="search()">
<div class="field has-addons">
<div class="control is-expanded">
<input
class="input"
type="search"
v-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 v-show="isLoading" class="level">
<div class="level-item">Loading...</div>
</div>
<country-item v-for="item in items" :item="item" :norm-query="normQuery" :reg-query="regQuery"></country-item>
</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>