Skip to content

Commit

Permalink
Merge pull request #26 from traP-jp/css
Browse files Browse the repository at this point in the history 
Css
  • Loading branch information
@Rozelin-dc
Rozelin-dc authored Jun 16, 2024
2 parents cae30b0 + 9cd3e85 commit 464100d
Show file tree
Hide file tree
Showing 6 changed files with 281 additions and 96 deletions.
11 changes: 11 additions & 0 deletions src/assets/lock.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
93 changes: 65 additions & 28 deletions src/lib/apis/generated/api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,33 +64,21 @@ export interface EnterRoomSuccess {
/**
*
* @export
* @interface GetRoomsInner
* @interface GetRooms
*/
export interface GetRoomsInner {
export interface GetRooms {
/**
*
* @type {string}
* @memberof GetRoomsInner
* @type {Array<Room>}
* @memberof GetRooms
*/
'roomId': string;
/**
*
* @type {string}
* @memberof GetRoomsInner
*/
'roomName': string;
'rooms': Array<Room>;
/**
*
* @type {boolean}
* @memberof GetRoomsInner
* @memberof GetRooms
*/
'isPublic': boolean;
/**
* 部屋に入っている人数
* @type {number}
* @memberof GetRoomsInner
*/
'userCount': number;
'hasNext': boolean;
}
/**
*
Expand Down Expand Up @@ -136,6 +124,37 @@ export interface PostRoomSuccess {
*/
'roomName': string;
}
/**
*
* @export
* @interface Room
*/
export interface Room {
/**
*
* @type {string}
* @memberof Room
*/
'roomId': string;
/**
*
* @type {string}
* @memberof Room
*/
'roomName': string;
/**
*
* @type {boolean}
* @memberof Room
*/
'isPublic': boolean;
/**
* 部屋に入っている人数
* @type {number}
* @memberof Room
*/
'userCount': number;
}

/**
* DefaultApi - axios parameter creator
Expand Down Expand Up @@ -222,10 +241,12 @@ export const DefaultApiAxiosParamCreator = function (configuration?: Configurati
/**
*
* @summary 全ての部屋一覧を取得
* @param {number} [limit] 何件取得するか
* @param {number} [offset] 何件目から取得するか
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
apiRoomsGet: async (options: RawAxiosRequestConfig = {}): Promise<RequestArgs> => {
apiRoomsGet: async (limit?: number, offset?: number, options: RawAxiosRequestConfig = {}): Promise<RequestArgs> => {
const localVarPath = `/api/rooms`;
// use dummy base URL string because the URL constructor only accepts absolute URLs.
const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
Expand All @@ -238,6 +259,14 @@ export const DefaultApiAxiosParamCreator = function (configuration?: Configurati
const localVarHeaderParameter = {} as any;
const localVarQueryParameter = {} as any;

if (limit !== undefined) {
localVarQueryParameter['limit'] = limit;
}

if (offset !== undefined) {
localVarQueryParameter['offset'] = offset;
}



setSearchParams(localVarUrlObj, localVarQueryParameter);
Expand Down Expand Up @@ -323,11 +352,13 @@ export const DefaultApiFp = function(configuration?: Configuration) {
/**
*
* @summary 全ての部屋一覧を取得
* @param {number} [limit] 何件取得するか
* @param {number} [offset] 何件目から取得するか
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async apiRoomsGet(options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<GetRoomsInner>>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.apiRoomsGet(options);
async apiRoomsGet(limit?: number, offset?: number, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<GetRooms>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.apiRoomsGet(limit, offset, options);
const localVarOperationServerIndex = configuration?.serverIndex ?? 0;
const localVarOperationServerBasePath = operationServerMap['DefaultApi.apiRoomsGet']?.[localVarOperationServerIndex]?.url;
return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
Expand Down Expand Up @@ -379,11 +410,13 @@ export const DefaultApiFactory = function (configuration?: Configuration, basePa
/**
*
* @summary 全ての部屋一覧を取得
* @param {number} [limit] 何件取得するか
* @param {number} [offset] 何件目から取得するか
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
apiRoomsGet(options?: any): AxiosPromise<Array<GetRoomsInner>> {
return localVarFp.apiRoomsGet(options).then((request) => request(axios, basePath));
apiRoomsGet(limit?: number, offset?: number, options?: any): AxiosPromise<GetRooms> {
return localVarFp.apiRoomsGet(limit, offset, options).then((request) => request(axios, basePath));
},
/**
*
Expand Down Expand Up @@ -433,12 +466,14 @@ export class DefaultApi extends BaseAPI {
/**
*
* @summary 全ての部屋一覧を取得
* @param {number} [limit] 何件取得するか
* @param {number} [offset] 何件目から取得するか
* @param {*} [options] Override http request option.
* @throws {RequiredError}
* @memberof DefaultApi
*/
public apiRoomsGet(options?: RawAxiosRequestConfig) {
return DefaultApiFp(this.configuration).apiRoomsGet(options).then((request) => request(this.axios, this.basePath));
public apiRoomsGet(limit?: number, offset?: number, options?: RawAxiosRequestConfig) {
return DefaultApiFp(this.configuration).apiRoomsGet(limit, offset, options).then((request) => request(this.axios, this.basePath));
}

/**
Expand Down Expand Up @@ -483,12 +518,14 @@ export class Apis extends BaseAPI {
/**
*
* @summary 全ての部屋一覧を取得
* @param {number} [limit] 何件取得するか
* @param {number} [offset] 何件目から取得するか
* @param {*} [options] Override http request option.
* @throws {RequiredError}
* @memberof DefaultApi
*/
public apiRoomsGet(options?: RawAxiosRequestConfig) {
return DefaultApiFp(this.configuration).apiRoomsGet(options).then((request) => request(this.axios, this.basePath));
public apiRoomsGet(limit?: number, offset?: number, options?: RawAxiosRequestConfig) {
return DefaultApiFp(this.configuration).apiRoomsGet(limit, offset, options).then((request) => request(this.axios, this.basePath));
}

/**
Expand Down
101 changes: 74 additions & 27 deletions src/pages/CreateRoom.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,34 +45,54 @@ const submit = async () => {
</script>

<template>
<h1 id="title">部屋を作る</h1>
<label>
部屋を全体公開する
<input v-model="isPublic" type="checkbox" />
</label>
<label>
<p>
部屋名
<input v-model="newRoomName" type="text" />
</p>
</label>
<label v-if="!isPublic">
<p>
合言葉
<input v-model="roomPassword" type="text" />
</p>
</label>
<div>
<h2>現在の設定</h2>
<p>部屋名: {{ newRoomName }}</p>
<p>
部屋を全体公開
<span v-if="isPublic">する</span>
<span v-else>しない</span>
</p>
<p v-if="!isPublic">合言葉: {{ roomPassword }}</p>
<div class="createRoomContents">
<h2 id="title">部屋を作る</h2>
<table class="widthMax">
<tr>
<label>
<th>部屋を全体公開する</th>
<td>
<input
v-model="isPublic"
type="checkbox"
class="createRoomInputCheckBox"
/>
</td>
</label>
</tr>
<tr class="widthMax">
<label class="widthMax">
<th>
<span class="createRoomInputLabel">部屋名</span>
</th>
<td class="Td">
<input
v-model="newRoomName"
type="text"
placeholder="roomname"
class="createRoomInputText"
/>
</td>
</label>
</tr>
<tr class="widthMax">
<label v-if="!isPublic" class="widthMax">
<th><span class="createRoomInputLabel">合言葉</span></th>
<td class="Td">
<input
v-model="roomPassword"
type="text"
placeholder="password"
class="createRoomInputText"
/>
</td>
</label>
</tr>
</table>
<div style="text-align: right">
<button class="createRoomButton" @click="submit()">作成</button>
</div>
</div>
<button @click="submit()">作成する</button>
<div class="err">
{{ errorMsg }}
</div>
Expand All @@ -85,4 +105,31 @@ const submit = async () => {
.err {
color: red;
}
.Td {
width: calc(100% - 70px);
display: inline-block;
}
.widthMax {
width: 100%;
display: inline-block;
}
.createRoomContents {
margin: 20px;
}
.createRoomInputCheckBox {
accent-color: #78996f;
}
.createRoomInputLabel {
margin-right: 90px;
}
.createRoomInputText {
width: 100%;
}
.createRoomButton {
font-weight: bold;
width: 100px;
height: 50px;
margin: 10px;
margin-right: 30px;
}
</style>
90 changes: 66 additions & 24 deletions src/pages/EnterRoom.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,29 +54,71 @@ onMounted(() => {
})
</script>
<template>
<h1>部屋に入る</h1>
<p>部屋ID: {{ thisRoomId }}</p>
<p>この部屋で使うニックネームを設定してください。</p>
<p>
<label>
ニックネーム
<input v-model="userNickName" />
</label>
</p>
<p v-if="isPrivate">
<label>
合言葉
<input v-model="roomPassword" />
</label>
</p>

<p>
<button @click="submit">参加</button>
</p>
<div v-if="userSettingError">
<p>ニックネームが使用不可能。もしくは間違った合言葉です。</p>
</div>
<div v-if="submitError">
<p>エラーが発生しました。操作をやり直してください。</p>
<div class="enterRoomContents">
<h2>部屋に入る</h2>
<p>部屋ID: {{ thisRoomId }}</p>
<p>この部屋で使うニックネームを設定してください。</p>
<table class="widthMax">
<label class="widthMax">
<tr class="widthMax">
<th>ニックネーム</th>
<td class="Td">
<input v-model="userNickName" class="enterRoomInputText" />
</td>
</tr>
</label>
<label v-if="isPrivate" class="widthMax">
<tr class="widthMax">
<th>合言葉</th>
<td class="Td">
<input v-model="roomPassword" class="enterRoomInputText" />
</td>
</tr>
</label>
</table>
<div style="text-align: right">
<button class="enterRoomButton" @click="submit()">作成</button>
</div>
<div v-if="userSettingError">
<p>ニックネームが使用不可能。もしくは間違った合言葉です。</p>
</div>
<div v-if="submitError">
<p>エラーが発生しました。操作をやり直してください。</p>
</div>
</div>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
.err {
color: red;
}
.Td {
width: calc(100% - 70px);
display: inline-block;
}
.widthMax {
width: 100%;
display: inline-block;
}
.enterRoomContents {
margin: 20px;
}
.enterRoomInputCheckBox {
accent-color: #78996f;
}
.enterRoomInputLabel {
margin-right: 90px;
}
.enterRoomInputText {
width: 100%;
}
.enterRoomButton {
font-weight: bold;
width: 100px;
height: 50px;
margin: 10px;
margin-right: 30px;
}
</style>
Loading

0 comments on commit 464100d

Please sign in to comment.