Skip to content

Commit

Permalink
v0.8.3
Browse files Browse the repository at this point in the history 
Minor changes
- Added the ability to set the default view
- Added the ability to set the default miniplayer behavior
- Minor UI enhancements for the apps list
- Minor UI enhancements for the downloads
  • Loading branch information
@ItsRiprod
ItsRiprod committed Sep 3, 2024
1 parent cb996b5 commit dbbc182
Show file tree
Hide file tree
Showing 13 changed files with 306 additions and 222 deletions.
90 changes: 69 additions & 21 deletions DeskThingServer/package-lock.json
View file

Large diffs are not rendered by default.

3 changes: 1 addition & 2 deletions DeskThingServer/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "deskthing",
"version": "0.8.2",
"version": "0.8.3",
"description": "A DeskThing server UI to interface with the DeskThing car thing app",
"main": "./out/main/index.js",
"author": "Riprod",
Expand Down Expand Up @@ -40,7 +40,6 @@
"@types/react-dom": "^18.2.18",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.19",
"electron": "^28.2.0",
"electron-builder": "^24.9.1",
"electron-vite": "^2.0.0",
"eslint": "^8.56.0",
Expand Down
4 changes: 3 additions & 1 deletion DeskThingServer/src/main/handlers/deviceHandler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ export interface ServerManifest {
version: string
port: number
ip: string
default_view: string
miniplayer: string
}

export const HandleDeviceData = async (data: any): Promise<void> => {
Expand Down Expand Up @@ -245,7 +247,7 @@ export const getClientManifest = async (
})
dataListener.asyncEmit(
MESSAGE_TYPES.ERROR,
'DEVICE HANDLER: Client Manifest file not found! (Is it downloaded?)'
'DEVICE HANDLER: Client Manifest file not found! (Is the client downloaded?)'
)
return null
}
Expand Down
210 changes: 60 additions & 150 deletions DeskThingServer/src/renderer/src/components/Apps/Apps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ export type View = 'apps' | 'local' | 'web'

const Apps = (): JSX.Element => {
const { appsList } = useAppStore()
const [tooltips, setTooltips] = useState<string[]>([])
const [enabled, setEnabled] = useState(false)
const [sEnabled, setSEnabled] = useState(false)
const [appIndex, setAppIndex] = useState(-1)
Expand Down Expand Up @@ -72,7 +71,7 @@ const Apps = (): JSX.Element => {
}

return (
<div className="h-svh w-[100%] flex flex-col justify-between items-center">
<div className="h-vh w-[100%] flex flex-col justify-between items-center">
<div className="pt-5 w-full flex justify-center">
{displayRequest && currentRequest[1] && currentRequest[0] && (
<AppRequestOverlay
Expand All @@ -86,11 +85,11 @@ const Apps = (): JSX.Element => {
<AppSettingsOverlay appIndex={appIndex} setEnabled={setSEnabled} data={appsList} />
)}
{appsList?.apps?.length > 0 && Object.keys(appsList.apps).length > 0 ? (
<div className="pt-5 w-full flex xl:flex-row xl:flex-wrap flex-col items-center gap-2">
<div className="pt-5 w-full flex xl:flex-row xl:flex-wrap xl:gap-5 xl:px-5 flex-col items-center gap-2">
{(appsList.apps as App[]).map((app, appIndex) => (
<div
key={appIndex}
className="border-2 border-zinc-400 p-5 w-11/12 md:w-11/12 xl:w-fit h-fit flex justify-between rounded-3xl shadow-lg px-5 items-center"
className="border-2 border-zinc-400 p-5 w-11/12 md:w-11/12 xl:w-fit xl:gap-5 h-fit flex justify-between rounded-3xl shadow-lg px-5 items-center"
>
<div className="flex flex-wrap sm:flex-nowrap gap-2 xl:mr-2">
<button
Expand All @@ -112,175 +111,86 @@ const Apps = (): JSX.Element => {
<p className="text-zinc-400 text-xs font-geistMono">{app.manifest?.version}</p>
</div>
</div>
{appsWithActiveRequests.includes(app.name) ? (
<div className="flex items-center md:flex-row flex-col">
{tooltips[appIndex] ? (
<p>{tooltips[appIndex]}</p>
<div className="flex md:items-center items-end justify-end md:flex-row flex-col xl:w-96">
<div className="flex-col flex font-geistMono items-end pr-2">
{app.running ? (
<p className="text-green-500">Running</p>
) : app.enabled ? (
<p className="text-red-600">Stopped</p>
) : (
<p className="text-blue-300">Data Request</p>
<p className="text-zinc-600 pr-2">Disabled</p>
)}
<button
className="border-2 border-blue-600 hover:bg-blue-500 m-1 p-2 rounded-lg"
onClick={() => handleRequestTrigger(app.name)}
onMouseEnter={() =>
setTooltips((prevTooltips) => ({
...prevTooltips,
[appIndex]: 'Handle Request'
}))
}
onMouseLeave={() =>
setTooltips((prevTooltips) => ({
...prevTooltips,
[appIndex]: ''
}))
}
>
<IconPulsing />
</button>
<button
className="border-2 border-red-600 hover:bg-red-500 p-2 rounded-lg"
onClick={() => handleDisableApp(app.name)}
onMouseEnter={() =>
setTooltips((prevTooltips) => ({
...prevTooltips,
[appIndex]: 'Disable App'
}))
}
onMouseLeave={() =>
setTooltips((prevTooltips) => ({
...prevTooltips,
[appIndex]: ''
}))
}
>
<IconX />
</button>
</div>
) : app.enabled ? (
<div className="flex items-center md:flex-row flex-col">
<div className="flex-col flex font-geistMono items-end pr-2">
{tooltips[appIndex] ? (
<p className="text-white">{tooltips[appIndex]}</p>
) : app.running ? (
<p className="text-green-500">Running</p>
) : (
<p className="text-red-600">Stopped</p>
)}
</div>
{app.running ? (
{appsWithActiveRequests.includes(app.name) && (
<div className="flex items-center md:flex-row flex-col">
<button
className="border-2 border-amber-600 hover:bg-amber-500 m-1 p-2 rounded-lg"
onClick={() => handleStopApp(app.name)}
onMouseEnter={() =>
setTooltips((prevTooltips) => ({
...prevTooltips,
[appIndex]: 'Pause App'
}))
}
onMouseLeave={() =>
setTooltips((prevTooltips) => ({
...prevTooltips,
[appIndex]: ''
}))
}
className="group flex border-2 gap-3 border-blue-600 hover:bg-blue-500 m-1 p-2 rounded-lg"
onClick={() => handleRequestTrigger(app.name)}
>
<IconPause />
<p className="group-hover:block hidden text-white">
Handle<p className="hidden lg:inline"> Request</p>
</p>
<IconPulsing />
</button>
) : (
</div>
)}
{app.enabled ? (
<>
{app.running ? (
<button
className="group flex gap-3 border-2 border-amber-600 hover:bg-amber-500 mx-1 p-2 rounded-lg"
onClick={() => handleStopApp(app.name)}
>
<p className="group-hover:block hidden text-white">
Pause<p className="hidden lg:inline"> App</p>
</p>
<IconPause />
</button>
) : (
<button
className="gap-3 flex group border-2 border-cyan-600 hover:bg-cyan-500 mx-1 p-2 rounded-lg"
onClick={() => handleAddAndRunApp(app.name)}
>
<p className="group-hover:block hidden text-white">
Run<p className="hidden lg:inline"> App</p>
</p>
<IconPlay />
</button>
)}
<button
className="border-2 border-cyan-600 hover:bg-cyan-500 m-1 p-2 rounded-lg"
onClick={() => handleAddAndRunApp(app.name)}
onMouseEnter={() =>
setTooltips((prevTooltips) => ({
...prevTooltips,
[appIndex]: 'Run App'
}))
}
onMouseLeave={() =>
setTooltips((prevTooltips) => ({
...prevTooltips,
[appIndex]: ''
}))
}
className="flex gap-3 group border-2 border-red-600 hover:bg-red-500 mx-1 p-2 rounded-lg"
onClick={() => handleDisableApp(app.name)}
>
<IconPlay />
<p className="group-hover:block hidden text-white">
Disable<p className="hidden lg:inline"> App</p>
</p>
<IconX />
</button>
)}
</>
) : (
<button
className="border-2 border-red-600 hover:bg-red-500 p-2 rounded-lg"
onClick={() => handleDisableApp(app.name)}
onMouseEnter={() =>
setTooltips((prevTooltips) => ({
...prevTooltips,
[appIndex]: 'Disable App'
}))
}
onMouseLeave={() =>
setTooltips((prevTooltips) => ({
...prevTooltips,
[appIndex]: ''
}))
}
>
<IconX />
</button>
</div>
) : (
<div className="flex items-center md:flex-row flex-col">
{tooltips[appIndex] ? (
<p>{tooltips[appIndex]}</p>
) : (
<p className="text-zinc-600">Disabled</p>
)}
<button
className="border-2 border-cyan-600 hover:bg-cyan-500 m-1 p-2 rounded-lg"
className="group gap-3 flex border-2 border-cyan-600 hover:bg-cyan-500 mx-1 p-2 rounded-lg"
onClick={() => handleAddAndRunApp(app.name)}
onMouseEnter={() =>
setTooltips((prevTooltips) => ({
...prevTooltips,
[appIndex]: 'Enable App'
}))
}
onMouseLeave={() =>
setTooltips((prevTooltips) => ({
...prevTooltips,
[appIndex]: ''
}))
}
>
<p className="group-hover:block hidden text-white">
Enable<p className="hidden lg:inline"> App</p>
</p>
<IconPlay />
</button>
<button
onClick={() => handleDetails(appIndex)}
className="border-2 top-10 border-green-600 hover:bg-green-500 p-2 rounded-lg"
onMouseEnter={() =>
setTooltips((prevTooltips) => ({
...prevTooltips,
[appIndex]: 'App Details'
}))
}
onMouseLeave={() =>
setTooltips((prevTooltips) => ({
...prevTooltips,
[appIndex]: ''
}))
}
>
<IconDetails iconSize={24} />
</button>
</div>
)}
)}
</div>
</div>
))}
</div>
) : (
<div className="border-2 border-zinc-200 p-5 w-[90%] h-fit flex justify-center rounded-3xl shadow-lg px-5 align-baseline">
<div className="border-2 border-zinc-200 p-5 w-[90%] h-fit flex flex-col items-center gap-5 justify-center rounded-3xl shadow-lg px-5 align-baseline">
<button
className="border-2 border-cyan-600 hover:bg-cyan-500 bg-cyan-600 p-2 rounded-lg"
onClick={() => requestAppsList()}
>
Request Apps
Refresh Apps List
</button>
<p className="italic text-gray-500">Are any downloaded?</p>
</div>
)}
</div>
Expand Down
52 changes: 32 additions & 20 deletions DeskThingServer/src/renderer/src/components/Apps/Web.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,26 +180,38 @@ const Web = (): JSX.Element => {
</div>
</div>
) : repoReleases.length > 0 ? (
repoReleases.map((repo) => (
<div key={repo.repoUrl} className="border-l rounded-xl">
<button
className="w-full flex justify-between px-4 py-2 text-left border-t mb-2 rounded-xl hover:font-bold focus:outline-none"
onClick={() => toggleRepoDropdown(repo.repoUrl)}
>
{repo.repoUrl}
{openRepoUrl === repo.repoUrl ? <IconArrowDown /> : <IconArrowRight />}
</button>
{openRepoUrl === repo.repoUrl && (
<ReleaseList
releases={repo.releases}
openReleaseId={openReleaseId}
toggleDropdown={toggleReleaseDropdown}
filterAssets={filterAssets}
handleAssetClick={handleAssetClick}
/>
)}
</div>
))
repoReleases.map((repo) => {
const repoName = new URL(repo.repoUrl).pathname.split('/').slice(-1)[0]
return (
<div key={repo.repoUrl} className="border-l rounded-xl hover:bg-gray-950">
<button
className="w-full flex p-5 text-left border-t mb-2 rounded-xl hover:font-bold focus:outline-none"
onClick={() => toggleRepoDropdown(repo.repoUrl)}
>
<div className="h-full">
{openRepoUrl === repo.repoUrl ? (
<IconArrowDown iconSize={48} />
) : (
<IconArrowRight iconSize={48} />
)}
</div>
<div>
<h1 className="text-xl">{repoName}</h1>
<p className="italic text-gray-500">{repo.repoUrl}</p>
</div>
</button>
{openRepoUrl === repo.repoUrl && (
<ReleaseList
releases={repo.releases}
openReleaseId={openReleaseId}
toggleDropdown={toggleReleaseDropdown}
filterAssets={filterAssets}
handleAssetClick={handleAssetClick}
/>
)}
</div>
)
})
) : (
<Loading message={'Fetching Releases'} />
)}
Expand Down
Loading

0 comments on commit dbbc182

Please sign in to comment.