fatchan
/
haproxy-panel-next
mirror of https://gitgud.io/fatchan/haproxy-panel-next.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

testing loading placeholder on account/domains

Browse Source
develop
Thomas Lynch 2 years ago
parent 0a41033f39
commit 3923b42d32
7 changed files with 103 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 21
      components/LoadingPlaceholder.js
  2. 2
      controllers/domains.js
  3. 18
      package-lock.json
  4. 1
      package.json
  5. 28
      pages/account.js
  6. 40
      pages/domains.js
  7. 2
      router.js

21
components/LoadingPlaceholder.js
Unescape View File

@ -0,0 +1,21 @@
import React from "react"
import ContentLoader from "react-content-loader"
const LoadingPlaceholder = (props) => (
<div className="list-group-item d-flex align-items-center">
<ContentLoader
speed={2}
width={"100%"}
height={25}
viewBox="0 0 100% 25"
backgroundColor="#d0d0d0"
foregroundColor="#808080"
{...props}
>
<rect x="25" y="15" width="100%" height="10" />
</ContentLoader>
</div>
);
export default LoadingPlaceholder;

2
controllers/domains.js
Unescape View File

@ -16,7 +16,7 @@ exports.domainsPage = async (app, req, res) => {
* GET /domains.json
* domains json data
*/
exports.domainsJSON = async (req, res) => {
exports.domainsJson = async (req, res) => {
return res.json({
csrf: req.csrfToken(),
user: res.locals.user,

18
package-lock.json generated
Unescape View File

@ -25,6 +25,7 @@
"next": "^12.1.6",
"nprogress": "^0.2.0",
"react": "^18.1.0",
"react-content-loader": "^6.2.0",
"react-dom": "^18.1.0"
}
},
@ -4074,6 +4075,17 @@
"node": ">=0.10.0"
}
},
"node_modules/react-content-loader": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/react-content-loader/-/react-content-loader-6.2.0.tgz",
"integrity": "sha512-r1dI6S+uHNLW68qraLE2njJYOuy6976PpCExuCZUcABWbfnF3FMcmuESRI8L4Bj45wnZ7n8g71hkPLzbma7/Cw==",
"engines": {
"node": ">=10"
},
"peerDependencies": {
"react": ">=16.0.0"
}
},
"node_modules/react-dom": {
"version": "18.1.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz",
@ -8717,6 +8729,12 @@
"loose-envify": "^1.1.0"
}
},
"react-content-loader": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/react-content-loader/-/react-content-loader-6.2.0.tgz",
"integrity": "sha512-r1dI6S+uHNLW68qraLE2njJYOuy6976PpCExuCZUcABWbfnF3FMcmuESRI8L4Bj45wnZ7n8g71hkPLzbma7/Cw==",
"requires": {}
},
"react-dom": {
"version": "18.1.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz",

1
package.json
Unescape View File

@ -28,6 +28,7 @@
"next": "^12.1.6",
"nprogress": "^0.2.0",
"react": "^18.1.0",
"react-content-loader": "^6.2.0",
"react-dom": "^18.1.0"
}
}

28
pages/account.js
Unescape View File

@ -2,6 +2,7 @@ import React, { useState } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import MapLink from '../components/MapLink.js';
import LoadingPlaceholder from '../components/LoadingPlaceholder.js';
import ApiCall from '../api.js';
const Account = (props) => {
@ -15,7 +16,32 @@ const Account = (props) => {
}, []);
if (!accountData.user) {
return <>Loading...</>; //todo: page with animated css placeholder boxes
return (
<>
<Head>
<title>Account</title>
</Head>
<h5 className="fw-bold">
Controls:
</h5>
<div className="list-group">
<LoadingPlaceholder />
<LoadingPlaceholder />
<LoadingPlaceholder />
<LoadingPlaceholder />
<LoadingPlaceholder />
<LoadingPlaceholder />
<LoadingPlaceholder />
<LoadingPlaceholder />
<LoadingPlaceholder />
<LoadingPlaceholder />
</div>
</>
);
}
const { user, maps, acls, globalAcl, csrf } = accountData;

40
pages/domains.js
Unescape View File

@ -1,7 +1,8 @@
import React, { useState } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import BackButton from '../components/BackButton.js'
import BackButton from '../components/BackButton.js';
import LoadingPlaceholder from '../components/LoadingPlaceholder.js';
import ApiCall from '../api.js'
export default function Domains(props) {
@ -10,26 +11,51 @@ export default function Domains(props) {
React.useEffect(() => {
if (!accountData.user) {
ApiCall('/account.json', 'GET', null, setAccountData);
ApiCall('/domains.json', 'GET', null, setAccountData);
}
}, []);
if (!accountData.user) {
return <>Loading...</>; //TODO: page with animated css placeholder boxes
return (
<>
<Head>
<title>Domains</title>
</Head>
<h5 className="fw-bold">
Available Domains:
</h5>
<div className="list-group">
<LoadingPlaceholder />
<LoadingPlaceholder />
<LoadingPlaceholder />
<LoadingPlaceholder />
<LoadingPlaceholder />
<LoadingPlaceholder />
<LoadingPlaceholder />
<LoadingPlaceholder />
<LoadingPlaceholder />
<LoadingPlaceholder />
</div>
</>
);
}
const { user, maps, acls, globalAcl, csrf } = accountData;
const { user, csrf } = accountData;
async function addDomain(e) {
e.preventDefault();
await ApiCall('/forms/domain/add', 'POST', JSON.stringify({ _csrf: csrf, domain: e.target.domain.value }), null, 0.5);
await ApiCall('/account.json', 'GET', null, setAccountData);
await ApiCall('/domains.json', 'GET', null, setAccountData);
}
async function deleteDomain(e) {
e.preventDefault();
await ApiCall('/forms/domain/delete', 'POST', JSON.stringify({ _csrf: csrf, domain: e.target.domain.value }), null, 0.5);
await ApiCall('/account.json', 'GET', null, setAccountData);
await ApiCall('/domains.json', 'GET', null, setAccountData);
}
const domainList = user.domains.map(d => {
@ -57,7 +83,7 @@ export default function Domains(props) {
</Head>
<h5 className="fw-bold">
Your Domains ({user.domains.length}):
Available Domains:
</h5>
{/* Domains table */}

2
router.js
Unescape View File

@ -104,7 +104,9 @@ const testRouter = (server, app) => {
server.get('/clusters', useSession, fetchSession, checkSession, useHaproxy, csrfMiddleware, clustersController.clustersPage.bind(null, app));
server.get('/clusters.json', useSession, fetchSession, checkSession, useHaproxy, csrfMiddleware, clustersController.clustersJson);
server.get('/domains', useSession, fetchSession, checkSession, useHaproxy, csrfMiddleware, domainsController.domainsPage.bind(null, app));
server.get('/domains.json', useSession, fetchSession, checkSession, useHaproxy, csrfMiddleware, domainsController.domainsJson);
//authed pages that useHaproxy
const clusterRouter = express.Router({ caseSensitive: true });

Write Preview
Loading…
Cancel
Save