mirror of
https://github.com/iptv-org/iptv-org.github.io.git
synced 2025-05-11 17:40:05 -04:00
Removes JSON preview
This commit is contained in:
Arhey
parent
1cafbccc9e
commit
309fa25d35
2 changed files with 74 additions and 113 deletions
|
|
@ -1,58 +1,23 @@
|
|||
<script>
|
||||
import JsonDataViewer from './JsonDataViewer.svelte'
|
||||
import HTMLPreview from './HTMLPreview.svelte'
|
||||
import HTMLPreview from '~/components/HTMLPreview.svelte'
|
||||
import { getContext } from 'svelte'
|
||||
const { close } = getContext('simple-modal')
|
||||
|
||||
export let channel
|
||||
|
||||
let view = 'html'
|
||||
function switchView(value) {
|
||||
view = value
|
||||
}
|
||||
|
||||
const closePopup = () => {
|
||||
close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.active {
|
||||
background-color: #f3f4f6;
|
||||
color: #111828;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="relative px-2 py-[4rem] flex justify-center" on:click|self="{closePopup}">
|
||||
<div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-4xl">
|
||||
<div class="relative px-2 py-[4rem] flex justify-center" on:keypress on:click|self="{closePopup}">
|
||||
<div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-[820px]">
|
||||
<div
|
||||
class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
|
||||
>
|
||||
<div class="w-1/3 overflow-hidden">
|
||||
<div class="w-2/3 overflow-hidden">
|
||||
<h3 class="text-l font-medium text-gray-900 dark:text-white">{channel.name}</h3>
|
||||
</div>
|
||||
<div class="inline-flex justify-center w-1/3">
|
||||
<div class="inline-flex rounded-md" role="group">
|
||||
<button
|
||||
type="button"
|
||||
area-selected="{view === 'html'}"
|
||||
on:click="{() => switchView('html')}"
|
||||
class:active="{view === 'html'}"
|
||||
class="py-2 px-4 text-xs font-medium text-gray-900 bg-white rounded-l-lg border border-gray-200 hover:bg-gray-100 dark:border-gray-700 dark:bg-transparent dark:text-white dark:hover:text-white dark:hover:bg-gray-600"
|
||||
>
|
||||
HTML
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
area-selected="{view === 'html'}"
|
||||
on:click="{() => switchView('json')}"
|
||||
class:active="{view === 'json'}"
|
||||
class="py-2 px-4 text-xs font-medium text-gray-900 bg-white border-t border-b border-r rounded-r-lg border-gray-200 hover:bg-gray-100 dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-600"
|
||||
>
|
||||
JSON
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flex w-1/3 justify-end">
|
||||
<button
|
||||
|
|
@ -76,15 +41,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="overflow-y-scroll overflow-x-hidden w-full">
|
||||
{#if view === 'json'}
|
||||
<div class="pb-8 px-8 pt-6">
|
||||
<div class="flex p-4 bg-gray-50 dark:bg-gray-700 rounded-md w-full">
|
||||
<JsonDataViewer data="{channel._raw}" />
|
||||
</div>
|
||||
<div class="p-12 pt-10">
|
||||
<HTMLPreview data="{channel}" close="{closePopup}" />
|
||||
</div>
|
||||
{:else if view === 'html'}
|
||||
<HTMLPreview data="{channel}" close="{closePopup}" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,80 +1,82 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { JsonView } from '@zerodevx/svelte-json-view'
|
||||
import { onMount } from 'svelte'
|
||||
import { JsonView } from '@zerodevx/svelte-json-view'
|
||||
|
||||
export let data
|
||||
let dark = false
|
||||
export let data
|
||||
let dark = false
|
||||
|
||||
let fieldset = []
|
||||
for (let key in data) {
|
||||
if (key.startsWith('_')) continue
|
||||
fieldset.push({
|
||||
name: key,
|
||||
value: data[key]
|
||||
})
|
||||
}
|
||||
let fieldset = []
|
||||
for (let key in data) {
|
||||
if (key.startsWith('_')) continue
|
||||
fieldset.push({
|
||||
name: key,
|
||||
value: data[key]
|
||||
})
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (
|
||||
localStorage.getItem('color-theme') === 'light' ||
|
||||
(!('color-theme' in localStorage) &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
) {
|
||||
dark = false
|
||||
} else {
|
||||
dark = true
|
||||
}
|
||||
})
|
||||
onMount(() => {
|
||||
if (
|
||||
localStorage.getItem('color-theme') === 'light' ||
|
||||
(!('color-theme' in localStorage) &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
) {
|
||||
dark = false
|
||||
} else {
|
||||
dark = true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:global(.value .val),
|
||||
:global(.value .key) {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
|
||||
'Courier New', monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
:global(.value .val),
|
||||
:global(.value .key) {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
|
||||
'Courier New', monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
:global(.dark .value) {
|
||||
--leafDefaultColor: white;
|
||||
--leafStringColor: white;
|
||||
--leafNumberColor: white;
|
||||
--leafBooleanColor: white;
|
||||
--nodeColor: white;
|
||||
}
|
||||
:global(.dark .value) {
|
||||
--leafDefaultColor: white;
|
||||
--leafStringColor: white;
|
||||
--leafNumberColor: white;
|
||||
--leafBooleanColor: white;
|
||||
--jsonValStringColor: white;
|
||||
--nodeColor: white;
|
||||
}
|
||||
|
||||
:global(.value) {
|
||||
--nodeBorderLeft: 1px dotted #9ca3b0;
|
||||
--leafDefaultColor: #525a69;
|
||||
--leafStringColor: #525a69;
|
||||
--leafNumberColor: #525a69;
|
||||
--leafBooleanColor: #525a69;
|
||||
--nodeColor: #525a69;
|
||||
}
|
||||
:global(.value) {
|
||||
--nodeBorderLeft: 1px dotted #9ca3b0;
|
||||
--leafDefaultColor: #525a69;
|
||||
--leafStringColor: #525a69;
|
||||
--leafNumberColor: #525a69;
|
||||
--leafBooleanColor: #525a69;
|
||||
--jsonValStringColor: #525a69;
|
||||
--nodeColor: #525a69;
|
||||
}
|
||||
|
||||
:global(.value .key),
|
||||
:global(.value .comma) {
|
||||
color: #9ca3b0;
|
||||
}
|
||||
:global(.value .key),
|
||||
:global(.value .comma) {
|
||||
color: #9ca3b0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<table class="table-fixed w-full dark:text-white">
|
||||
<tbody>
|
||||
{#each fieldset as field}
|
||||
<tr>
|
||||
<td
|
||||
class="w-[7rem] md:w-[11rem] px-4 py-1 text-sm text-gray-400 whitespace-nowrap dark:text-gray-400 align-top"
|
||||
>
|
||||
{field.name}
|
||||
</td>
|
||||
<td class="px-4 py-1 text-sm text-gray-600 dark:text-gray-100 align-top value break-words">
|
||||
{#if Array.isArray(field.value) && field.value.length}
|
||||
<JsonView json="{field.value}" />
|
||||
{:else}
|
||||
<code>{JSON.stringify(field.value)}</code>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
<tbody>
|
||||
{#each fieldset as field}
|
||||
<tr>
|
||||
<td
|
||||
class="w-[7rem] md:w-[11rem] px-4 py-1 text-sm text-gray-400 whitespace-nowrap dark:text-gray-400 align-top"
|
||||
>
|
||||
{field.name}
|
||||
</td>
|
||||
<td class="px-4 py-1 text-sm text-gray-600 dark:text-gray-100 align-top value break-words">
|
||||
{#if Array.isArray(field.value) && field.value.length}
|
||||
<JsonView json="{field.value}" />
|
||||
{:else}
|
||||
<code>{JSON.stringify(field.value)}</code>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue