ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-06-07 15:50:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

#111 package bottles table

Browse source
This commit is contained in:
neil 2022-12-29 11:20:42 +08:00
parent c62de97053
commit 1ca7d9acdd
6 changed files with 95 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
modules/gui/src-tauri/tauri.conf.json
View file

@ -15,7 +15,7 @@
"http": {
"all": true,
"request": true,
"scope": ["https://api.tea.xyz/v1/*", "https://github.com/*"]
"scope": ["https://api.tea.xyz/v1/*", "https://github.com/*", "https://app.tea.xyz/*"]
},
"shell": {
"all": true,

18
modules/gui/src/components/PackageBanner/PackageBanner.svelte
View file

@ -1,12 +1,15 @@
<script lang="ts">
import '$appcss';
import '@tea/ui/icons/icons.css';
import type { Package } from '@tea/ui/types';
import type { Package, Bottle } from '@tea/ui/types';
import Button from '@tea/ui/Button/Button.svelte';
import StarRating from '@tea/ui/StarRating/StarRating.svelte';
import Bottles from '@tea/ui/Bottles/Bottles.svelte';
import { onMount } from 'svelte';
import { getPackageBottles } from '@api';
export let pkg: Package;
let bottles: Bottle[] = [];
let packageRating = 0;
let copyButtonText = 'COPY';
const copyValue = `sh <(curl tea.xyz ) +${pkg.full_name}`;
@ -15,6 +18,14 @@
copyButtonText = 'COPIED!';
navigator.clipboard.writeText(copyValue);
};
onMount(async () => {
try {
bottles = await getPackageBottles(pkg.full_name);
} catch (err) {
console.error(err);
}
});
</script>
<section class="mt-4 border border-gray bg-black">
@ -33,6 +44,9 @@
<p class="mt-4 font-sono text-sm">{pkg.desc}</p>
</article>
</header>
<section>
<Bottles {bottles} />
</section>
<footer class="flex h-20 border-t border-gray text-white">
<input class="click-copy flex-grow bg-black pl-4" disabled value={copyValue} />
<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>

15
modules/gui/src/libs/api/mock.ts
View file

@ -5,7 +5,7 @@
* TODO:
* * make cors work with api.tea.xyz/v1
*/
import type { Package, Review, AirtablePost } from '@tea/ui/types';
import type { Package, Review, AirtablePost, Bottle } from '@tea/ui/types';
import type { GUIPackage, Course, Category } from '../types';
import { PackageStates } from '../types';
import { loremIpsum } from 'lorem-ipsum';
@ -322,3 +322,16 @@ export async function getCategorizedPackages(): Promise<Category[]> {
}
];
}
export async function getPackageBottles(name: string): Promise<Bottle[]> {
return [
{ name, platform: 'darwin', arch: 'aarch64', version: '3.39.4' },
{ name, platform: 'darwin', arch: 'aarch64', version: '3.40.0' },
{ name, platform: 'darwin', arch: 'x86-64', version: '3.39.4' },
{ name, platform: 'darwin', arch: 'x86-64', version: '3.40.0' },
{ name, platform: 'linux', arch: 'aarch64', version: '3.39.4' },
{ name, platform: 'linux', arch: 'aarch64', version: '3.40.0' },
{ name, platform: 'linux', arch: 'x86-64', version: '3.39.4' },
{ name, platform: 'linux', arch: 'x86-64', version: '3.40.0' }
];
}

11
modules/gui/src/libs/api/tauri.ts
View file

@ -14,7 +14,7 @@ import { getClient } from '@tauri-apps/api/http';
// import { invoke } from '@tauri-apps/api';
import { Command } from '@tauri-apps/api/shell';
import { readDir, BaseDirectory } from '@tauri-apps/api/fs';
import type { Package, Review, AirtablePost } from '@tea/ui/types';
import type { Package, Review, AirtablePost, Bottle } from '@tea/ui/types';
import type { GUIPackage, Course, Category } from '../types';
import * as mock from './mock';
import { PackageStates } from '../types';
@ -163,3 +163,12 @@ export async function getCategorizedPackages(): Promise<Category[]> {
const categories = await get<Category[]>('/packages/categorized');
return categories;
}
export async function getPackageBottles(packageName: string): Promise<Bottle[]> {
console.log('getting bottles for ', packageName);
const client = await getClient();
const uri = join('https://app.tea.xyz/api/bottles/', packageName);
const { data } = await client.get<Bottle[]>(uri.toString());
console.log('got bottles', data);
return data;
}

47
modules/ui/src/Bottles/Bottles.svelte Normal file
View file

@ -0,0 +1,47 @@
<script lang="ts">
import type { Bottle } from '../types';
export let bottles: Bottle[];
let versions: string[] = [];
let available: Set<string>;
$: versions = [...new Set(bottles.map((b) => b.version))];
$: available = new Set(bottles.map((b) => `${b.platform}-${b.arch}`));
</script>
<div class="my-4 w-full p-2">
<div>
<h4 class="mb-4 text-lg text-primary">
{versions.length} version{versions.length === 1 ? '' : 's'} bottled
</h4>
</div>
<table class="w-full table-auto border border-gray font-sono">
<thead>
<tr>
<th class="border border-gray px-2 py-4">version</th>
<th class="border border-gray px-2 py-4">darwin-aarch64</th>
<th class="border border-gray px-2 py-4">darwin-x86-64</th>
<th class="border border-gray px-2 py-4">linux-aarch64</th>
<th class="border border-gray px-2 py-4">linux-x86-64</th>
</tr>
</thead>
<tbody>
{#each versions as version}
<tr>
<th class="border border-gray px-2 py-4 text-left">{version}</th>
<td class="border border-gray px-2 py-4"
>{available.has('darwin-aarch64') ? '✅' : '❌'}</td
>
<td class="border border-gray px-2 py-4"
>{available.has('darwin-x86-64') ? '✅' : '❌'}</td
>
<td class="border border-gray px-2 py-4"
>{available.has('linux-aarch64') ? '✅' : '❌'}</td
>
<td class="border border-gray px-2 py-4">{available.has('linux-x86-64') ? '✅' : '❌'}</td
>
</tr>
{/each}
</tbody>
</table>
</div>

7
modules/ui/src/types.ts
View file

@ -34,3 +34,10 @@ export type AirtablePost = {
published_at: Date;
tags: string[];
};
export type Bottle = {
name: string;
platform: string;
arch: string;
version: string;
};