feat: update the format and changeChannel (#63)

* feat: add notices to a new collection the new collection named todolist, and there are small changes about how the pages look like. * feat: add notices to a new collection * style: update npm and run format * style: run npm format again * style: channel and notice style * feat: useremail is added automatically * ci: format-check * css: pass the lint * style: recover the background color * feat : update the saveChange * feat: update the title of login and doorpage * feat: update the format of saveChanges * feat: update the checknotice * feat: uodate checknotice format --------- Co-authored-by: 独后藤 <[email protected]> Co-authored-by: sheeplin <[email protected]> Co-authored-by: 後藤ひとり <[email protected]>
frog-software · Mar 13, 2024 · e3f51f6 · e3f51f6
1 parent 578af9b
commit e3f51f6
Show file tree

Hide file tree

Showing 9 changed files with 212 additions and 45 deletions.
diff --git a/src/router.js b/src/router.js
@@ -11,6 +11,7 @@ import SelectTags from "./routes/selectTags.svelte";
 import Mynotice from "./routes/mynotice.svelte";
 import Chantemplate from "./routes/chantemplate.svelte";
 import Checknotice from "./routes/checknotice.svelte";
+import UpdateChannel from "./routes/updateChannel.svelte";
 export default {
   "/": DoorPage,
   "/login": Login,
@@ -25,4 +26,5 @@ export default {
   "/mynotice": Mynotice,
   "/chantemplate": Chantemplate,
   "/checknotice": Checknotice,
+  "/updateChannel": UpdateChannel,
 };
diff --git a/src/routes/EditChannelModal.svelte b/src/routes/EditChannelModal.svelte
@@ -61,3 +61,39 @@
     <button type="submit">Save Changes</button>
   </form>
 </Modal>
+
+<style>
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px; /* 输入框和按钮之间的间隔 */
+    width: 80%; /* 或者指定一个宽度，如300px */
+    height: 80%;
+    max-width: 600px; /* 最大宽度，确保在大屏幕上也不会太宽 */
+    padding: 5px; /* 表单内边距 */
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
+    border-radius: 8px; /* 轻微的圆角效果 */
+  }
+
+  input,
+  textarea {
+    padding: 10px; /* 输入区域的内边距 */
+    border: 1px solid #ccc; /* 边框颜色 */
+    border-radius: 4px; /* 输入区域的圆角 */
+    font-size: 16px; /* 文本大小 */
+  }
+
+  button[type="submit"] {
+    padding: 10px 20px;
+    background-color: #007bff; /* 按钮背景颜色 */
+    color: white; /* 按钮文字颜色 */
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+  }
+
+  button[type="submit"]:hover {
+    background-color: #0056b3; /* 鼠标悬停时的按钮背景颜色 */
+  }
+</style>
diff --git a/src/routes/Modal.svelte b/src/routes/Modal.svelte
@@ -44,5 +44,7 @@
     padding: 30px;
     border-radius: 8px;
     position: relative;
+    /* width: 100%;
+    height: 100%; */
   }
 </style>
diff --git a/src/routes/checknotice.svelte b/src/routes/checknotice.svelte
@@ -45,7 +45,6 @@
   });
 </script>
 
-
 {#each records as record}
   <div class="record">
     <div class="tittle">{record.tittle}</div>
@@ -54,49 +53,16 @@
     </div>
     <div>{record.body}</div>
     <button class="but" on:click={() => copy(record)}>+ todolist</button>
-
   </div>
-</body>
+{/each}
 
 <style>
-  .bodydiv {
-    height: 100vh; /* 设置高度为视口的100% */
-    width: 100vw; /* 设置宽度为视口的100% */
-    margin: 0; /* 移除默认的外边距 */
-    padding: 0; /* 移除默认的内边距 */
-  }
-  .meta .date,
-  .meta .tag {
-    display: inline; /* 保持日期和标签在同一行 */
-  }
-
-  .meta .from {
-    display: block; /* 新的一行显示from信息 */
-  }
-
-  /* .noticeBody{
-    color: black;
-    font-size: 200px;
-  } */
-
-  .noticeSize {
-    width: 80%; /* 宽度占屏幕宽度的80% */
-    margin: 0 auto; /* 水平居中显示 */
-    padding: 20px; /* 增加内边距，让边界和文本之间有足够的空间 */
-    font-family: Arial, sans-serif; /* 使用易读的字体 */
-    background-color: #f9f9f9; /* 轻微的背景色，减轻眼睛疲劳 */
-    border-radius: 10px; /* 圆角边框，视觉上更柔和 */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果，增加立体感 */
-    margin-top: 20px; /* 距离页面顶部的距离 */
-  }
-
   .record {
     width: auto;
     border: 1px solid #ccc;
     padding: 15px;
     margin: 10px 0;
     background-color: #f9f9f9;
-
   }
 
   .tittle {
@@ -112,13 +78,8 @@
     margin-bottom: 10px; /* 与正文内容分隔 */
   }
 
-  .noticeBody {
-    font-size: 20px; /* 正文适中的字体大小 */
-    line-height: 1.6; /* 增加行高，提高阅读舒适度 */
-    color: #444; /* 正文颜色，深于元数据，浅于标题 */
-  }
-
   .but {
     color: black; /* 设置字体颜色为黑色 */
+    border: 2px solid black; /* 2px宽度的实线边框，颜色为黑色 */
   }
 </style>
diff --git a/src/routes/login.svelte b/src/routes/login.svelte
@@ -51,3 +51,9 @@
   </form>
   <button on:click={handleRegister}> 注册 </button>
 {/if}
+
+<style>
+  h1 {
+    text-align: center;
+  }
+</style>
diff --git a/src/routes/mainpage.svelte b/src/routes/mainpage.svelte
@@ -9,6 +9,7 @@
     currentUserEmail,
     currentchannelid,
     currentnoticeid,
+    currentchannelName,
   } from "../store.js";
 
   const pb = new PocketBase(PocketBase_URL);
@@ -23,10 +24,12 @@
   let selectedChannel = null;
 
   function editChannel(channelName) {
-    const channel = createdChannels.find((c) => c.channelName === channelName);
-    if (channel) {
-      selectedChannel = channel;
-    }
+    currentchannelName.set(channelName);
+    push("/updateChannel");
+    // const channel = createdChannels.find((c) => c.channelName === channelName);
+    // if (channel) {
+    //   selectedChannel = channel;
+    // }
   }
 
   function handleUpdate() {

diff --git a/src/routes/updateChannel.svelte b/src/routes/updateChannel.svelte
@@ -0,0 +1,155 @@
+<script>
+  import { push } from "svelte-spa-router";
+  import PocketBase from "pocketbase";
+  import { PocketBase_URL } from "../utils/api/index";
+  import { currentchannelName } from "../store.js";
+  import { onMount } from "svelte";
+  const pb = new PocketBase(PocketBase_URL);
+  let isLoading = false;
+  let records = "";
+  let description = "";
+  let channelId = "";
+
+  async function checkchan() {
+    try {
+      const channel = $currentchannelName;
+
+      const response = await pb.collection("channels").getFullList({
+        sort: "-created",
+        filter: `channelName="${channel}"`,
+      });
+      records = response[0].channelName;
+      description = response[0].channelDescription;
+      channelId = response[0].id;
+    } catch (error) {
+      alert("fail to fixnd");
+    }
+  }
+  onMount(() => {
+    checkchan();
+  });
+
+  async function SaveChanges() {
+    isLoading = true;
+    if (channelId) {
+      // 如果channelId存在，则更新频道
+      const data = {
+        channelName: records,
+        channelDescription: description,
+      };
+
+      try {
+        await pb.collection("channels").update(channelId, data);
+        alert("Channel updated successfully");
+        isLoading = false;
+        push("/main");
+      } catch (error) {
+        alert("ERROR: " + error.message);
+        isLoading = false;
+      }
+    } else {
+      // 如果channelId不存在，可以选择创建新频道或者显示错误消息
+      alert("Channel does not exist.");
+      isLoading = false;
+    }
+  }
+</script>
+
+<h1>Update Your Channel</h1>
+<!-- <h1>{records.channelName }</h1> -->
+<!-- {#each records as record}{record.channelName}{/each} -->
+<form on:submit|preventDefault={SaveChanges} class="channel-form">
+  <div class="form-group">
+    <input
+      type="text"
+      bind:value={records}
+      placeholder="Channel Name"
+      class="form1-control"
+    />
+  </div>
+  <div class="form1-group">
+    <textarea
+      bind:value={description}
+      placeholder="Channel Description"
+      class="form-control"
+    ></textarea>
+  </div>
+  {#if isLoading}
+    <p>Loading...</p>
+  {:else}
+    <button type="submit" class="btn-submit">Save Changes</button>
+  {/if}
+</form>
+
+<style>
+  h1 {
+    text-align: center;
+  }
+  .channel-form {
+    width: 100vw;
+    height: 100vh;
+    margin: auto;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .form-group {
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    margin-bottom: 15px;
+    height: 10%;
+    width: 100%;
+  }
+  .form1-group {
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    position: relative; /* 确保父容器有相对定位 */
+    margin-bottom: 15px;
+    height: 60%;
+    width: 100%;
+  }
+  .form1-control {
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    /* max-width: 500px;
+    max-height: 200px; */
+    width: 70%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+  .form-control {
+    /* max-width: 500px;
+      max-height: 500px;
+      min-width: 500px;
+      min-height: 300px; */
+    width: 80%;
+    height: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-sizing: border-box;
+    position: absolute;
+    top: 0; /* 置顶显示 */
+  }
+
+  .btn-submit {
+    margin: auto;
+    width: 50%;
+    padding: 10px;
+    border: none;
+    background-color: #007bff;
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+
+  .btn-submit:hover {
+    background-color: #0056b3;
+  }
+</style>
diff --git a/src/store.js b/src/store.js
@@ -6,3 +6,4 @@ export const currentchannelid = writable("");
 //共享当前的频道id
 export const currentnoticeid = writable("");
 //共享当前的通知id
+export const currentchannelName = writable("");
diff --git a/src/styles/doorpage.css b/src/styles/doorpage.css
@@ -47,6 +47,7 @@ h1 {
   text-align: left; /* 居中对齐 */
   margin-bottom: 50px; /* 下方空间 */
   margin-top: 300px;
+  font-size: 4vw; /* 字体大小为视口宽度的2% */
 }
 
 .highlighted {