Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#368 pagination and filtering of rooms, on status page and on rest api #373

Merged
merged 1 commit into from
Oct 14, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions client/app/assets/font/config.json
Original file line number Diff line number Diff line change
@@ -331,6 +331,12 @@
"css": "upload-cloud",
"code": 61678,
"src": "fontawesome"
},
{
"uid": "555ef8c86832e686fef85f7af2eb7cde",
"css": "left-big",
"code": 59422,
"src": "fontawesome"
}
]
}
51 changes: 36 additions & 15 deletions client/app/assets/font/poinz.css
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@font-face {
font-family: 'poinz';
src: url('../font/poinz.eot?99005502');
src: url('../font/poinz.eot?99005502#iefix') format('embedded-opentype'),
url('../font/poinz.woff2?99005502') format('woff2'),
url('../font/poinz.woff?99005502') format('woff'),
url('../font/poinz.ttf?99005502') format('truetype'),
url('../font/poinz.svg?99005502#poinz') format('svg');
src: url('../font/poinz.eot?88232377');
src: url('../font/poinz.eot?88232377#iefix') format('embedded-opentype'),
url('../font/poinz.woff2?88232377') format('woff2'),
url('../font/poinz.woff?88232377') format('woff'),
url('../font/poinz.ttf?88232377') format('truetype'),
url('../font/poinz.svg?88232377#poinz') format('svg');
font-weight: normal;
font-style: normal;
}
@@ -15,23 +15,43 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'poinz';
src: url('../font/poinz.svg?99005502#poinz') format('svg');
src: url('../font/poinz.svg?88232377#poinz') format('svg');
}
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "poinz";
font-style: normal;
font-weight: normal;
speak: never;


[class^="icon-"], [class*=" icon-"] {
display: inline-block;
font: normal normal normal 14px/1 poinz;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */

/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;

[class^="icon-"]:before, [class*=" icon-"]:before {
/* fix buttons height, for twitter bootstrap */
line-height: 1em;

/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;

/* you can be more comfortable with increased icons size */
/* font-size: 120%; */

/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-minus-circled:before { content: '\e800'; } /* '' */
@@ -64,6 +84,7 @@
.icon-cancel-circled:before { content: '\e81b'; } /* '' */
.icon-markdown:before { content: '\e81c'; } /* '' */
.icon-list-alt:before { content: '\e81d'; } /* '' */
.icon-left-big:before { content: '\e81e'; } /* '' */
.icon-check-empty:before { content: '\f096'; } /* '' */
.icon-list-bullet:before { content: '\f0ca'; } /* '' */
.icon-table:before { content: '\f0ce'; } /* '' */
Binary file modified client/app/assets/font/poinz.eot
Binary file not shown.
2 changes: 2 additions & 0 deletions client/app/assets/font/poinz.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified client/app/assets/font/poinz.ttf
Binary file not shown.
Binary file modified client/app/assets/font/poinz.woff
Binary file not shown.
Binary file modified client/app/assets/font/poinz.woff2
Binary file not shown.
79 changes: 73 additions & 6 deletions client/app/components/AppStatus/AppStatus.js
Original file line number Diff line number Diff line change
@@ -13,7 +13,14 @@ import {
StyledTopLeft,
StyledTopRight
} from '../TopBar/_styled';
import {StyledAppStatus, StyledAppStatusMain, StyledRoomsList} from './_styled';
import {
StyledAppStatus,
StyledAppStatusMain,
StyledRoomsList,
StyledRoomsListPagination
} from './_styled';

const ROOMS_PAGE_SIZE = 50;

/**
* Our "operations" view. Displays application status (which is fetched from the backend via REST).
@@ -22,11 +29,13 @@ import {StyledAppStatus, StyledAppStatusMain, StyledRoomsList} from './_styled';
*/
const AppStatus = () => {
const [appStatus, setAppStatus] = useState();
const [roomsPage, setRoomsPage] = useState(1);
const [onlyActiveRooms, setOnlyActiveRooms] = useState(false);

const {format} = useContext(L10nContext);

useEffect(() => {
loadAndSet();
loadAndSet(roomsPage, onlyActiveRooms);
}, [format]);

if (!appStatus) {
@@ -51,7 +60,7 @@ const AppStatus = () => {
<StyledQuickMenuButton
data-testid="reloadDataButton"
className="clickable pure-button pure-button-primary"
onClick={loadAndSet}
onClick={() => loadAndSet(roomsPage, onlyActiveRooms)}
>
<i className="icon-arrows-cw"></i>
</StyledQuickMenuButton>
@@ -69,11 +78,44 @@ const AppStatus = () => {
Version: {appConfig.version} {format.formatDateTime(appConfig.buildTime)}
</p>
<p>Uptime: {appStatus.uptime}</p>
<p>Total rooms: {appStatus.roomCount}</p>
<p>Running on: {appStatus.storeInfo}</p>

<h3>Rooms</h3>

<StyledRoomsListPagination>
<button
type="button"
className="pure-button pure-button-primary"
onClick={onPrevClick}
disabled={roomsPage <= 1}
>
<i className="icon-left-big button-icon-left"></i>
PREV
</button>

<div>
Page {roomsPage} / {appStatus.totalPages}
</div>

<button
type="button"
className="pure-button pure-button-primary"
onClick={onFwdClick}
disabled={roomsPage >= appStatus.totalPages}
>
FWD <i className="icon-right-big button-icon-right"></i>
</button>

<span onClick={onActiveOnlyToggled} className="clickable">
<i className={onlyActiveRooms ? 'icon-check' : 'icon-check-empty'}></i> Show only active
rooms
</span>
</StyledRoomsListPagination>

<div>
<span>{appStatus.totalRoomCount} rooms</span>
</div>

<StyledRoomsList>
<TableHeaders />
{appStatus.rooms.map((room, index) => (
@@ -84,17 +126,42 @@ const AppStatus = () => {
</StyledAppStatus>
);

function loadAndSet() {
function loadAndSet(page, onlyActive) {
if (!format) {
return; // L10 not quite ready...
}

getAppStatus().then((data) => {
getAppStatus(ROOMS_PAGE_SIZE, (page - 1) * ROOMS_PAGE_SIZE, onlyActive).then((data) => {
data.uptime = format.secondsToDaysHoursMinutes(data.uptime);
data.rooms.sort(roomComparator);
data.totalPages = Math.ceil(data.totalRoomCount / ROOMS_PAGE_SIZE);
data.totalPages = data.totalPages < 1 ? 1 : data.totalPages;
setAppStatus(data);
});
}

function onActiveOnlyToggled() {
const switchedFlag = !onlyActiveRooms;
setOnlyActiveRooms(switchedFlag);
setRoomsPage(1);
loadAndSet(1, switchedFlag);
}

function onPrevClick() {
if (roomsPage > 1) {
const newPage = roomsPage - 1;
setRoomsPage(newPage);
loadAndSet(newPage, onlyActiveRooms);
}
}

function onFwdClick() {
if (roomsPage < appStatus.totalPages) {
const newPage = roomsPage + 1;
setRoomsPage(newPage);
loadAndSet(newPage, onlyActiveRooms);
}
}
};

AppStatus.propTypes = {
22 changes: 20 additions & 2 deletions client/app/components/AppStatus/_styled.js
Original file line number Diff line number Diff line change
@@ -11,19 +11,37 @@ export const StyledAppStatusMain = styled.div`

export const StyledRoomsList = styled.ul`
display: table;
margin: 0;
margin: 4px 0;
padding: 0;

.headers {
font-weight: 700;

> div {
border-bottom: 1px solid #ccc;
}
}

li {
display: table-row;

> div {
display: table-cell;
padding: 0 4px;
padding: 2px 4px;
}
}
`;

export const StyledRoomsListPagination = styled.div`
display: flex;
align-items: center;
margin-bottom: 12px;

> button {
font-size: 60%;
}

> div {
margin: 0 12px;
}
`;
11 changes: 9 additions & 2 deletions client/app/services/restApi/appStatusService.js
Original file line number Diff line number Diff line change
@@ -4,8 +4,15 @@
*/
import checkStatusCode from './checkStatusCode';

export function getAppStatus() {
return fetch('/api/status')
/**
*
* @param {number} roomLimit
* @param {number} roomOffset
* @param onlyActiveRooms
* @return {Promise<any>}
*/
export function getAppStatus(roomLimit, roomOffset, onlyActiveRooms) {
return fetch(`/api/status?limit=${roomLimit}&offset=${roomOffset}&onlyActive=${onlyActiveRooms}`)
.then(checkStatusCode)
.then((response) => response.json());
}
Original file line number Diff line number Diff line change
@@ -1 +1 @@
[{"id":"iz0xn1lubjrwe9uwr628w","userId":"j8j1xfx9j0w96f2f95ru5","correlationId":"px12fnyotv4jegg2yriev","name":"roomCreated","roomId":"50o2rgl3jl__62wpkqnjw","restricted":true,"payload":{}},{"id":"a42z015qzqq8p0w3n39mh","userId":"j8j1xfx9j0w96f2f95ru5","correlationId":"px12fnyotv4jegg2yriev","name":"joinedRoom","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"users":[{"disconnected":false,"id":"j8j1xfx9j0w96f2f95ru5","avatar":0}],"stories":[],"cardConfig":[{"label":"?","value":-2,"color":"#bdbfbf"},{"label":"1/2","value":0.5,"color":"#667a66"},{"label":"1","value":1,"color":"#839e7a"},{"label":"2","value":2,"color":"#8cb876"},{"label":"3","value":3,"color":"#96ba5b"},{"label":"5","value":5,"color":"#b6c76b"},{"label":"8","value":8,"color":"#c9c857"},{"label":"13","value":13,"color":"#d9be3b"},{"label":"21","value":21,"color":"#d6cda1"},{"label":"34","value":34,"color":"#9fa6bd"},{"label":"55","value":55,"color":"#6a80ab"},{"label":"BIG","value":-1,"color":"#1d508f"}],"autoReveal":true,"withConfidence":false,"passwordProtected":false}},{"id":"660i9n41gsx0qry_4dww9","userId":"j8j1xfx9j0w96f2f95ru5","correlationId":"px12fnyotv4jegg2yriev","name":"usernameSet","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"username":"Jim"}},{"id":"bhd98vetn-37ud5l10-b4","userId":"j8j1xfx9j0w96f2f95ru5","correlationId":"px12fnyotv4jegg2yriev","name":"avatarSet","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"avatar":0}},{"id":"w9oip_we25t89g_c6l8ep","userId":"j8j1xfx9j0w96f2f95ru5","correlationId":"px12fnyotv4jegg2yriev","name":"storyAdded","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"createdAt":1692944374282,"storyId":"4rtxhvz4jgpulus79y8_b","title":"Welcome to your Poinz room!","description":"This is a sample story that we already created for you.\n\n - On the left, you can edit your stories and add new ones.\n - Below you can estimate this story by clicking on one of the cards.\n - Invite your teammates by sharing the url with them.\n\nPlease note: If a Poinz room is unused for more than two months, it will get deleted automatically!\n\nFor more information, refer to the manual https://github.com/Zuehlke/poinz/blob/master/docu/manual.md","estimations":{}}},{"id":"9us-zlk62zk0_lndslntw","userId":"j8j1xfx9j0w96f2f95ru5","correlationId":"px12fnyotv4jegg2yriev","name":"storySelected","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"storyId":"4rtxhvz4jgpulus79y8_b"}},{"id":"nt02axfu7yybqk5k9di6q","userId":"9266pmjmy5qdf2eog3is8","correlationId":"jh-m2mkyjrm0s2024x0h0","name":"joinedRoom","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"stories":[{"id":"4rtxhvz4jgpulus79y8_b","title":"Welcome to your Poinz room!","estimations":{},"createdAt":1692944374282,"description":"This is a sample story that we already created for you.\n\n - On the left, you can edit your stories and add new ones.\n - Below you can estimate this story by clicking on one of the cards.\n - Invite your teammates by sharing the url with them.\n\nPlease note: If a Poinz room is unused for more than two months, it will get deleted automatically!\n\nFor more information, refer to the manual https://github.com/Zuehlke/poinz/blob/master/docu/manual.md"}],"selectedStory":"4rtxhvz4jgpulus79y8_b","cardConfig":[{"label":"?","value":-2,"color":"#bdbfbf"},{"label":"1/2","value":0.5,"color":"#667a66"},{"label":"1","value":1,"color":"#839e7a"},{"label":"2","value":2,"color":"#8cb876"},{"label":"3","value":3,"color":"#96ba5b"},{"label":"5","value":5,"color":"#b6c76b"},{"label":"8","value":8,"color":"#c9c857"},{"label":"13","value":13,"color":"#d9be3b"},{"label":"21","value":21,"color":"#d6cda1"},{"label":"34","value":34,"color":"#9fa6bd"},{"label":"55","value":55,"color":"#6a80ab"},{"label":"BIG","value":-1,"color":"#1d508f"}],"autoReveal":true,"withConfidence":false,"passwordProtected":false,"users":[{"disconnected":false,"id":"j8j1xfx9j0w96f2f95ru5","avatar":0,"username":"Jim"},{"id":"9266pmjmy5qdf2eog3is8","username":"John","avatar":0,"disconnected":false,"excluded":false}]}},{"id":"kow-dii66boy4cm7e4pv2","userId":"9266pmjmy5qdf2eog3is8","correlationId":"jh-m2mkyjrm0s2024x0h0","name":"usernameSet","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"username":"John"}},{"id":"f01_zdsiui3zfi1qxedcc","userId":"9266pmjmy5qdf2eog3is8","correlationId":"jh-m2mkyjrm0s2024x0h0","name":"avatarSet","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"avatar":0}},{"id":"pqztv6al1yqs-ahsmd2c5","userId":"9266pmjmy5qdf2eog3is8","correlationId":"zd5-n829jik8djqzukzfj","name":"storyEstimateGiven","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"storyId":"4rtxhvz4jgpulus79y8_b","value":8}},{"id":"t391mvsse-m3-w2zpehlg","userId":"9266pmjmy5qdf2eog3is8","correlationId":"nd6_t_twooqwrl3v4mqnn","name":"connectionLost","roomId":"50o2rgl3jl__62wpkqnjw","payload":{}},{"id":"idrjxvwrarr3zz8-d2_9z","userId":"j8j1xfx9j0w96f2f95ru5","correlationId":"4bhjci68ksn9bf6vhz7a8","name":"kicked","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"userId":"9266pmjmy5qdf2eog3is8"}}]
[{"id":"ko6y5eaehvl66o_prfby2","userId":"wspxac8nz2d8ciu_vbker","correlationId":"41rjiehakhdxnuduw0ok2","name":"roomCreated","roomId":"kaan1p66udc_utjji6kkt","restricted":true,"payload":{}},{"id":"tlez9-zu-1cqf-11o4lcp","userId":"wspxac8nz2d8ciu_vbker","correlationId":"41rjiehakhdxnuduw0ok2","name":"joinedRoom","roomId":"kaan1p66udc_utjji6kkt","payload":{"users":[{"disconnected":false,"id":"wspxac8nz2d8ciu_vbker","avatar":0}],"stories":[],"cardConfig":[{"label":"?","value":-2,"color":"#bdbfbf"},{"label":"1/2","value":0.5,"color":"#667a66"},{"label":"1","value":1,"color":"#839e7a"},{"label":"2","value":2,"color":"#8cb876"},{"label":"3","value":3,"color":"#96ba5b"},{"label":"5","value":5,"color":"#b6c76b"},{"label":"8","value":8,"color":"#c9c857"},{"label":"13","value":13,"color":"#d9be3b"},{"label":"21","value":21,"color":"#d6cda1"},{"label":"34","value":34,"color":"#9fa6bd"},{"label":"55","value":55,"color":"#6a80ab"},{"label":"BIG","value":-1,"color":"#1d508f"}],"autoReveal":true,"withConfidence":false,"passwordProtected":false}},{"id":"129ozckhh3sz8s-ewx9ki","userId":"wspxac8nz2d8ciu_vbker","correlationId":"41rjiehakhdxnuduw0ok2","name":"usernameSet","roomId":"kaan1p66udc_utjji6kkt","payload":{"username":"Jim"}},{"id":"pg08xxzfzl6fr-gkh1u28","userId":"wspxac8nz2d8ciu_vbker","correlationId":"41rjiehakhdxnuduw0ok2","name":"avatarSet","roomId":"kaan1p66udc_utjji6kkt","payload":{"avatar":0}},{"id":"a00cyoxqcmk86y3yer08v","userId":"wspxac8nz2d8ciu_vbker","correlationId":"41rjiehakhdxnuduw0ok2","name":"storyAdded","roomId":"kaan1p66udc_utjji6kkt","payload":{"createdAt":1696148404816,"storyId":"252y7yyk4f3hfnofai_n7","title":"Welcome to your Poinz room!","description":"This is a sample story that we already created for you.\n\n - On the left, you can edit your stories and add new ones.\n - Below you can estimate this story by clicking on one of the cards.\n - Invite your teammates by sharing the url with them.\n\nPlease note: If a Poinz room is unused for more than two months, it will get deleted automatically!\n\nFor more information, refer to the manual https://github.com/Zuehlke/poinz/blob/master/docu/manual.md","estimations":{}}},{"id":"8w1unw64a88uy0_rzq1n5","userId":"wspxac8nz2d8ciu_vbker","correlationId":"41rjiehakhdxnuduw0ok2","name":"storySelected","roomId":"kaan1p66udc_utjji6kkt","payload":{"storyId":"252y7yyk4f3hfnofai_n7"}},{"id":"kg_oelb391tl9htch45ce","userId":"7kk5s8qyar7jl_9nwc8oi","correlationId":"7psf__3g2zy553r5p-jaj","name":"joinedRoom","roomId":"kaan1p66udc_utjji6kkt","payload":{"stories":[{"id":"252y7yyk4f3hfnofai_n7","title":"Welcome to your Poinz room!","estimations":{},"createdAt":1696148404816,"description":"This is a sample story that we already created for you.\n\n - On the left, you can edit your stories and add new ones.\n - Below you can estimate this story by clicking on one of the cards.\n - Invite your teammates by sharing the url with them.\n\nPlease note: If a Poinz room is unused for more than two months, it will get deleted automatically!\n\nFor more information, refer to the manual https://github.com/Zuehlke/poinz/blob/master/docu/manual.md"}],"selectedStory":"252y7yyk4f3hfnofai_n7","cardConfig":[{"label":"?","value":-2,"color":"#bdbfbf"},{"label":"1/2","value":0.5,"color":"#667a66"},{"label":"1","value":1,"color":"#839e7a"},{"label":"2","value":2,"color":"#8cb876"},{"label":"3","value":3,"color":"#96ba5b"},{"label":"5","value":5,"color":"#b6c76b"},{"label":"8","value":8,"color":"#c9c857"},{"label":"13","value":13,"color":"#d9be3b"},{"label":"21","value":21,"color":"#d6cda1"},{"label":"34","value":34,"color":"#9fa6bd"},{"label":"55","value":55,"color":"#6a80ab"},{"label":"BIG","value":-1,"color":"#1d508f"}],"autoReveal":true,"withConfidence":false,"issueTrackingUrl":null,"passwordProtected":false,"users":[{"disconnected":false,"id":"wspxac8nz2d8ciu_vbker","avatar":0,"username":"Jim"},{"id":"7kk5s8qyar7jl_9nwc8oi","username":"John","avatar":0,"disconnected":false,"excluded":false}]}},{"id":"xfggnq9jfdxwnrx1togu4","userId":"7kk5s8qyar7jl_9nwc8oi","correlationId":"7psf__3g2zy553r5p-jaj","name":"usernameSet","roomId":"kaan1p66udc_utjji6kkt","payload":{"username":"John"}},{"id":"mxdfluc2w89o92vns07lq","userId":"7kk5s8qyar7jl_9nwc8oi","correlationId":"7psf__3g2zy553r5p-jaj","name":"avatarSet","roomId":"kaan1p66udc_utjji6kkt","payload":{"avatar":0}},{"id":"4s20ymbl7rjzk2bml-t0m","userId":"7kk5s8qyar7jl_9nwc8oi","correlationId":"rpoh56x0t0oap2ntpbzpm","name":"storyEstimateGiven","roomId":"kaan1p66udc_utjji6kkt","payload":{"storyId":"252y7yyk4f3hfnofai_n7","value":8}},{"id":"j2m4vn8x2oknz93owxqrj","userId":"7kk5s8qyar7jl_9nwc8oi","correlationId":"6ua2m0_ri8amm-0rqhw6u","name":"connectionLost","roomId":"kaan1p66udc_utjji6kkt","payload":{}},{"id":"ilabxrl_vjp04i-9u_oop","userId":"wspxac8nz2d8ciu_vbker","correlationId":"ezy4h6ki4d9c05lp4nsaj","name":"kicked","roomId":"kaan1p66udc_utjji6kkt","payload":{"userId":"7kk5s8qyar7jl_9nwc8oi"}}]
Loading