Skip to content

Commit

Permalink
feat: change the button and add new option of channels (#92)
Browse files Browse the repository at this point in the history 
* 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

* 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: repair the channels and todos

* feat: repair the mainpage1

* feat: change the button and add new option of channels

---------

Co-authored-by: My Go！ <118411001+Clear1oveE@users.noreply.github.com>
  • Loading branch information
@03130214 @Clear1oveE
03130214 and Clear1oveE committed May 29, 2024
1 parent c5af8cd commit b48db67
Show file tree
Hide file tree
Showing 2 changed files with 231 additions and 38 deletions.
47 changes: 26 additions & 21 deletions src/components/infoButton.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,17 +98,17 @@
on:click={() => check(record.id, record.tittle)}
on:keypress
>
<button class="chacha" on:click={() => deletenotice(record.id)}
>x</button
>
<div class="title">{record.tittle}</div>
<div class="content">#{record.tag}</div>
<div class="author">from:{record.username}</div>
</div>
<div>
<button class="edit-btn" on:click={() => editnotice(record.id)}
>修改</button
>
<button class="delete-btn" on:click={() => deletenotice(record.id)}
>删除</button
>
<div>
<button class="edit-btn" on:click={() => editnotice(record.id)}
>修改</button
>
</div>
</div>
{/each}
</div>
Expand Down Expand Up @@ -147,25 +147,30 @@
color: #666;
}
.edit-btn,
.delete-btn {
margin-left: 0.5rem;
padding: 0.3rem 0.6rem;
font-size: 0.8rem;
background-color: #4e4e4e; /* 按钮的背景颜色 */
.edit-btn {
background-color: #ffc107;
color: white;
border: none;
border-radius: 2px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.edit-btn:hover {
background-color: #5c5c5c; /* 修改按钮悬停时的背景颜色 */
background-color: #e0a800;
}
.delete-btn:hover {
.chacha {
background-color: white;
width: 20px;
color: #a3a1a1;
float: right;
text-align: center;
}
.edit-btn {
background-color: #ffc107;
color: white;
background-color: #a54444; /* 删除按钮悬停时的背景颜色 */
padding: 0.5rem 1rem; /* Adjusted for consistency */
font-size: 14px; /* Adjusted for consistency */
border-radius: 5px; /* Consistent with other elements */
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px; /* Added space above the button */
}
</style>
222 changes: 205 additions & 17 deletions src/routes/myChannels.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,14 @@
username,
originChannelID,
channelName,
currentchannelName,
} from "../store.js";
const pb = new PocketBase(PocketBase_URL);
let src = "userPicture.jpeg";
let channels = [];
let createdChannels = [];
let currentView = "joined"; // 'joined' 或 'created'
async function getChannels() {
const useremail = $currentUserEmail;
Expand All @@ -23,13 +26,100 @@
});
channels = response_;
}
async function getCreatedChannels() {
const useremail = $currentUserEmail;
const response = await pb.collection("channels").getFullList({
sort: "-created",
filter: `useremail="${useremail}"`,
});
createdChannels = response;
}
function editChannel(channelName) {
currentchannelName.set(channelName);
push("/updateChannel");
}
async function leftChannel(channelname) {
const currentUseremail = $currentUserEmail; // 确保这里正确获取当前用户邮箱
if (!confirm("确定要退出这个频道吗？")) {
return; // 用户取消操作，直接返回
}
try {
// 使用 useremail 和 channelname 作为过滤条件
const userChannels = await pb.collection("users_channels").getFullList({
filter: `useremail="${currentUseremail}" && channelname="${channelname}"`,
});
for (const userChannel of userChannels) {
await pb.collection("users_channels").delete(userChannel.id);
}
// 从本地列表中移除
channels = channels.filter(
(channel) => channel.channelname !== channelname,
);
// 重新获取频道列表，如果这是必要的
getChannels();
alert("成功退出频道。");
} catch (error) {
console.error("退出频道失败：", error);
alert("退出频道失败。");
}
}
async function deleteChannel(channelName) {
if (!confirm("确定要删除这个频道吗？")) {
return; // 用户取消操作，直接返回
}
try {
// 查找channels集合中的指定频道
const channels = await pb.collection("channels").getFullList({
filter: `channelName="${channelName}"`,
});
for (const channel of channels) {
// 删除找到的频道
await pb.collection("channels").delete(channel.id);
}
// 查找并删除users_channels集合中所有与该频道相关的条目
const userChannels = await pb.collection("users_channels").getFullList({
filter: `channelname="${channelName}"`,
});
for (const userChannel of userChannels) {
await pb.collection("users_channels").delete(userChannel.id);
}
// 使用.filter()方法移除条目后直接赋值
createdChannels = createdChannels.filter(
(channel) => channel.channelName !== channelName,
);
getCreatedChannels(); // 重新获取频道列表
getChannels();
alert("频道及相关数据删除成功。");
} catch (error) {
console.error("删除频道及相关数据失败：", error);
alert("删除频道及相关数据失败。");
}
}
function switchView(view) {
currentView = view;
if (view === "joined") {
getChannels();
} else {
getCreatedChannels();
}
}
function jumpnew(origin, name) {
channelName.set(name);
originChannelID.set(origin);
push("/chantemplate");
}
onMount(() => {
getChannels();
getCreatedChannels();
});
</script>

Expand All @@ -40,28 +130,73 @@
<p class="text-7xl text-black">{$username}</p>
</div>

<div class="controls fixed right-12 top-14 p-4">
<button class="toggle-btn" on:click={() => switchView("joined")}
>已加入的频道</button
>
<button class="toggle-btn" on:click={() => switchView("created")}
>我创建的频道</button
>
</div>

<div class="channel-container fixed right-0 top-0 w-3/5">
{#each channels as channel}
<div class="channel bg-transparent border-b border-gray-400 p-4">
<div
class="channel-name text-3xl mb-2"
on:click={() => jumpnew(channel.originid, channel.channelname)}
role="button"
tabindex="0"
on:keypress
>
{channel.channelname}
{#if currentView === "joined"}
{#each channels as channel}
<div class="channel bg-transparent border-b border-gray-400 p-4">
<div
class="channel-name text-3xl mb-2"
on:click={() => jumpnew(channel.originid, channel.channelname)}
role="button"
tabindex="0"
on:keypress
>
{channel.channelname}
</div>
<div class="channel-info flex justify-between items-center w-full">
<div class="channel-description text-sm">
{channel.channelDescription}
</div>
<button
class="exit-btn"
on:click={() => leftChannel(channel.channelname)}>退出</button
>
<div class="channel-date text-sm">
{channel.year}年{channel.month}月{channel.day}日加入
</div>
</div>
</div>
<div class="channel-info flex justify-between items-center w-full">
<div class="channel-description text-sm">
{channel.channelDescription}
{/each}
{:else}
{#each createdChannels as channel}
<div class="channel bg-transparent border-b border-gray-400 p-4">
<div
class="channel-name text-3xl mb-2"
on:click={() => jumpnew(channel.originid, channel.channelname)}
role="button"
tabindex="0"
on:keypress
>
{channel.channelName}
</div>
<div class="channel-date text-sm">
{channel.year}年{channel.month}月{channel.day}日加入
<div class="channel-info flex justify-between items-center w-full">
<div class="channel-description text-sm">
{channel.channelDescription}
</div>
<button
class="edit-btn"
on:click={() => editChannel(channel.channelName)}>修改</button
>
<button
class="delete-btn"
on:click={() => deleteChannel(channel.channelName)}>删除</button
>
<div class="channel-date text-sm">
{channel.year}年{channel.month}月{channel.day}日加入
</div>
</div>
</div>
</div>
{/each}
{/each}
{/if}
</div>
</body>

Expand Down Expand Up @@ -111,4 +246,57 @@
.channel {
height: 25%; /* 每个频道占容器高度的20% */
}
.toggle-btn {
margin-left: 20px; /* 如果您希望按钮之间有间距 */
color: black;
}
.channel-info {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 10%; /* 或您想要的任何百分比 */
}
.exit-btn,
.edit-btn,
.delete-btn {
/* 删除 margin-top 并添加必要的右边距 */
padding: 5px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s ease;
/* 如果需要按钮右对齐，删除margin-right并使用以下属性 */
margin-left: auto;
}
.exit-btn {
background-color: #dc3545;
color: white;
}
.exit-btn:hover {
background-color: #c82333;
}
.edit-btn {
background-color: #ffc107;
color: white;
}
.edit-btn:hover {
background-color: #e0a800;
}
.delete-btn {
background-color: #28a745;
color: white;
}
.delete-btn:hover {
background-color: #218838;
}
</style>

0 comments on commit b48db67

Please sign in to comment.