feat: update the mainpage

frog-software · Mar 10, 2024 · 1be3450 · 1be3450
1 parent b65e397
commit 1be3450
Show file tree

Hide file tree

Showing 3 changed files with 189 additions and 12 deletions.
diff --git a/src/routes/Modal.svelte b/src/routes/Modal.svelte
@@ -41,7 +41,7 @@
 
   .modal-content {
     background: rgb(199, 195, 195);
-    padding: 20px;
+    padding: 30px;
     border-radius: 8px;
     position: relative;
   }

diff --git a/src/routes/mainpage.svelte b/src/routes/mainpage.svelte
@@ -3,10 +3,68 @@
   import PocketBase from "pocketbase";
   import { PocketBase_URL } from "../utils/api/index";
   import { onMount } from "svelte";
-  import { currentUserEmail } from "../store.js";
+  import Modal from "./Modal.svelte";
+  import { currentUserEmail, currentchannelid ,currentnoticeid } from "../store.js";
 
   const pb = new PocketBase(PocketBase_URL);
   let username = "";
+  let records = [];
+  let showModal = false;
+  let showModal2 = false;
+  let showModal3 = false;
+  let showModal4 = false;
+
+  async function checkchan() {
+    try {
+      const userEmail = $currentUserEmail;
+      const response = await pb.collection("users_channels").getFullList({
+        sort: "-created",
+        filter: `useremail="${userEmail}"`,
+      });
+      records = response;
+    } catch (error) {
+      alert("fail to find");
+    }
+  }
+
+  let recordsNotice = [];
+  async function checkNotice() {
+    try {
+      const userEmail = $currentUserEmail;
+      const response = await pb.collection("notices").getFullList({
+        sort: "-created",
+        filter: `useremail="${userEmail}"`,
+      });
+      recordsNotice = response;
+    } catch (error) {
+      alert("fail to find");
+    }
+  }
+  
+  function check(id) {
+    currentnoticeid.set(id);
+    push("/checknotice");
+  }
+
+  function toggleModal() {
+    showModal = !showModal;
+  }
+  function toggleModal2(){
+    showModal2 = !showModal2;
+  }
+  function toggleModal3(){
+    showModal3 = !showModal3;
+  }
+  function toggleModal4(){
+    showModal4 = !showModal4;
+  }
+
+
+  function jumpnew(id) {
+    currentchannelid.set(id);
+    push("/chantemplate");
+  }
+
   async function checkUser() {
     try {
       const userEmail = $currentUserEmail;
@@ -21,6 +79,8 @@
   }
   onMount(() => {
     checkUser();
+    checkchan();
+    checkNotice();
   });
 
   let src = "userPicture.jpeg";
@@ -37,20 +97,78 @@
     <p class="username">{username}</p>
     <button on:click={() => JumpNewPage("login")}> 登出 </button>
   </div>
+
   <div class="right-side">
-    <button class="button-present" on:click={() => JumpNewPage("mychannel")}>
+    <button class="button-present" on:click={toggleModal}>频道管理</button>
+    <Modal isOpen={showModal} close={toggleModal}>
+      <h2 style="color: black;">频道管理</h2>
+      <div class="container">
+        <!-- {#each records as record}
+          <button class="button01" on:click={() => jumpnew(record.id)}
+            >#{record.channelname}</button
+          >
+        {/each} -->
+        <button class="button01" on:click={() => JumpNewPage("createChannel")}>
+          创建频道
+        </button>
+        <button class="button01" on:click={() => JumpNewPage("searchChannel")}>
+          查找频道
+        </button>
+        <button class="button01" on:click={toggleModal2}>我的频道</button>
+        <Modal isOpen={showModal2} close={toggleModal2}>
+          <div>
+            <h2 style="color: black;">频道管理</h2>
+      <div class="container">
+        {#each records as record}
+          <button class="button01" on:click={() => jumpnew(record.id)}
+            >#{record.channelname}</button
+          >
+        {/each}
+      </div>
+          </div>
+        </Modal>
+      </div>
+    </Modal>
+    <!-- <button class="button-present" on:click={() => JumpNewPage("mychannel")}>
       频道</button
-    >
+    > -->
+
+    <!-- <button class="button-present" on:click={() => JumpNewPage("mynotice")}>
+      通知管理
+    </button> -->
+    <button class="button-present" on:click={toggleModal3}>通知管理</button>
+    <Modal isOpen={showModal3} close={toggleModal3}>
+      <h2 style="color: black;">通知管理</h2>
+      <div class="container">
+        {#each recordsNotice as record}
+      <div
+        class="record"
+        role="button"
+        tabindex="0"
+        on:click={() => check(record.id)}
+        on:keypress
+      >
+        <div class="title">{record.tittle}</div>
+        <div class="content">#{record.tag}</div>
+        <div class="author">from:{record.username}</div>
+      </div>
+    {/each}
+      </div>
+    </Modal>
 
-    <button class="button-present" on:click={() => JumpNewPage("mynotice")}>
-      通知
-    </button>
-    <button
+    <button class="button-present" on:click={toggleModal4}>待办事项</button>
+    <Modal isOpen={showModal4} close={toggleModal4}>
+      <h2 style="color: black;">待办事项</h2>
+      <div class="container">
+
+      </div>
+    </Modal>
+    <!-- <button
       class="button-present"
       on:click={() => JumpNewPage("checkInformation")}
     >
       待办事项
-    </button>
+    </button> -->
   </div></body
 >
 
@@ -71,7 +189,18 @@
     /* background-color: #f0f0f0; */
     /* 添加更多样式 */
   }
-
+  .button01 {
+    width: 200px;
+    margin-top: 10px;
+    padding: 15px;
+    background-color: black;
+    border-radius: 4px;
+  }
+  .button01:hover {
+    color: #ffffff;
+    opacity: 1;
+    background-color: #6a6d6e;
+  }
   .right-side {
     width: 60%;
     height: 100vh;
@@ -106,4 +235,36 @@
     border-radius: 50%; /* 这将使图像的边角变圆，形成圆形 */
     object-fit: cover; /* 确保图像在调整大小时保持其宽高比 */
   }
+  .container {
+    width: 300px;
+    height: 220px; /* 设置列表的最大高度 */
+    overflow-y: auto; /* 超出部分显示滚动条 */
+    background: #f9f9f9; /* 背景色，可根据需要调整 */
+    border-radius: 5px; /* 边框圆角 */
+    padding: 10px; /* 内边距 */
+  }
+  .record {
+    margin-bottom: 20px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #ffffff;
+  }
+
+  .title {
+    color: black;
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  .content {
+    color: black;
+    font-size: 16px;
+  }
+
+  .author {
+    font-size: 14px;
+    color: #666;
+  }
 </style>
diff --git a/src/routes/sendNotification.svelte b/src/routes/sendNotification.svelte
@@ -3,10 +3,11 @@
   import { push } from "svelte-spa-router";
   import { PocketBase_URL } from "../utils/api/index";
   import { currentUserEmail, currentchannelid } from "../store.js";
-
+  import { onMount } from "svelte";
   let tittle = "";
   let body = "";
   let tag = "";
+  let name = "";
   let currentYear = new Date().getFullYear();
   let currentMonth = new Date().getMonth() + 1; //从0开始
   let currentDate = new Date().getDate();
@@ -15,7 +16,18 @@
   function cancel() {
     push("/main");
   }
-
+  async function getname() {
+    try {
+      const currentemail = $currentUserEmail;
+      const response = await pb.collection("users").getFullList({
+        sort: "-created",
+        filter: `email="${currentemail}"`,
+      });
+      name = response[0].username;
+    } catch (error) {
+      alert("fail to find");
+    }
+  }
   async function post() {
     //异步函数的定义
     const userEmail = $currentUserEmail;
@@ -29,6 +41,7 @@
       day: currentDate,
       useremail: userEmail,
       channelid: channelid,
+      username: name,
     };
     try {
       await pb.collection("notices").create(data);
@@ -47,6 +60,9 @@
   function getDaysInMonth(year, month) {
     return new Date(year, month, 0).getDate();
   }
+  onMount(() => {
+    getname();
+  });
 </script>
 
 <h1>发布你的第一条通知吧！</h1>