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