style: devide the searching part (#86)

* 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

* feat: lead Profile to the mainpage (#74)

* add a new page to search channels

* Updated createchannel

* feat: refine createchannel

* feat: refine createchannel

* feat: update searchChannel

* refactor: refactor createChannel

* feat: add useremail for a channel

* feat: can choose the channels your created

* refactor: Refactor the code

* feat: Added channel deletion and modification

* feat: lead Profile to the mainpage

* feat: lead Profile to the mainpage

---------

Co-authored-by: My Go！ <118411001+Clear1oveE@users.noreply.github.com>

* feat: perfect the searching part

* feat: perfect the searching part

* style: devide the search part

* style: devide the searching part

* style: devide the searching part

---------

Co-authored-by: sheeplin <1270610465@qq.com>
Co-authored-by: My Go！ <118411001+Clear1oveE@users.noreply.github.com>
Co-authored-by: 路小雨 <143722071+03130214@users.noreply.github.com>

src/components/Navbar.svelte

@@ -1,5 +1,6 @@
 <script>
   import { username } from "../store.js";
+  import Searchlan from "../components/searchlan.svelte";
   import TodolistButton from "./TodolistButton.svelte";
   import InfoButton from "./infoButton.svelte";
 
@@ -55,6 +56,8 @@
     <div class="flex-1">
       <a href="/#/infoPage" class="btn btn-ghost text-xl logo">lips</a>
     </div>
+
+    <Searchlan />
     <TodolistButton />
     <InfoButton />
     <div class="flex-none">

src/components/searchlan.svelte

@@ -0,0 +1,251 @@
+<script>
+  import { onMount, onDestroy } from "svelte";
+  import { originChannelID, currentnoticeid } from "../store.js";
+  import PocketBase from "pocketbase";
+  import { push } from "svelte-spa-router";
+  import { PocketBase_URL } from "../utils/api/index";
+
+  const pb = new PocketBase(PocketBase_URL);
+  let searchQuery = "";
+  // let isMainPage = true;
+  let errorMessage = "";
+  let searchchannels = [];
+  let searchnotices = [];
+  let searchtags = [];
+  let isFocused = false;
+
+  function jumpnew(id) {
+    originChannelID.set(id);
+    push("/chantemplate");
+  }
+  function jumpnewnotice(id) {
+    currentnoticeid.set(id);
+    push("/checknotice");
+  }
+  function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout);
+        func(...args);
+      };
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
+  }
+  function handleClickOutside(event) {
+    if (!event.target.closest(".search")) {
+      isFocused = false;
+    }
+  }
+  // function isid() {
+  //   if ($currentchannelid != null) isMainPage = false;
+  // }
+  // function search(){
+  //   alert(isMainPage);
+  // }
+  async function search() {
+    errorMessage = "";
+    try {
+      // 获取所有频道及通知记录
+      const allRecords = await pb.collection("channels").getFullList();
+      const allnotices = await pb.collection("notices").getFullList();
+      // 根据输入过滤并限制结果数量为最多4个
+      if (searchQuery.length > 0) {
+        const filteredRecords = allRecords.filter((record) =>
+          record.channelName.startsWith(searchQuery),
+        );
+        const limitedRecords = filteredRecords.slice(0, 4);
+        searchchannels = limitedRecords;
+
+        const filterednotices = allnotices.filter((record) =>
+          record.tittle.startsWith(searchQuery),
+        );
+        const limitednotices = filterednotices.slice(0, 4);
+        searchnotices = limitednotices;
+
+        const filteredtags = allnotices.filter((record) =>
+          record.tag.startsWith(searchQuery),
+        );
+        const limitedtags = filteredtags.slice(0, 4);
+        searchtags = limitedtags;
+        if (
+          limitedRecords.length === 0 &&
+          limitednotices.length === 0 &&
+          limitedtags.length === 0
+        ) {
+          errorMessage = "没有找到相关频道或通知。";
+        }
+      } else {
+        searchchannels = [];
+        searchnotices = [];
+      }
+    } catch (error) {
+      console.error("搜索频道时发生错误：", error);
+      errorMessage = "搜索频道时发生错误：" + error.message;
+    }
+  }
+
+  onMount(() => {
+    // isid();
+    document.addEventListener("click", handleClickOutside);
+  });
+  onDestroy(() => {
+    document.removeEventListener("click", handleClickOutside);
+  });
+  const debouncedSearchChannel = debounce(search, 500);
+</script>
+
+<div class="search">
+  <input
+    type="text"
+    bind:value={searchQuery}
+    on:input={debouncedSearchChannel}
+    placeholder="search everything..."
+    on:focus={() => (isFocused = true)}
+  />
+  <button on:click={() => search()}>search</button>
+  {#if errorMessage}
+    <div class="searchdrop">
+      <div
+        class="searchdrop-item"
+        role="button"
+        tabindex="0"
+        on:keypress
+        on:click={() => {
+          isFocused = false;
+        }}
+      >
+        <p>{errorMessage}</p>
+      </div>
+    </div>
+  {:else if isFocused && (searchchannels.length > 0 || searchnotices.length > 0 || searchtags.length > 0) && searchQuery !== ""}
+    <div class="searchdrop">
+      {#each searchchannels as channel}
+        <div
+          class="searchdrop-item"
+          role="button"
+          tabindex="0"
+          on:keypress
+          on:click={() => jumpnew(channel.id)}
+        >
+          <div class="channame">
+            <strong>{channel.channelName}</strong>
+            <p class="droptag">频道</p>
+          </div>
+          <p>{channel.channelDescription}</p>
+        </div>
+      {/each}
+      {#each searchnotices as notice}
+        <div
+          class="searchdrop-item"
+          role="button"
+          tabindex="0"
+          on:keypress
+          on:click={() => jumpnewnotice(notice.id)}
+        >
+          <div class="channame">
+            <strong>{notice.tittle}</strong>
+            <p class="droptag">通知</p>
+          </div>
+          <p>#{notice.tag} 作者:{notice.username}</p>
+        </div>
+      {/each}
+      {#each searchtags as notice}
+        <div
+          class="searchdrop-item"
+          role="button"
+          tabindex="0"
+          on:keypress
+          on:click={() => jumpnewnotice(notice.id)}
+        >
+          <div class="channame">
+            <strong>{notice.tittle}</strong>
+            <p class="droptag">通知</p>
+          </div>
+          <p>#{notice.tag} 作者:{notice.username}</p>
+        </div>
+      {/each}
+    </div>
+  {:else if isFocused && searchQuery !== ""}
+    <div class="searchdrop">
+      <div
+        class="searchdrop-item"
+        role="button"
+        tabindex="0"
+        on:keypress
+        on:click={() => {
+          isFocused = false;
+        }}
+      >
+        <p>无法显示相关频道或通知。</p>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .search {
+    margin-right: 20%;
+    position: relative;
+  }
+  input[type="text"] {
+    width: 400px;
+    padding: 8px;
+    font-size: 16px;
+    border: 2px solid #ddd;
+    border-radius: 16px;
+    outline: none;
+    transition: border-color 0.3s;
+  }
+  input[type="text"]:focus {
+    width: 400px;
+    border-color: #007bff;
+  }
+  button {
+    padding: 8px 15px;
+    font-size: 16px;
+    background-color: #c8c8c8;
+    color: white;
+    border: none;
+    border-radius: 16px;
+    cursor: pointer;
+    margin-left: 10px;
+    outline: none;
+  }
+  button:hover {
+    background-color: #0056b3;
+  }
+  .channame {
+    display: flex; /* 启用Flexbox布局 */
+    align-items: center; /* 垂直居中 */
+    gap: 10px; /* 在项目之间添加一些间隔 */
+  }
+  .droptag {
+    color: #fff;
+    background-color: #7d7d7d;
+    width: 10%;
+    text-align: center;
+    font-size: small;
+  }
+  .searchdrop {
+    position: absolute;
+    top: 100%;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    width: 400px; /* 根据输入框宽度调整 */
+    max-height: 200px;
+    overflow-y: auto;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    margin-top: 2px;
+  }
+  .searchdrop-item {
+    padding: 10px;
+    cursor: pointer;
+    text-align: left;
+  }
+  .searchdrop-item:hover {
+    background-color: #f5f5f5;
+  }
+</style>

src/routes/chantemplate.svelte

@@ -11,6 +11,7 @@
   } from "../store.js";
   import { push } from "svelte-spa-router";
   import { onMount } from "svelte";
+  import Navbar from "../components/Navbar.svelte";
 
   const pb = new PocketBase(PocketBase_URL);
   let records = [];
@@ -65,6 +66,8 @@
   }
 </script>
 
+<Navbar />
+
 <button on:click={send}>发送通知</button>
 
 <div class="container">

src/routes/login.svelte

@@ -18,8 +18,8 @@
         currentUserEmail.set(usereamil);
         const userEmail = $currentUserEmail;
         console.log("当前用户的电子邮件:", userEmail);
-        //push("/main");
-        push("/infoPage");
+        push("/main");
+        // push("/infoPage");
       }
     } catch (error) {
       alert("用戶名或密碼錯誤");

src/routes/mainpage.svelte

@@ -24,8 +24,12 @@
   let showModal2 = false;
   let showModal3 = false;
   let showModal4 = false;
+  let showtodo = true;
   let selectedChannel = null;
 
+  function ismain() {
+    currentchannelid.set(null);
+  }
   function editChannel(channelName) {
     currentchannelName.set(channelName);
     push("/updateChannel");
@@ -41,6 +45,7 @@
   }
   async function deletetodo(todoid) {
     if (!confirm("确定要从待办事项中删除这则通知吗？")) {
+      showtodo = false;
       return;
     }
     try {
@@ -213,34 +218,38 @@
   }
 
   async function jumptodo(title) {
-    const response_ = await pb.collection("notices").getFullList({
-      sort: "-created",
-      filter: `tittle="${title}"`,
-    });
+    if (showtodo == true) {
+      const response_ = await pb.collection("notices").getFullList({
+        sort: "-created",
+        filter: `tittle="${title}"`,
+      });
 
-    currentnoticeid.set(response_[0].id);
-    const uEmail = $currentUserEmail;
-    const response = await pb.collection("todolist").getFullList({
-      sort: "-created",
-      filter: `useremail="${uEmail}"`,
-    });
+      currentnoticeid.set(response_[0].id);
+      const uEmail = $currentUserEmail;
+      const response = await pb.collection("todolist").getFullList({
+        sort: "-created",
+        filter: `useremail="${uEmail}"`,
+      });
 
-    for (const item of response) {
-      if (item.tittle == title) {
-        isJoinedTodo.set("find");
-        break;
-      } else {
-        isJoinedTodo.set("noFind");
+      for (const item of response) {
+        if (item.tittle == title) {
+          isJoinedTodo.set("find");
+          break;
+        } else {
+          isJoinedTodo.set("noFind");
+        }
       }
+      push("/checknotice");
     }
-    push("/checknotice");
+    showtodo = true;
   }
   onMount(() => {
     checkUser();
     checkchan();
     checkNotice();
     fetchCreatedChannels();
     checkTodolist();
+    ismain();
   });
 
   let src = "userPicture.jpeg";

src/routes/mainpage1.svelte

@@ -109,7 +109,6 @@
         {/each}
       </div>
     </div>
-
     <!-- 待办事项列表，显示最多2个 -->
     <!-- 待办事项列表，显示最多2个 -->
     <div class="todos h-2/5 p-2 mt-4">

src/routes/searchChannel.svelte

@@ -111,18 +111,6 @@
 
   function updateOriginChannelId(id) {
     originChannelID.set(id);
-    // try {
-    //   const response_ = await pb.collection("channels").getFullList({
-    //     sort: "-created",
-    //     filter: `channelName="${cN}"`,
-    //   });
-    //   // originChannelID.set(response_[0].id);
-    //   // originChannelID.set(response_[0].id);
-    //   const value =response_[0].id;
-    //    window.location.href = `./chantemplate?value=${encodeURIComponent(value)}`;
-    // } catch {
-    //   alert("error");
-    // }
   }
   //导航到指定频道详情页的函数
   function navigateToChannelDetail(channelName) {