iptv-org-mirror/iptv-org.github.io
1
0
Fork 0
mirror of https://github.com/iptv-org/iptv-org.github.io.git synced 2025-05-12 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Create EditButton component

Browse source
This commit is contained in:
freearhey 2023-10-05 05:27:51 +03:00
parent f0ff03f9cf
commit f99b1009c2
3 changed files with 36 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/ChannelPopup.svelte
View file

@ -1,5 +1,6 @@
<script> <script>
import HTMLPreview from '~/components/HTMLPreview.svelte' import HTMLPreview from '~/components/HTMLPreview.svelte'
import EditButton from '~/components/EditButton.svelte'
import { getContext } from 'svelte' import { getContext } from 'svelte'
const { close } = getContext('simple-modal') const { close } = getContext('simple-modal')
@ -19,11 +20,12 @@
<h3 class="text-l font-medium text-gray-900 dark:text-white">{channel.name}</h3> <h3 class="text-l font-medium text-gray-900 dark:text-white">{channel.name}</h3>
</div> </div>
<div class="inline-flex w-1/3 justify-end"> <div class="inline-flex w-1/3 justify-end space-x-3">
<EditButton {channel} />
<button <button
on:click={closePopup} on:click={closePopup}
type="button" type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm w-[32px] h-[32px] justify-center ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
> >
<svg <svg
class="w-5 h-5" class="w-5 h-5"

28
src/components/EditButton.svelte Normal file
View file

@ -0,0 +1,28 @@
<script>
export let channel
const endpoint = 'https://github.com/iptv-org/database/issues/new'
const title = `Edit: ${channel.name}`
const labels = 'channels:edit'
const template = 'channels_edit.yml'
const editUrl = encodeURI(
`${endpoint}?labels=${labels}&template=${template}&title=${title}&id=${channel.id}`
)
function goToEdit() {
window.open(editUrl, '_blank')
}
</script>
<button
on:click={goToEdit}
type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white min-w-[32px] h-[32px] justify-center"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
<path
d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z"
/>
</svg>
</button>

4
src/pages/channel/+page.svelte
View file

@ -2,6 +2,7 @@
import GuideItem from '~/components/GuideItem.svelte' import GuideItem from '~/components/GuideItem.svelte'
import StreamItem from '~/components/StreamItem.svelte' import StreamItem from '~/components/StreamItem.svelte'
import HTMLPreview from '~/components/HTMLPreview.svelte' import HTMLPreview from '~/components/HTMLPreview.svelte'
import EditButton from '~/components/EditButton.svelte'
import NavBar from '~/components/NavBar.svelte' import NavBar from '~/components/NavBar.svelte'
import { onMount } from 'svelte' import { onMount } from 'svelte'
import { fetchChannels, channels } from '~/store' import { fetchChannels, channels } from '~/store'
@ -51,6 +52,9 @@
<div class="w-1/3 overflow-hidden"> <div class="w-1/3 overflow-hidden">
<h1 class="text-l font-medium text-gray-900 dark:text-white">{channel.name}</h1> <h1 class="text-l font-medium text-gray-900 dark:text-white">{channel.name}</h1>
</div> </div>
<div class="inline-flex w-1/3 justify-end space-x-3">
<EditButton {channel} />
</div>
</div> </div>
<div class="overflow-y-auto overflow-x-hidden w-full p-10"> <div class="overflow-y-auto overflow-x-hidden w-full p-10">
<HTMLPreview data={channel} /> <HTMLPreview data={channel} />