Room list

package.json

@@ -31,5 +31,6 @@
     "vite": "^5.2.0",
     "vue-eslint-parser": "^9.4.3",
     "vue-tsc": "^2.0.6"
-  }
+  },
+  "packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }

src/pages/RoomList.vue

@@ -1,49 +1,76 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
+import api,{GetRoomsInner,EnterRoom,EnterRoomSuccess} from '@/lib/apis'
+import { useStoreUser } from '@/stores/user';
 
-defineProps<{ msg: string }>()
+const User = useStoreUser();
+const rooms =ref<GetRoomsInner[]>([])
+const selectedRoomName = ref("")
+const selectedRoomId = ref("")
+const isSelectedRoomPublic = ref(true)
+const userName = ref("")
+const password = ref("")
+const isRoomSelected=ref(false)
 
-const count = ref(0)
+onMounted(async () => {
+  const res = await api.apiRoomsGet()
+    rooms.value = res.data
+})
+function BackSelectPage(){
+  selectedRoomName.value = ""
+  selectedRoomId.value = ""
+  isSelectedRoomPublic.value = true
+  isRoomSelected.value = false
+}
+function GoAskPage(roomName: string,roomId: string, isPublic: boolean){
+  selectedRoomName.value = roomName
+  selectedRoomId.value = roomId
+  isSelectedRoomPublic.value = isPublic
+  isRoomSelected.value = true
+}
+const user = ref<EnterRoomSuccess>({userId: "",userName: "" })
+async function EnterSelectedRoom(roomId: string){
+  const data = ref<EnterRoom>({userName:userName.value,password: password.value})
+
+  const res = await api.apiRoomRoomIdEnterPost(roomId,data.value)
+  user.value = res.data
+  User.$patch({
+    userName: res.data.userName,
+    userId: res.data.userId,
+  });
+}
 </script>
 
 <template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button
-      type="button"
-      @click="count++"
-    >
-      count is {{ count }}
-    </button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
+  <div v-if="!isRoomSelected">
+    <div v-for="room in rooms" :key="room.roomId">
+      <div v-if="room.roomName && room.roomId && typeof(room.isPublic) =='boolean'" class="roomListForms">
+        <button @click="GoAskPage(room.roomName,room.roomId,room.isPublic)"><div v-if="!room.isPublic">プライベートルーム</div><div v-if="room.isPublic">フリールーム</div>{{ room.roomName }}, {{ room.userCount }}人参加中</button>
+      </div>
+    </div>
+  </div>
+  <div v-if="isRoomSelected">
+    <h2>{{ selectedRoomName }}に入る</h2>
+    <label class="roomListForms">
+      handle name
+      <input v-model="userName" />
+    </label>
+    <br>
+    <label v-if="!isSelectedRoomPublic" class="roomListForms">
+      password
+      <input v-model="password" />
+    </label>
+    <br>
+    <button @click="EnterSelectedRoom(selectedRoomId)" class="roomListForms">ルームに入る</button>
+    <button @click="BackSelectPage" class="roomListForms">戻る</button>
   </div>
-
-  <p>
-    Check out
-    <a
-      href="https://vuejs.org/guide/quick-start.html#local"
-      target="_blank"
-    >create-vue</a>, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a
-      href="https://github.com/vuejs/language-tools"
-      target="_blank"
-    >Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">
-    Click on the Vite and Vue logos to learn more
-  </p>
 </template>
 
 <style scoped>
 .read-the-docs {
   color: #888;
 }
+.roomListForms{
+  margin:10px
+}
 </style>

src/stores/user.js

@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia';
+
+export const useStoreUser = defineStore('user', {
+  state: () => ({
+    userName: "",
+    userId: "",
+  }),
+  action: {
+    setUserParameter(name,id){
+        this.userName = name;
+        this.userId = id;
+    },
+  },
+});