Added libs
This commit is contained in:
Lucas
221
p2post/vue/components/CreatePost.vue
Normal file
221
p2post/vue/components/CreatePost.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<script setup>
|
||||
import Card from '@/components/cards/Card.vue';
|
||||
import { p2postApi } from '../api/p2postApi'
|
||||
import { ref } from 'vue';
|
||||
import InputComboBox from '@/components/inputs/InputComboBox.vue';
|
||||
import Label from '@/components/labels/Label.vue';
|
||||
import InputText from '@/components/inputs/InputText.vue';
|
||||
import Button from '@/components/buttons/Button.vue';
|
||||
import { ArrowUpTrayIcon, ChatBubbleBottomCenterTextIcon, RocketLaunchIcon, XMarkIcon } from '@heroicons/vue/24/solid';
|
||||
|
||||
const newPostUser = ref(null);
|
||||
const newPostContent = ref("");
|
||||
const newPostFiles = ref([]);
|
||||
const newPostFilesPreview = ref([]);
|
||||
const newPostNetworks = ref([]);
|
||||
|
||||
const onFileSelected = (e) => {
|
||||
const newFiles = Array.from(e.target.files);
|
||||
|
||||
newFiles.forEach(file => {
|
||||
const exists = newPostFiles.value.some(
|
||||
f => f.name === file.name && f.size === file.size
|
||||
);
|
||||
if (!exists) {
|
||||
newPostFiles.value.push(file);
|
||||
newPostFilesPreview.value.push({
|
||||
file,
|
||||
url: URL.createObjectURL(file),
|
||||
type: file.type
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
e.target.value = null;
|
||||
};
|
||||
|
||||
function removePreview(index) {
|
||||
const [removed] = newPostFilesPreview.value.splice(index, 1);
|
||||
URL.revokeObjectURL(removed.url);
|
||||
newPostFiles.value.splice(index, 1);
|
||||
}
|
||||
|
||||
async function createPost(){
|
||||
// TODO Select users
|
||||
const user = "A4DZSk+TlR+4w39MbiIAQbti+N0H1QlJEhRH2DI6Iubj"
|
||||
const content = newPostContent.value
|
||||
var medias = []
|
||||
for (var file of newPostFilesPreview.value){
|
||||
const response = await p2postApi.uploadFile(file.file)
|
||||
console.log(response)
|
||||
medias.push({type: "local",
|
||||
"file_path": response.path})
|
||||
}
|
||||
// TODO Select networks
|
||||
const networks = ["net"]
|
||||
|
||||
const response = await p2postApi.createPosts(user, content, medias, networks)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="bg-black border-yellow-400/20 p-6">
|
||||
<h2 class="text-xl font-bold text-yellow-400 mb-6 flex items-center">
|
||||
<ChatBubbleBottomCenterTextIcon class="mr-2 h-5 w-5" />
|
||||
Create New Post
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label class="text-gray-300 mb-2 block">Select User</Label>
|
||||
<InputComboBox/>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-black border border-yellow-400/20 rounded-lg p-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
<!-- <img src={user.photo || "/placeholder.svg"} alt="" class="w-10 h-10 rounded-full" /> -->
|
||||
<div>
|
||||
<p class="text-white font-semibold">{user.nickname}</p>
|
||||
<p class="text-xs text-gray-400 font-mono">{user.publicKey}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label class="text-gray-300 mb-2 block">Post Content</Label>
|
||||
<InputText
|
||||
value={postContent}
|
||||
placeholder="Share your thoughts with the decentralized world..."
|
||||
class="bg-black border-yellow-400/30 text-white min-h-24"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<Button
|
||||
@click=""
|
||||
variant="outline"
|
||||
class="border-yellow-400 text-yellow-400 hover:bg-yellow-400 hover:text-black bg-transparent"
|
||||
>
|
||||
<ArrowUpTrayIcon class="mr-2 h-4 w-4" />
|
||||
Add Files
|
||||
</Button>
|
||||
|
||||
<div class="flex-1 bg-black border border-yellow-400/20 rounded-lg p-3">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div key={file} class="flex items-center space-x-2 bg-gray-800 rounded px-2 py-1">
|
||||
<File size={14} class="text-yellow-400" />
|
||||
<span class="text-white text-sm">{file}</span>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
class="text-red-400 hover:bg-red-400/20 p-0 h-auto"
|
||||
>
|
||||
<XMarkIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label class="text-gray-300 mb-2 block">Select Networks</Label>
|
||||
<!-- <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
|
||||
<div key={network.id} class="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id={network.id}
|
||||
checked={selectedNetworks.includes(network.name)}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked) {
|
||||
setSelectedNetworks((prev) => [...prev, network.name])
|
||||
} else {
|
||||
setSelectedNetworks((prev) => prev.filter((n) => n !== network.name))
|
||||
}
|
||||
class="border-yellow-400 data-[state=checked]:bg-yellow-400 data-[state=checked]:border-yellow-400"
|
||||
/>
|
||||
<Label htmlFor={network.id} class="text-white text-sm">
|
||||
{network.name}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<Button
|
||||
@click=""
|
||||
class="bg-yellow-400 text-black hover:bg-yellow-300 font-bold"
|
||||
>
|
||||
<RocketLaunchIcon class="h-4 w-4 mr-2" />
|
||||
Post to Networks
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- <div class="bg-gray-800 rounded-xl shadow p-4 mb-6 text-white">
|
||||
<textarea
|
||||
v-model="newPostContent"
|
||||
placeholder="Share something with the network..."
|
||||
class="w-full p-2 bg-gray-700 border border-gray-600 rounded mb-2"
|
||||
rows="3"
|
||||
></textarea>
|
||||
|
||||
|
||||
<div
|
||||
v-for="(preview, index) in newPostFilesPreview"
|
||||
:key="preview.url"
|
||||
class="bg-gray-700 p-2 rounded relative flex items-center justify-center h-40"
|
||||
>
|
||||
|
||||
<button
|
||||
@click="removePreview(index)"
|
||||
class="absolute top-1 right-1 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-700"
|
||||
title="Remover"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
|
||||
|
||||
<img
|
||||
v-if="preview.type.startsWith('image/')"
|
||||
:src="preview.url"
|
||||
class="object-contain max-h-full max-w-full"
|
||||
alt="Preview"
|
||||
/>
|
||||
|
||||
|
||||
<audio
|
||||
v-else-if="preview.type.startsWith('audio/')"
|
||||
:src="preview.url"
|
||||
controls
|
||||
class="w-full"
|
||||
></audio>
|
||||
|
||||
|
||||
<video
|
||||
v-else-if="preview.type.startsWith('video/')"
|
||||
:src="preview.url"
|
||||
controls
|
||||
class="object-contain max-h-full max-w-full"
|
||||
></video>
|
||||
|
||||
|
||||
<div v-else class="text-sm text-center px-2 break-all">
|
||||
{{ preview.file.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<input type="file" multiple @change="onFileSelected" class="text-sm text-white" />
|
||||
<button
|
||||
@click="createPost"
|
||||
class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
</div> -->
|
||||
</template>
|
||||
Reference in New Issue
Block a user