mirror of
https://github.com/ivabus/gui
synced 2025-04-23 14:07:14 +03:00
improve tea cli installed check (#346)
* #342 improve installed check * #342 add close button for the modal --------- Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>
This commit is contained in:
parent
c48d0435d3
commit
7a1d5fd64d
4 changed files with 61 additions and 32 deletions
|
@ -4,6 +4,8 @@
|
|||
import { openTerminal, isPackageInstalled } from '@native';
|
||||
import { packagesStore } from "$libs/stores";
|
||||
|
||||
const log = window.require("electron-log");
|
||||
|
||||
export let tea:GUIPackage|undefined;
|
||||
|
||||
let installing = false;
|
||||
|
@ -13,16 +15,27 @@
|
|||
if (checkTeaPoll) return;
|
||||
return new Promise((resolve) => {
|
||||
checkTeaPoll = setInterval(async () => {
|
||||
const installed = await isPackageInstalled("tea.xyz", tea?.version);
|
||||
if (installed && checkTeaPoll) {
|
||||
clearInterval(checkTeaPoll);
|
||||
checkTeaPoll = null;
|
||||
resolve(null);
|
||||
try {
|
||||
log.info("checking if tea is installed");
|
||||
const installed = await isPackageInstalled("tea.xyz", tea?.version);
|
||||
log.info("tea is installed:", installed);
|
||||
if (installed && checkTeaPoll) {
|
||||
clearInterval(checkTeaPoll);
|
||||
checkTeaPoll = null;
|
||||
resolve(null);
|
||||
close();
|
||||
}
|
||||
} catch (error) {
|
||||
log.error(error);
|
||||
}
|
||||
}, 5000); // check every 5s
|
||||
})
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
packagesStore.requireTeaCli.set(false);
|
||||
}
|
||||
|
||||
const onOpenTerminal = async () => {
|
||||
if (installing) return;
|
||||
installing = true;
|
||||
|
@ -42,25 +55,36 @@
|
|||
</script>
|
||||
|
||||
<section class="fixed z-10 top-0 left-0 flex items-center justify-center">
|
||||
<article class="flex margin-auto p-2 border border-gray rounded-md">
|
||||
<figure>
|
||||
<img class="object-contain" src="/images/welcome-bg.png" alt="welcome"/>
|
||||
</figure>
|
||||
<div class="flex-grow flex flex-col justify-center px-12">
|
||||
<h1 class="text-primary text-4xl mb-4">Welcome to the tea app!</h1>
|
||||
<p class="font-inter mb-4">This app is your gateway into the world of open-source software. Easily explore and manage packages with a click of a button. This app will notify you of any available software updates to ensure you’re safe and secure. Under the hood is the powerful tea cli.</p>
|
||||
<Button type="plain" color="secondary" class={`w-7/12 ${installing && "animate-pulse"}`}
|
||||
onClick={onOpenTerminal}
|
||||
>
|
||||
INSTALL TEA CLI v{tea?tea.version:"latest"}
|
||||
</Button>
|
||||
<p class="text-gray text-sm mt-2">tea cli is required in order to use our app. Clicking the link above will automatically install it via your command-line.</p>
|
||||
</div>
|
||||
</article>
|
||||
<button id="btn-cover" class="opacity-0 absolute" on:click={() => {
|
||||
close();
|
||||
}}></button>
|
||||
<aside class="relative">
|
||||
<article class="flex margin-auto p-2 border border-gray rounded-md">
|
||||
<figure>
|
||||
<img class="object-contain" src="/images/welcome-bg.png" alt="welcome"/>
|
||||
</figure>
|
||||
<div class="flex-grow mt-20 px-12 relative">
|
||||
<h1 class="text-primary text-4xl mb-4">Welcome to the tea app!</h1>
|
||||
<p class="font-inter mb-4">This app is your gateway into the world of open-source software. Easily explore and manage packages with a click of a button. This app will notify you of any available software updates to ensure you’re safe and secure. Under the hood is the powerful tea cli.</p>
|
||||
<Button type="plain" color="secondary" class={`w-7/12 ${installing && "animate-pulse"}`}
|
||||
onClick={onOpenTerminal}
|
||||
>
|
||||
INSTALL TEA CLI v{tea?tea.version:"latest"}
|
||||
</Button>
|
||||
<p class="text-gray text-sm mt-2">tea cli is required in order to use our app. Clicking the link above will automatically install it via your command-line.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<button class="icon-tea-x-btn absolute text-gray top-5 right-5 cursor-default"
|
||||
on:click={() => {
|
||||
close()
|
||||
}}
|
||||
></button>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
section {
|
||||
section, #btn-cover {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba(0,0,0, 0.5);
|
||||
|
|
|
@ -215,12 +215,12 @@ export const submitLogs = async () => {
|
|||
export const isPackageInstalled = async (fullName: string, version?: string): Promise<boolean> => {
|
||||
let isInstalled = false;
|
||||
const pkgs = await getInstalledPackages();
|
||||
const teaPkg = pkgs.find((p) => p.full_name === fullName);
|
||||
const pkg = pkgs.find((p) => p.full_name === fullName);
|
||||
|
||||
if (teaPkg) {
|
||||
if (pkg) {
|
||||
isInstalled = true;
|
||||
if (version) {
|
||||
isInstalled = teaPkg.installed_versions.includes(version);
|
||||
isInstalled = pkg.installed_versions.includes(version);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -31,6 +31,7 @@ export default function initPackagesStore() {
|
|||
let initialized = false;
|
||||
const syncProgress = writable<number>(0); // TODO: maybe use this in the UI someday
|
||||
const packages = writable<GUIPackage[]>([]);
|
||||
const requireTeaCli = writable<boolean>(false);
|
||||
|
||||
let packagesIndex: Fuse<GUIPackage>;
|
||||
|
||||
|
@ -78,6 +79,11 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
|
|||
};
|
||||
|
||||
const checkTeaCLIPackage = async (teaPkg: Package, installedPkg?: InstalledPackage) => {
|
||||
if (!installedPkg) {
|
||||
requireTeaCli.set(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const isUpToDate = teaPkg.version === installedPkg?.installed_versions[0];
|
||||
log.info("check if Tea-CLI is up to date:", isUpToDate);
|
||||
//TODO: Is there where we handle the case of tea not being installed at all?
|
||||
|
@ -116,13 +122,11 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
|
|||
|
||||
log.info("sync test for tea-cli");
|
||||
const distTea = pkgs.find((p) => p.full_name === "tea.xyz");
|
||||
const installedTeaVersions = installedPkgs.find((p) => p.full_name === "tea.xyz");
|
||||
if (distTea) await checkTeaCLIPackage(distTea, installedTeaVersions);
|
||||
const installedTeaPkg = installedPkgs.find((p) => p.full_name === "tea.xyz");
|
||||
if (distTea) await checkTeaCLIPackage(distTea, installedTeaPkg);
|
||||
|
||||
log.info("set NEEDS_UPDATE state to pkgs");
|
||||
let progressCount = 0;
|
||||
for (const iPkg of installedPkgs) {
|
||||
progressCount++;
|
||||
for (const [i, iPkg] of installedPkgs.entries()) {
|
||||
const pkg = guiPkgs.find((p) => p.full_name === iPkg.full_name);
|
||||
if (pkg) {
|
||||
const isUpdated = pkg.version === iPkg.installed_versions[0];
|
||||
|
@ -131,7 +135,7 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
|
|||
state: isUpdated ? PackageStates.INSTALLED : PackageStates.NEEDS_UPDATE
|
||||
});
|
||||
}
|
||||
syncProgress.set(+(progressCount / installedPkgs.length).toFixed(2));
|
||||
syncProgress.set(+((i + 1) / installedPkgs.length).toFixed(2));
|
||||
}
|
||||
} catch (error) {
|
||||
log.error(error);
|
||||
|
@ -156,6 +160,7 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
|
|||
return {
|
||||
packages,
|
||||
syncProgress,
|
||||
requireTeaCli,
|
||||
subscribe: packages.subscribe,
|
||||
search: async (term: string, limit = 5): Promise<GUIPackage[]> => {
|
||||
if (!term || !packagesIndex) return [];
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
const log = window.require("electron-log");
|
||||
|
||||
const { sideNavOpen } = navStore; // right side not left
|
||||
const { packages } = packagesStore;
|
||||
const { packages, requireTeaCli } = packagesStore;
|
||||
|
||||
const url = $page.url;
|
||||
|
||||
|
@ -77,7 +77,7 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
{#if !teaPkg || PackageStates.AVAILABLE === teaPkg?.state || !teaPkg?.installed_versions?.length }
|
||||
{#if $requireTeaCli }
|
||||
<WelcomeModal tea={teaPkg} />
|
||||
{/if}
|
||||
<style>
|
||||
|
|
Loading…
Reference in a new issue