Skip to content

Commit

Permalink
Merge pull request #8 from swawa-yu/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@swawa-yu
swawa-yu authored Dec 29, 2023
2 parents 8335a29 + 315c9af commit 82752a9
Show file tree
Hide file tree
Showing 6 changed files with 215 additions and 131 deletions.
1 change: 1 addition & 0 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ function App() {
semester: '指定なし',
jikiKubun: '指定なし',
courseType: '指定なし',
language: '指定なし',
});
const [isTableRaw, setIsTableRaw] = useState(true);

Expand Down
14 changes: 8 additions & 6 deletions src/search/KomaSelector.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import React, { useState } from 'react';
import './KomaSelector.css';

export const youbis: Youbi[] = ["月", "火", "水", "木", "金"];
export const komas: Koma[] = [1, 2, 3, 4, 5];

// TODO: 土、6,7コマを追加すると「その他」の出番はなくなる
export const youbis: Youbi[] = ["月", "火", "水", "木", "金", "土"];
export const komas: Koma[] = [1, 2, 3, 4, 5, 6, 7];
export const specialSchedules: SpecialSchedule[] = ["集中", "その他"];

type Youbi = "月" | "火" | "水" | "木" | "金";
type Koma = 1 | 2 | 3 | 4 | 5;
type Youbi = "月" | "火" | "水" | "木" | "金" | "土";
type Koma = 1 | 2 | 3 | 4 | 5 | 6 | 7;
type SpecialSchedule = "集中" | "その他";
export type YoubiKoma = `${Youbi}${Koma}` | SpecialSchedule;
export type YoubiKomaSelected = {
Expand Down Expand Up @@ -63,8 +65,8 @@ export const initializeYoubiKoma = (initialValue: boolean): YoubiKomaSelected =>

const KomaSelector: React.FC<KomaSelectorProps> = ({ onScheduleChange }) => {
// 初期状態で全ての曜日とコマをtrueに設定 // 曜日とコマの配列
const youbis: Youbi[] = ["月", "火", "水", "木", "金"];
const komas: Koma[] = [1, 2, 3, 4, 5];
const youbis: Youbi[] = ["月", "火", "水", "木", "金", "土"];
const komas: Koma[] = [1, 2, 3, 4, 5, 6, 7];

// 初期スケジュールを設定
const initialSchedule: YoubiKomaSelected = initializeYoubiKoma(true);
Expand Down
28 changes: 27 additions & 1 deletion src/search/SearchComponent.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,30 @@
.search-component {
/* 外枠の線を描画 */
border: 1px solid #ccc;
}

.search-groups {
padding: 20px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
/* 上揃えに変更 */
gap: 20px;
}

.search-group {
display: flex;
align-items: flex-start;
/* 上揃えに変更 */
margin-right: 20px;
}

.search-component label {
margin-right: 10px;
}

.search-component select,
.search-component input {
width: auto;
max-width: 200px;
/* セレクトメニューの最大幅を設定 */
}
279 changes: 158 additions & 121 deletions src/search/SearchComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const SearchComponent: React.FC<SearchComponentProps> = ({ onSearch, bookmarkedS
semester: "指定なし",
jikiKubun: "指定なし",
courseType: "指定なし",
language: "指定なし",
};
const [searchOptions, setSearchOptions] = useState<SearchOptions>(initialSearchOptions);

Expand All @@ -42,127 +43,163 @@ const SearchComponent: React.FC<SearchComponentProps> = ({ onSearch, bookmarkedS
<>
<h2>検索条件</h2>
<div className='search-component'>
<label htmlFor="campus-select">キャンパス:</label>
<select
id="campus-select"
value={searchOptions.campus}
onChange={(e) => setSearchOptions({ ...searchOptions, campus: e.target.value as SearchOptions['campus'] })}
>
<option value="指定なし">指定なし</option>
<option value="東広島">東広島</option>
<option value="霞">霞</option>
<option value="東千田">東千田</option>
<option value="その他">その他</option>
</select>
<label htmlFor="semester-select">セメスター:</label>
<select
id="semester-select"
value={searchOptions.semester}
onChange={(e) => setSearchOptions({ ...searchOptions, semester: e.target.value as SearchOptions['semester'] })}
>
<option value="指定なし">指定なし</option>
<option value="前期">前期</option>
<option value="後期">後期</option>
{/* <option value="解析エラー">解析エラー</option> */}
</select>

{/* TODO: 時期区分はチェックボックスにしたい */}
<label htmlFor="jiki-kubun-select">時期区分:</label>
<select
id="jiki-kubun-select"
value={searchOptions.jikiKubun}
onChange={(e) => setSearchOptions({ ...searchOptions, jikiKubun: e.target.value as SearchOptions['jikiKubun'] })}
>
{/* export const jikiKubuns = ['１ターム', '２ターム', '３ターム', '４ターム', 'セメスター（前期）', 'セメスター（後期）', 'ターム外（前期）', 'ターム外（後期）', '年度', '通年', '集中'] as const */}
<option value="指定なし">指定なし</option>
<option value="１ターム">１ターム</option>
<option value="２ターム">２ターム</option>
<option value="３ターム">３ターム</option>
<option value="４ターム">４ターム</option>
<option value="セメスター（前期）">セメスター（前期）</option>
<option value="セメスター（後期）">セメスター（後期）</option>
<option value="ターム外（前期）">ターム外（前期）</option>
<option value="ターム外（後期）">ターム外（後期）</option>
<option value="年度">年度</option>
<option value="通年">通年</option>
<option value="集中">集中</option>
{/* <option value="解析エラー">解析エラー</option> */}
</select>
{/* 科目区分のドロップダウンメニュー */}
<label htmlFor="kamoku-kubun-select">科目区分:</label>
<select
id="kamoku-kubun-select"
value={searchOptions.kamokuKubun}
onChange={(e) => setSearchOptions({ ...searchOptions, kamokuKubun: e.target.value })}
>
<option value="">指定なし</option>
{kamokuKubuns.map((kamokuKubun, index) => (
<option key={index} value={kamokuKubun}>{kamokuKubun}</option>
))}
</select>

<label htmlFor="course-type-select">学部／大学院:</label>
<select
id="course-type-select"
value={searchOptions.courseType}
onChange={(e) => setSearchOptions({ ...searchOptions, courseType: e.target.value as SearchOptions['courseType'] })}
>
<option value="指定なし">指定なし</option>
<option value="学部">学部</option>
<option value="大学院">大学院</option>
</select>

{/* 開講部局のドロップダウンメニュー */}
<label htmlFor="kaikou-bukyoku-select">開講部局:</label>
<select
id="kaikou-bukyoku-select"
value={searchOptions.kaikouBukyoku}
onChange={(e) => setSearchOptions({ ...searchOptions, kaikouBukyoku: e.target.value })}
>
<option value="">指定なし</option>
{kaikouBukyokus.map((kaikouBukyoku, index) => (
<option key={index} value={kaikouBukyoku}>{kaikouBukyoku}</option>
))}
</select>

<KomaSelector onScheduleChange={handleYoubiKomaChange} />

<label htmlFor="subject-name">授業科目名(部分一致): </label>
<input
id="subject-name"
type="text"
value={searchOptions.subjectName}
onChange={(e) => setSearchOptions({ ...searchOptions, subjectName: e.target.value })}
placeholder="授業科目名"
/>
<br></br>

<label htmlFor="teacher-name">担当教員名(部分一致): </label>
<input
id='teacher-name'
type="text"
value={searchOptions.teacher}
onChange={(e) => setSearchOptions({ ...searchOptions, teacher: e.target.value })}
placeholder="担当教員名"
/>

<br></br>
<br></br>

<label htmlFor="bookmark-filter">ブックマーク:</label>
<select
id="bookmark-filter"
value={searchOptions.bookmarkFilter}
onChange={(e) => setSearchOptions({ ...searchOptions, bookmarkFilter: e.target.value as BookmarkFilter })}
>
<option value="all">指定なし</option>
<option value="bookmark">ブックマークのみを表示</option>
<option value="except-bookmark">ブックマークを除外</option>
</select>
<br></br>
<br></br>
<button onClick={handleSearch}>検索</button>
<button onClick={handleClear}>検索条件をクリア</button>
<div className='search-groups'>
<div>
<div className='search-group'>
<label htmlFor="campus-select">キャンパス:</label>
<select
id="campus-select"
value={searchOptions.campus}
onChange={(e) => setSearchOptions({ ...searchOptions, campus: e.target.value as SearchOptions['campus'] })}
>
<option value="指定なし">指定なし</option>
<option value="東広島">東広島</option>
<option value="霞">霞</option>
<option value="東千田">東千田</option>
<option value="その他">その他</option>
</select>
</div>

<div className='search-group'>
<label htmlFor="semester-select">セメスター:</label>
<select
id="semester-select"
value={searchOptions.semester}
onChange={(e) => setSearchOptions({ ...searchOptions, semester: e.target.value as SearchOptions['semester'] })}
>
<option value="指定なし">指定なし</option>
<option value="前期">前期</option>
<option value="後期">後期</option>
{/* <option value="解析エラー">解析エラー</option> */}
</select>
</div>

<div className='search-group'>
{/* TODO: 時期区分はチェックボックスにしたい */}
<label htmlFor="jiki-kubun-select">時期区分:</label>
<select
id="jiki-kubun-select"
value={searchOptions.jikiKubun}
onChange={(e) => setSearchOptions({ ...searchOptions, jikiKubun: e.target.value as SearchOptions['jikiKubun'] })}
>
<option value="指定なし">指定なし</option>
<option value="１ターム">１ターム</option>
<option value="２ターム">２ターム</option>
<option value="３ターム">３ターム</option>
<option value="４ターム">４ターム</option>
<option value="セメスター（前期）">セメスター（前期）</option>
<option value="セメスター（後期）">セメスター（後期）</option>
<option value="ターム外（前期）">ターム外（前期）</option>
<option value="ターム外（後期）">ターム外（後期）</option>
<option value="年度">年度</option>
<option value="通年">通年</option>
<option value="集中">集中</option>
{/* <option value="解析エラー">解析エラー</option> */}
</select>
</div>

<div className='search-group'>
{/* 科目区分のドロップダウンメニュー */}
<label htmlFor="kamoku-kubun-select">科目区分:</label>
<select
id="kamoku-kubun-select"
value={searchOptions.kamokuKubun}
onChange={(e) => setSearchOptions({ ...searchOptions, kamokuKubun: e.target.value })}
>
<option value="">指定なし</option>
{kamokuKubuns.map((kamokuKubun, index) => (
<option key={index} value={kamokuKubun}>{kamokuKubun}</option>
))}
</select>
</div>

<div className='search-group'>
<label htmlFor="language-select">使用言語:</label>
<select
id="language-select"
value={searchOptions.language}
onChange={(e) => setSearchOptions({ ...searchOptions, language: e.target.value as SearchOptions['language'] })}
>
<option value="指定なし">指定なし</option>
<option value="J : 日本語">J : 日本語</option>
<option value="E : 英語">E : 英語</option>
<option value="B : 日本語・英語">B : 日本語・英語</option>
<option value="O : その他">O : その他</option>
</select>
</div>

<div className='search-group'>
<label htmlFor="course-type-select">学部／大学院:</label>
<select
id="course-type-select"
value={searchOptions.courseType}
onChange={(e) => setSearchOptions({ ...searchOptions, courseType: e.target.value as SearchOptions['courseType'] })}
>
<option value="指定なし">指定なし</option>
<option value="学部">学部</option>
<option value="大学院">大学院</option>
</select>
</div>

<div className='search-group'>
{/* 開講部局のドロップダウンメニュー */}
<label htmlFor="kaikou-bukyoku-select">開講部局:</label>
<select
id="kaikou-bukyoku-select"
value={searchOptions.kaikouBukyoku}
onChange={(e) => setSearchOptions({ ...searchOptions, kaikouBukyoku: e.target.value })}
>
<option value="">指定なし</option>
{kaikouBukyokus.map((kaikouBukyoku, index) => (
<option key={index} value={kaikouBukyoku}>{kaikouBukyoku}</option>
))}
</select>
</div>

</div>
<div>
<div className='search-group'>
<label htmlFor="subject-name">授業科目名(部分一致): </label>
<input
id="subject-name"
type="text"
value={searchOptions.subjectName}
onChange={(e) => setSearchOptions({ ...searchOptions, subjectName: e.target.value })}
placeholder="授業科目名"
/></div>

<div className='search-group'>
<br></br>

<label htmlFor="teacher-name">担当教員名(部分一致): </label>
<input
id='teacher-name'
type="text"
value={searchOptions.teacher}
onChange={(e) => setSearchOptions({ ...searchOptions, teacher: e.target.value })}
placeholder="担当教員名"
/>
</div>

<div className='search-group'>
<label htmlFor="bookmark-filter">ブックマーク:</label>
<select
id="bookmark-filter"
value={searchOptions.bookmarkFilter}
onChange={(e) => setSearchOptions({ ...searchOptions, bookmarkFilter: e.target.value as BookmarkFilter })}
>
<option value="all">指定なし</option>
<option value="bookmark">ブックマークのみを表示</option>
<option value="except-bookmark">ブックマークを除外</option>
</select>
</div>
</div>
<KomaSelector onScheduleChange={handleYoubiKomaChange} />
</div>
<div>
<button onClick={handleSearch}>検索</button>
<button onClick={handleClear}>検索条件をクリア</button>
</div>
</div >
</>
);
Expand Down
Loading

0 comments on commit 82752a9

Please sign in to comment.