Add compatibility filter

This commit is contained in:
Chris Hunt 2023-08-21 14:22:30 +01:00
parent 926c525eb4
commit 1beed4e80a
No known key found for this signature in database

View File

@ -6,16 +6,44 @@ import styles from '../styles/Home.module.css'
export default function Home({ searchText }) {
const [workspaces, setWorkspaces] = useState(null)
const [versions, setVersions] = useState(null)
const [version, setVersion] = useState(null)
useEffect(() => {
let currentVersion = localStorage.getItem("version") || null
fetch('list.json')
.then((res) => res.json())
.then((workspaces) => {
let wsversions = []
workspaces.workspaces.forEach((workspace) => {
if(workspace.compatibility) {
workspace.compatibility.forEach((v) => {
const value = parseFloat(v)
if(wsversions.indexOf(value) === -1) {
wsversions.push(value)
}
})
}
})
const sorted = wsversions.sort((a,b) => a-b).reverse()
setVersions(sorted)
if (currentVersion === null) {
currentVersion = sorted[0]
localStorage.setItem("version", currentVersion);
}
setVersion(currentVersion)
setWorkspaces(workspaces)
})
}, [])
const updateVersion = (version) => {
localStorage.setItem("version", version);
setVersion(version)
}
let filteredworkspaces = workspaces && workspaces.workspaces && workspaces.workspaces.length > 0 ? [...workspaces.workspaces] : [];
filteredworkspaces = filteredworkspaces.filter((v) => v.compatibility.some((el) => el === version + '.x'))
const lowerSearch = searchText && searchText.toLowerCase();
if (searchText && searchText !== "") {
filteredworkspaces = filteredworkspaces.filter((i) => {
@ -40,7 +68,18 @@ export default function Home({ searchText }) {
<main className="p-8 py-10 xl:px-20">
<h1 className='flex uppercase tracking-widest justify-center mb-10'><span className='flex items-center text-lg bg-slate-100/90 rounded overflow-hidden shadow'><span className='flex px-3 text-xs opacity-100'>Workspaces</span> <span className='text-white p-3 py-1 flex bg-[#2980b9]'>{workspaces && workspaces.workspacecount}</span></span></h1>
<h1 className='flex flex-wrap-reverse uppercase tracking-widest justify-center mb-10 gap-5'>
<span className='flex items-center text-lg bg-slate-100/90 rounded overflow-hidden shadow'>
<span className='flex px-3 text-xs opacity-100'>Workspaces</span>
<span className='text-white p-3 py-1 flex bg-[#2980b9]'>{workspaces && workspaces.workspacecount}</span>
</span>
<span className='flex items-center text-lg bg-slate-100/90 rounded overflow-hidden shadow'>
<span className='flex px-3 text-xs opacity-100'>Kasm Version</span>
<span className='text-white gap-3 p-3 py-1 flex items-center bg-[#2980b9]'>{versions && versions.map((v) => (
<div className={'cursor-pointer ' + (+v === +version ? 'text-white' : 'text-white/50 text-xs')} key={v} onClick={() => updateVersion(v)}>{v}</div>
))}</span>
</span>
</h1>
<div className="flex flex-wrap gap-1 justify-center">
{filteredworkspaces && filteredworkspaces.length > 0 && filteredworkspaces.map(function (workspace, i) {
return <Workspace key={workspace.sha} workspace={workspace} />