Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit 63a0196

Browse files
MKleusbergMKleusberg
committed
webui: Migrate stars and watchers pages to React
This also removes the large headline from the pages which did not look that pretty.
1 parent 65476a4 commit 63a0196

File tree

6 files changed

+52
-61
lines changed

6 files changed

+52
-61
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ webui/js/auth.js
5555
webui/js/branches.js
5656
webui/js/database-settings.js
5757
webui/js/database-view.js
58+
webui/js/database-watchers.js
5859
webui/js/db-header.js
5960
webui/js/markdown-editor.js
6061

‎cypress/e2e/1-webui/auth0_dialog.cy.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ describe('ensure auth0 dialog is available on all pages', () => {
9191

9292
it('stars page', () => {
9393
cy.visit('stars/default/Assembly Election 2017.sqlite')
94-
cy.get('[data-cy="stars"]').should('contain.text', 'People who starred')
94+
cy.title().should('include', 'Stars')
9595
cy.get('[data-cy="loginlnk"]').click()
9696
cy.get('.auth0-lock-name').should('contain.text', 'Auth0')
9797
})
@@ -112,7 +112,7 @@ describe('ensure auth0 dialog is available on all pages', () => {
112112

113113
it('watchers page', () => {
114114
cy.visit('watchers/default/Assembly Election 2017.sqlite')
115-
cy.get('[data-cy="pplwatch"]').should('contain.text', 'People watching')
115+
cy.title().should('include', 'Watchers')
116116
cy.get('[data-cy="loginlnk"]').click()
117117
cy.get('.auth0-lock-name').should('contain.text', 'Auth0')
118118
})

‎webui/jsx/app.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Auth from "./auth";
77
import BranchesTable from "./branches";
88
import DatabaseSettings from "./database-settings";
99
import DatabaseView from "./database-view";
10+
import DatabaseWatchers from "./database-watchers";
1011
import DbHeader from "./db-header";
1112
import MarkdownEditor from "./markdown-editor";
1213

@@ -50,6 +51,16 @@ import MarkdownEditor from "./markdown-editor";
5051
}
5152
}
5253

54+
{
55+
const rootNode = document.getElementById("database-watchers");
56+
if (rootNode) {
57+
const stars = rootNode.dataset.stars;
58+
59+
const root = ReactDOM.createRoot(rootNode);
60+
root.render(<DatabaseWatchers stars={stars} />);
61+
}
62+
}
63+
5364
{
5465
document.querySelectorAll(".markdown-editor").forEach((rootNode) => {
5566
const editorId = rootNode.dataset.id;

‎webui/jsx/database-watchers.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const React = require("react");
2+
const ReactDOM = require("react-dom");
3+
4+
export default function DatabaseWatchers({stars}) {
5+
let data = stars ? starsData : watchersData;
6+
7+
if (data === null) {
8+
if (stars) {
9+
return <h3>No-one has starred {meta.owner + "/" + meta.database} yet</h3>;
10+
} else {
11+
return <h3>No-one is watching {meta.owner + "/" + meta.database} yet</h3>;
12+
}
13+
}
14+
15+
let rows = [];
16+
data.forEach(function(v) {
17+
rows.push(
18+
<li className="list-group-item">
19+
<h4>• <a className="blackLink" href={"/" + v.Owner}>{v.display_name}</a></h4>
20+
{stars ? "Starred" : "Started watching"} <span title={new Date(v.DateEntry).toLocaleString()}>{getTimePeriod(v.DateEntry, true)}</span>
21+
</li>
22+
);
23+
});
24+
25+
return (
26+
<ul className="list-group">
27+
{rows}
28+
</ul>
29+
);
30+
}

‎webui/templates/stars.html

Lines changed: 4 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,18 @@
11
[[ define "starsPage" ]]
22
<!doctype html>
3-
<html ng-app="DBHub" ng-controller="starsView">
3+
<html>
44
[[ template "head" . ]]
55
<body>
66
[[ template "header" . ]]
77
<div>
88
<div id="db-header-root"></div>
9-
<div class="row">
10-
<div class="col-md-12">
11-
<h2 style="text-align: center;">
12-
<span data-cy="stars">People who starred</span>
13-
<a class="blackLink" href="/[[ .DB.Info.Owner ]]" data-cy="ownerlnk">[[ .DB.Info.Owner ]]</a> /
14-
<a class="blackLink" href="/[[ .DB.Info.Owner ]]/[[ .DB.Info.Database ]]" data-cy="dblnk">[[ .DB.Info.Database ]]</a>
15-
</h2>
16-
<table ng-if="stars.Stars != ''" class="table table-striped table-responsive profileTable">
17-
<tr ng-repeat="row in stars.Stars">
18-
<td>
19-
<h4>• <a class="blackLink" href="/{{ row.Owner }}">{{ row.display_name}}</a></h4>
20-
Starred <span title="{{ row.DateEntry | date : 'medium' }}">{{ getTimePeriodTxt(row.DateEntry, true) }}</span>
21-
</td>
22-
</tr>
23-
</table>
24-
<h3 ng-if="stars.Stars === null" style="text-align: center;">No-one has starred [[ .DB.Info.Owner ]]/[[ .DB.Info.Database ]] yet</h3>
25-
</div>
26-
</div>
9+
<div id="database-watchers" data-stars="1"></div>
2710
</div>
2811
[[ template "script_db_header" . ]]
29-
[[ template "footer" . ]]
3012
<script>
31-
let app = angular.module('DBHub', ['ngSanitize']);
32-
app.controller('starsView', function($scope) {
33-
$scope.stars = { Stars: [[ .Stars ]] }
34-
35-
// Returns a nicely presented "time elapsed" string
36-
$scope.getTimePeriodTxt = function(date1, includeOn) {
37-
return getTimePeriod(date1, includeOn)
38-
};
39-
});
13+
const starsData = [[ .Stars ]];
4014
</script>
15+
[[ template "footer" . ]]
4116
</body>
4217
</html>
4318
[[ end ]]

‎webui/templates/watchers.html

Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,17 @@
11
[[ define "watchersPage" ]]
22
<!doctype html>
3-
<html ng-app="DBHub" ng-controller="watchersView">
3+
<html>
44
[[ template "head" . ]]
55
<body>
66
[[ template "header" . ]]
77
<div>
88
<div id="db-header-root"></div>
9-
<div class="row">
10-
<div class="col-md-12">
11-
<h2 style="text-align: center;">
12-
<span data-cy="pplwatch">People watching</span>
13-
<a class="blackLink" href="/[[ .DB.Info.Owner ]]" data-cy="ownerlnk">[[ .DB.Info.Owner ]]</a> /
14-
<a class="blackLink" href="/[[ .DB.Info.Owner ]]/[[ .DB.Info.Database ]]" data-cy="dblnk">[[ .DB.Info.Database ]]</a>
15-
</h2>
16-
<table ng-if="watchers.Watchers != ''" class="table table-striped table-responsive profileTable">
17-
<tr ng-repeat="row in watchers.Watchers">
18-
<td>
19-
<h4>• <a class="blackLink" href="/{{ row.Owner }}">{{ row.display_name}}</a></h4>
20-
Started watching <span title="{{ row.DateEntry | date : 'medium' }}">{{ getTimePeriodTxt(row.DateEntry, true) }}</span>
21-
</td>
22-
</tr>
23-
</table>
24-
<h3 ng-if="watchers.Watchers === null" style="text-align: center;">No-one is watching [[ .DB.Info.Owner ]]/[[ .DB.Info.Database ]] yet</h3>
25-
</div>
26-
</div>
9+
<div id="database-watchers"></div>
2710
</div>
2811
[[ template "script_db_header" . ]]
29-
[[ template "footer" . ]]
3012
<script>
31-
let app = angular.module('DBHub', ['ngSanitize']);
32-
app.controller('watchersView', function($scope) {
33-
$scope.watchers = { Watchers: [[ .Watchers ]] }
34-
35-
// Returns a nicely presented "time elapsed" string
36-
$scope.getTimePeriodTxt = function(date1, includeOn) {
37-
return getTimePeriod(date1, includeOn)
38-
};
39-
});
13+
const watchersData = [[ .Watchers ]];
4014
</script>
41-
</body>
15+
[[ template "footer" . ]]
4216
</html>
4317
[[ end ]]

0 commit comments

Comments
 (0)