-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #141 from QCDIS/138-make-homepage-customizable
138 make homepage customizable
- Loading branch information
Showing
16 changed files
with
255 additions
and
93 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import {useEffect, useState, createContext, ReactNode} from "react"; | ||
| import getConfig from "next/config"; | ||
|
|
||
|
|
||
| export const PaasConfigContext = createContext({ | ||
| paasConfig: { | ||
| title: "", | ||
| description: "", | ||
| documentation_url: "", | ||
| site_icon: "", | ||
| }, | ||
| paasConfigLoading: true, | ||
| }); | ||
|
|
||
| export function PaasConfigProvider({children,}: { children: ReactNode }) { | ||
| const {publicRuntimeConfig} = getConfig() | ||
|
|
||
| const [paasConfig, setPaasConfig] = useState({ | ||
| title: "Virtual Lab environments", | ||
| description: "A collection of virtual lab environments", | ||
| documentation_url: "https://github.com/QCDIS/NaaVRE/blob/main/README.md", | ||
| site_icon: `${publicRuntimeConfig.staticFolder}/LW_ERIC_Logo.png`, | ||
| }) | ||
| const [paasConfigLoading, setPaasConfigLoading] = useState(true) | ||
|
|
||
| useEffect(() => { | ||
| const apiUrl = `${window.location.origin}/${publicRuntimeConfig.apiBasePath}` | ||
| fetch(`${apiUrl}/paas_configuration`) | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| if (data.length > 0) { | ||
| setPaasConfig(data[0]); | ||
| } | ||
| setPaasConfigLoading(false) | ||
| }) | ||
| .catch((error) => { | ||
| console.log(error) | ||
| setPaasConfigLoading(false) | ||
| }); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <PaasConfigContext.Provider value={{paasConfig: paasConfig, paasConfigLoading: paasConfigLoading}}> | ||
| {children} | ||
| </PaasConfigContext.Provider> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,106 +1,133 @@ | ||
| import { getToken } from 'next-auth/jwt'; | ||
| // import { signIn, useSession } from 'next-auth/react'; | ||
| import {useEffect, useState, useContext} from 'react'; | ||
| import getConfig from 'next/config'; | ||
| import Link from 'next/link'; | ||
| import { useEffect, useState } from 'react'; | ||
| import { NewVREDialog } from '../components/NewVREDialog'; | ||
| import { Nav } from '../templates/Nav'; | ||
| // import useAuth from './auth/useAuth'; | ||
|
|
||
| import {NewVREDialog} from '../components/NewVREDialog'; | ||
| import {Nav} from '../templates/Nav'; | ||
| import {PaasConfigContext} from '../context/PaasConfig'; | ||
|
|
||
| const getSlug = (title: string) => { | ||
|
|
||
| return title | ||
| .toLowerCase() | ||
| .replace(/ /g, '-') | ||
| .replace(/[^\w-]+/g, ''); | ||
| return title | ||
| .toLowerCase() | ||
| .replace(/ /g, '-') | ||
| .replace(/[^\w-]+/g, ''); | ||
| } | ||
|
|
||
| const VLabs = () => { | ||
|
|
||
| const { publicRuntimeConfig } = getConfig() | ||
|
|
||
| // const isAuthenticated = useAuth(true); | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const [vlabs, setVlabs] = useState([]); | ||
| const VLabs = ({}) => { | ||
|
|
||
| useEffect(() => { | ||
| const {publicRuntimeConfig} = getConfig() | ||
|
|
||
| // if (isAuthenticated) { | ||
| const {paasConfig, paasConfigLoading} = useContext(PaasConfigContext) | ||
|
|
||
| // var requestOptions: RequestInit = { | ||
| // method: "GET", | ||
| // headers: { | ||
| // "Authorization": "Bearer: " + token.accessToken | ||
| // }, | ||
| // }; | ||
| const apiUrl = `${window.location.origin}/${publicRuntimeConfig.apiBasePath}` | ||
| fetch(`${apiUrl}/vlabs`) | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| setVlabs(data); | ||
| }) | ||
| .catch((error) => { | ||
| console.log(error) | ||
| }); | ||
| // } | ||
| }, []); | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const [vlabs, setVlabs] = useState([]); | ||
| const [vlabsLoading, setVlabsLoading] = useState(true); | ||
|
|
||
| // const { status } = useSession({ | ||
| // required: true, | ||
| // onUnauthenticated() { | ||
| // signIn(); | ||
| // }, | ||
| // }) | ||
| useEffect(() => { | ||
|
|
||
| // if (status === "loading") { | ||
| // return "Loading or not authenticated..." | ||
| // } | ||
| const apiUrl = `${window.location.origin}/${publicRuntimeConfig.apiBasePath}` | ||
| fetch(`${apiUrl}/vlabs`) | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| setVlabs(data); | ||
| setVlabsLoading(false) | ||
| }) | ||
| .catch((error) => { | ||
| console.log(error) | ||
| setVlabsLoading(false) | ||
| }); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div> | ||
| <Nav /> | ||
| <div className='min-h-screen mx-auto bg-gradient-to-b from-sky-100 to-orange-300'> | ||
| <div className='grid grid-cols-3'> | ||
| {vlabs.map((vlab: any) => { | ||
| return ( | ||
| <div key={getSlug(vlab.title)} className="max-w-sm rounded overflow-hidden shadow-lg bg-white m-10"> | ||
| <Link | ||
| href={{ | ||
| pathname: '/vlabs/[slug]', | ||
| query: { slug: vlab.slug } | ||
| }} | ||
| > | ||
| <div> | ||
| <img className="w-35 h-30 object-cover" src={`${publicRuntimeConfig.staticFolder}/HP-VRES.png`} /> | ||
| <div className="font-bold text-l mb-2 bg-blue-500 text-white p-5">{vlab.title}</div> | ||
| <div className="px-3 py-2"> | ||
| <p className="text-gray-700 text-base truncate ..."> | ||
| {vlab.description} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </Link> | ||
| </div> | ||
| ); | ||
| })} | ||
| return ( | ||
| <div> | ||
| <Nav/> | ||
| <div className='min-h-screen mx-auto bg-gradient-to-b from-sky-100 to-orange-300 space-y-10 p-10'> | ||
| <div className="max-w-full rounded bg-white p-8"> | ||
| <h1 className="text-2xl text-gray-800 mb-8"> | ||
| {paasConfigLoading ? ( | ||
| <span className="animate-pulse"> | ||
| <span className="inline-block min-h-[1em] w-3/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span> | ||
| </span> | ||
| ) : ( | ||
| paasConfig.title | ||
| )} | ||
| </h1> | ||
| <p className="text-l text-gray-800"> | ||
| {paasConfigLoading ? ( | ||
| <span className="animate-pulse"> | ||
| <span className="inline-block min-h-[1em] w-full flex-auto cursor-wait bg-current align-middle opacity-50"></span> | ||
| </span> | ||
| ) : ( | ||
| paasConfig.description | ||
| )} | ||
| </p> | ||
| {paasConfigLoading || ( | ||
| paasConfig.documentation_url && ( | ||
| <p className="mt-4"> | ||
| <a | ||
| href={paasConfig.documentation_url} | ||
| className="text-blue-800 hover:underline" | ||
| > | ||
| Documentation | ||
| </a> | ||
| </p> | ||
| ) | ||
| )} | ||
| </div> | ||
| <div className='flex flex-row space-x-10'> | ||
| {vlabsLoading ? ( | ||
| <div className="w-1/3 rounded overflow-hidden shadow-lg bg-white animate"> | ||
| <div> | ||
| <img className="w-35 h-30 object-cover" src={`${publicRuntimeConfig.staticFolder}/HP-VRES.png`}/> | ||
| <div className="font-bold text-l mb-2 bg-gray-300 text-white p-5"> | ||
| <p className="animate-pulse"> | ||
| <span className="inline-block min-h-[1em] w-6/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span> | ||
| </p> | ||
| </div> | ||
| <div className="px-3 py-2"> | ||
| <p className="text-gray-700 text-base truncate animate-pulse ..."> | ||
| <span className="inline-block min-h-[0.6em] w-6/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span> | ||
| </p> | ||
| </div> | ||
| <NewVREDialog isOpen={isOpen} setIsOpen={setIsOpen} /> | ||
| </div> | ||
| </div> | ||
| </div > | ||
| ) | ||
| ) : ( | ||
| vlabs.length > 0 ? ( | ||
| vlabs.map((vlab: any) => { | ||
| return ( | ||
| <div key={getSlug(vlab.title)} className="w-1/3 rounded overflow-hidden shadow-lg bg-white"> | ||
| <Link | ||
| href={{ | ||
| pathname: '/vlabs/[slug]', | ||
| query: {slug: vlab.slug} | ||
| }} | ||
| > | ||
| <div> | ||
| <img className="w-35 h-30 object-cover" src={`${publicRuntimeConfig.staticFolder}/HP-VRES.png`}/> | ||
| <div className="font-bold text-l mb-2 bg-blue-500 text-white p-5">{vlab.title}</div> | ||
| <div className="px-3 py-2"> | ||
| <p className="text-gray-700 text-base truncate ..."> | ||
| {vlab.description} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </Link> | ||
| </div> | ||
| ); | ||
| }) | ||
| ) : ( | ||
| <div className="w-1/3 rounded overflow-hidden shadow-lg bg-white"> | ||
| No virtual labs found | ||
| </div> | ||
| ) | ||
| ) | ||
| } | ||
| </div> | ||
| <NewVREDialog isOpen={isOpen} setIsOpen={setIsOpen}/> | ||
| </div> | ||
| </div> | ||
| ) | ||
| }; | ||
|
|
||
| export async function getServerSideProps(context:any) { | ||
|
|
||
| const { req } = context; | ||
| const secret = process.env.SECRET; | ||
| const token = await getToken({ req, secret }); | ||
|
|
||
| return { | ||
| props: { | ||
| token: token | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| export default VLabs; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| from django.contrib import admin | ||
| from .models import PaasConfiguration | ||
|
|
||
| admin.site.register(PaasConfiguration) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| from django.apps import AppConfig | ||
|
|
||
|
|
||
| class PaasConfigurationConfig(AppConfig): | ||
| default_auto_field = 'django.db.models.BigAutoField' | ||
| name = 'paas_configuration' |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| from django.db import models | ||
|
|
||
| # Create your models here. | ||
|
|
||
|
|
||
| class PaasConfiguration(models.Model): | ||
| title = models.CharField(max_length=100, null=True) | ||
| description = models.TextField(null=True) | ||
| documentation_url = models.URLField(null=True, blank=True) | ||
| site_icon = models.TextField( | ||
| null=True, | ||
| help_text=("Base 64-encoded image, eg. data:image/png;base64," | ||
| "ZXhhbXBsZQo="), | ||
| ) | ||
|
|
||
| def __str__(self): | ||
| return self.title |
Oops, something went wrong.