diff --git a/app/Http/Controllers/Admin/BaseController.php b/app/Http/Controllers/Admin/BaseController.php index cc4237676..acdc202bf 100644 --- a/app/Http/Controllers/Admin/BaseController.php +++ b/app/Http/Controllers/Admin/BaseController.php @@ -30,7 +30,7 @@ class BaseController extends Controller */ public function index(): View { - // return view('admin.index', ['version' => $this->version]); - return view('templates/base.core'); + return view('admin.index', ['version' => $this->version]); + // return view('templates/base.core'); } } diff --git a/resources/scripts/components/App.tsx b/resources/scripts/components/App.tsx index c4defa8ae..fdc43c24b 100644 --- a/resources/scripts/components/App.tsx +++ b/resources/scripts/components/App.tsx @@ -52,10 +52,10 @@ const App = () => { store.getActions().settings.setSettings(SiteConfiguration!); } - /* useEffect(() => { + useEffect(() => { ReactGA.initialize(SiteConfiguration!.analytics); ReactGA.pageview(location.pathname); - }, []); */ + }, []); return ( <> diff --git a/resources/scripts/components/admin/AdminContainer.tsx b/resources/scripts/components/admin/AdminContainer.tsx new file mode 100644 index 000000000..61c9b6086 --- /dev/null +++ b/resources/scripts/components/admin/AdminContainer.tsx @@ -0,0 +1,195 @@ +import React, { useState } from 'react'; +import tw from 'twin.macro'; +import { useStoreState } from 'easy-peasy'; +import { ApplicationStore } from '@/state'; +import { NavLink, RouteComponentProps } from 'react-router-dom'; +import styled from 'styled-components/macro'; + +const Sidebar = styled.div` + ${tw`h-screen flex flex-col items-center bg-neutral-900 overflow-x-hidden`}; +`; + +const Navigation = styled.div` + ${tw`w-full flex flex-col px-4`}; + + & > span { + ${tw`font-header font-medium text-xs text-neutral-300 whitespace-no-wrap uppercase ml-4 mb-1`}; + + &:not(:first-of-type) { + ${tw`mt-4`}; + } + } + + & > a { + ${tw`h-10 w-full flex flex-row items-center text-neutral-300 px-4 transition-all duration-100 cursor-pointer`}; + + & > svg { + ${tw`h-6 w-6`}; + } + + & > span { + ${tw`font-header font-medium text-lg leading-none ml-3`}; + } + + &:hover { + ${tw`text-neutral-50`}; + } + + &:active, &.active { + ${tw`text-neutral-50 bg-neutral-800 rounded`} + } + } +`; + +const CollapsedNavigation = styled.div` + ${tw`w-full flex flex-col px-4`}; + + & > span { + ${tw`opacity-0 whitespace-no-wrap`}; + + &:not(:first-of-type) { + ${tw`mt-4`}; + } + } + + & > a { + ${tw`h-10 w-full flex flex-row items-center justify-center text-neutral-300 transition-all duration-100 cursor-pointer`}; + + & > svg { + ${tw`h-6 w-6 flex flex-shrink-0`}; + } + + & > span { + ${tw`hidden`}; + } + + &:hover { + ${tw`text-neutral-50`}; + } + + &:active, &.active { + ${tw`text-neutral-50 bg-neutral-800 rounded`} + } + } +`; + +type Props = { + url: string, +}; + +const NavItems = ({ url }: Props) => { + return ( + <> + Administration + + + + Overview + + + + Settings + + + + API Keys + + + Management + + + + Databases + + + + Locations + + + + Nodes + + + + Servers + + + + Users + + + Service Management + + + + Nests + + + + Packs + + + + Mounts + + + ); +}; + +export default ({ match }: RouteComponentProps<{ id: string }>) => { + const name = useStoreState((state: ApplicationStore) => state.settings.data!.name); + const [ collapsed, setCollapsed ] = useState(); + + return ( +
+ +
{ + setCollapsed(!collapsed); + } + }> + { !collapsed ? +

{name}

+ : + + } +
+ + {!collapsed ? + <> + + + + +
+ Profile Picture + +
+ Matthew Penner + Super Administrator +
+ + + + +
+ + : + <> + + + + + + + + +
+ Profile Picture +
+ + } + +
+ ); +}; diff --git a/resources/scripts/routers/AuthenticationRouter.tsx b/resources/scripts/routers/AuthenticationRouter.tsx index a7c687eef..57d1422ca 100644 --- a/resources/scripts/routers/AuthenticationRouter.tsx +++ b/resources/scripts/routers/AuthenticationRouter.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +import React, { useEffect } from 'react'; +import ReactGA from 'react-ga'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; import LoginContainer from '@/components/auth/LoginContainer'; import ForgotPasswordContainer from '@/components/auth/ForgotPasswordContainer'; @@ -6,17 +7,23 @@ import ResetPasswordContainer from '@/components/auth/ResetPasswordContainer'; import LoginCheckpointContainer from '@/components/auth/LoginCheckpointContainer'; import NotFound from '@/components/screens/NotFound'; -export default ({ location, history, match }: RouteComponentProps) => ( -
- - - - - - - - history.push('/auth/login')}/> - - -
-); +export default ({ location, history, match }: RouteComponentProps) => { + useEffect(() => { + ReactGA.pageview(location.pathname); + }, [ location.pathname ]); + + return ( +
+ + + + + + + + history.push('/auth/login')} /> + + +
+ ); +}; diff --git a/resources/scripts/routers/DashboardRouter.tsx b/resources/scripts/routers/DashboardRouter.tsx index 1e5963996..7e57a10ca 100644 --- a/resources/scripts/routers/DashboardRouter.tsx +++ b/resources/scripts/routers/DashboardRouter.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +import React, { useEffect } from 'react'; +import ReactGA from 'react-ga'; import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom'; import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer'; import NavigationBar from '@/components/NavigationBar'; @@ -8,24 +9,30 @@ import NotFound from '@/components/screens/NotFound'; import TransitionRouter from '@/TransitionRouter'; import SubNavigation from '@/components/elements/SubNavigation'; -export default ({ location }: RouteComponentProps) => ( - <> - - {location.pathname.startsWith('/account') && - -
- Settings - API Credentials -
- - } - - - - - - - - - -); +export default ({ location }: RouteComponentProps) => { + useEffect(() => { + ReactGA.pageview(location.pathname); + }, [ location.pathname ]); + + return ( + <> + + {location.pathname.startsWith('/account') && + +
+ Settings + API Credentials +
+ + } + + + + + + + + + + ); +};