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

Search by player #249

Merged
merged 1 commit into from
Jun 2, 2024
Merged
Show file tree
Hide file tree
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
Search by player
  • Loading branch information
ssdh233 committed Jun 2, 2024
commit cb568ec108748356733b8a07db6d8eb08b17768a
5 changes: 4 additions & 1 deletion locales/en/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
"title": "Gitadora Skill Viewer - Share your GITADORA skill list",
"home": "home",
"kasegiSong": "Song ranking",
"list": "Player list",
"lang": "Lang",
"intro": {
"title": "Introdution",
Expand Down Expand Up @@ -74,6 +73,10 @@
"uservoice": {
"message": "If you find a bug or have some suggestions, please feel free to leave a message here :)"
},
"list": {
"title": "Player list",
"searchPlaceholder": "Search by player name"
},
"kasegi": {
"title": "song ranking",
"songname": "Name",
Expand Down
5 changes: 4 additions & 1 deletion locales/ja/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
"title": "Gitadora Skill Viewer - ギタドラのスキル帳を共有するウェブサイト",
"home": "ホーム",
"kasegiSong": "稼ぎ曲",
"list": "ユーザ一覧",
"lang": "言語",
"intro": {
"title": "なにこれ?",
Expand Down Expand Up @@ -74,6 +73,10 @@
"uservoice": {
"message": "不具合の報告や、新しい機能の追加のご要望がありましたらコメントしていただければ助かります。"
},
"list": {
"title": "ユーザー一覧",
"searchPlaceholder": "プレイヤー名で検索"
},
"kasegi": {
"title": "稼ぎ曲ランキング",
"desc": "ギタドラ{type}{scope}の稼ぎ情報を載せております。",
Expand Down
5 changes: 4 additions & 1 deletion locales/ko/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
"title": "Gitadora Skill Viewer - 기타도라 스킬 표 공유 사이트",
"home": "홈",
"kasegiSong": "스킬 곡 랭킹",
"list": "유저 일람",
"lang": "언어",
"intro": {
"title": "어떤 사이트인가요?",
Expand Down Expand Up @@ -74,6 +73,10 @@
"uservoice": {
"message": "버그를 찾으셨거나 새로운 기능에 대한 의견이 있으시다면, 코멘트를 남겨주시면 감사하겠습니다."
},
"list": {
"title": "유저 일람",
"searchPlaceholder": "Search by player name"
},
"kasegi": {
"title": " 스킬 곡 랭킹 |",
"songname": "곡명",
Expand Down
5 changes: 4 additions & 1 deletion locales/zh/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
"title": "Gitadora Skill Viewer - 分享你的Skill",
"home": "主页",
"kasegiSong": "赚分曲排行",
"list": "玩家列表",
"lang": "语言",
"intro": {
"title": "这是什么?",
Expand Down Expand Up @@ -74,6 +73,10 @@
"uservoice": {
"message": "有什么意见,或者bug反馈的话欢迎在这留言!"
},
"list": {
"title": "玩家列表",
"searchPlaceholder": "搜索玩家名"
},
"kasegi": {
"title": "赚分曲排行",
"songname": "曲名",
Expand Down
24 changes: 12 additions & 12 deletions src/react/AppHeader.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ function AppHeader(props) {
</Title>
<RightTopButtons>
<MuiIconButton
size={isPC ? "" : "small"}
size={isPC ? undefined : "small"}
onClick={() =>
setThemeKey(key => {
const newThemeKey = key === "default" ? "dark" : "default";
Expand All @@ -78,9 +78,9 @@ function AppHeader(props) {
}
>
{isDark ? (
<BrightnessHighIcon fontSize={isPC ? "" : "small"} />
<BrightnessHighIcon fontSize={isPC ? undefined : "small"} />
) : (
<Brightness4Icon fontSize={isPC ? "" : "small"} />
<Brightness4Icon fontSize={isPC ? undefined : "small"} />
)}
</MuiIconButton>
</RightTopButtons>
Expand All @@ -95,21 +95,21 @@ function AppHeader(props) {
color: "black"
}}
>
<MuiButton size={isPC ? "" : "small"} id="home-button" aria-haspopup={true}>
<HomeIcon fontSize={isPC ? "" : "small"} />
<MuiButton size={isPC ? undefined : "small"} id="home-button" aria-haspopup={true}>
<HomeIcon fontSize={isPC ? undefined : "small"} />
<ButtonLabel>
<FormattedMessage id="home" />
</ButtonLabel>
</MuiButton>
</Link>
)}
<MuiButton
size={isPC ? "" : "small"}
size={isPC ? undefined : "small"}
id="kasegi-button"
onClick={event => setKasegiAnchorEl(event.target)}
aria-haspopup={true}
>
<AttachMoney fontSize={isPC ? "" : "small"} />
<AttachMoney fontSize={isPC ? undefined : "small"} />
<ButtonLabel>
<FormattedMessage id="kasegiSong" />
</ButtonLabel>
Expand Down Expand Up @@ -171,20 +171,20 @@ function AppHeader(props) {
</List>
</Popover>
<Link to={`/${locale}/${CURRENT_VERSION}/list`} key={versionInfo}>
<MuiButton size={isPC ? "" : "small"} id="list-button">
<FormatListBulleted fontSize={isPC ? "" : "small"} />
<MuiButton size={isPC ? undefined : "small"} id="list-button">
<FormatListBulleted fontSize={isPC ? undefined : "small"} />
<ButtonLabel>
<FormattedMessage id="list" />
<FormattedMessage id="list.title" />
</ButtonLabel>
</MuiButton>
</Link>
<MuiButton
size={isPC ? "" : "small"}
size={isPC ? undefined : "small"}
onClick={event => setLangAnchorEl(event.target)}
id="lang-button"
aria-haspopup={true}
>
<Language fontSize={isPC ? "" : "small"} />
<Language fontSize={isPC ? undefined : "small"} />
<ButtonLabel>
<FormattedMessage id="lang" />
</ButtonLabel>
Expand Down
32 changes: 29 additions & 3 deletions src/react/ListPage/ListPage.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from "react";
import React, { useState } from "react";
import styled, { withTheme } from "styled-components";
import { Link } from "react-router-dom";
import { Helmet } from "react-helmet";
import { injectIntl } from "react-intl";
import { injectIntl, useIntl } from "react-intl";
import ReactTable from "react-table";
import TextField from "@material-ui/core/TextField";

import { VERSION_NAME } from "../../constants.js";
import skillColorStyles from "../styles/skillColor.js";
Expand All @@ -15,8 +16,11 @@ const getLevel = (...skills) => {
};

function ListPage(props) {
const intl = useIntl();
const { theme } = props;

const [searchText, setSearchText] = useState("");

const getTrProps = () => ({
style: {
color: theme.list.tableContent,
Expand Down Expand Up @@ -128,12 +132,24 @@ function ListPage(props) {
})} | ${fullVersionName} | Gitadora Skill Viewer`}</title>
<style>{stringStyles}</style>
</Helmet>

{data && (
<ListTableContainer isAdmin id="list-table">
<Title>{fullVersionName}</Title>
<SearchFieldContainer>
<SearchField
id="outlined-margin-dense"
value={searchText}
onChange={e => setSearchText(e.target.value)}
fullWidth
placeholder={intl.formatMessage({ id: "list.searchPlaceholder" })}
margin="dense"
variant="outlined"
/>
</SearchFieldContainer>
<TableDiv>
<ReactTable
data={data}
data={data.filter(x => x.playerName.includes(searchText))}
columns={columns}
defaultPageSize={100}
pageSizeOptions={[5, 100, 200, 500, 1000]}
Expand Down Expand Up @@ -174,4 +190,14 @@ const Title = styled.h2`

const stringStyles = skillColorStyles;

const SearchFieldContainer = styled.div`
width: 800px;
`;

const SearchField = styled(TextField)`
margin-left: 8px;
margin-right: 8px;
width: 100%;
`;

export default withTheme(withMediaQuery(injectIntl(ListPage)));
Loading