marcorealacci/WASAPhoto
1
0
Fork 0
mirror of https://github.com/notherealmarco/WASAPhoto.git synced 2025-05-06 12:49:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refine user profile and navbar

Browse source
This commit is contained in:
Marco Realacci 2022-12-10 01:02:48 +01:00
parent a2d7eb8d13
commit 740aaef0ea
39 changed files with 2084 additions and 1999 deletions
Download patch file Download diff file Expand all files Collapse all files

51
webui/src/App.vue
View file

@ -2,66 +2,83 @@
import { RouterLink, RouterView } from 'vue-router'
</script>
<script>
export default {}
export default {
data() {
return {
my_id: sessionStorage.getItem("token"),
}
},
}
</script>
<template>
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<!--<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#/">WASAPhoto</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</header>
</header>-->
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<!--<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3 sidebar-sticky">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
<span>General</span>
<span>WASAPhoto</span>
</h6>
<ul class="nav flex-column">
<li class="nav-item">
<RouterLink to="/" class="nav-link">
<svg class="feather"><use href="/feather-sprite-v4.29.0.svg#home"/></svg>
Home
Stream
</RouterLink>
</li>
<li class="nav-item">
<RouterLink to="/link1" class="nav-link">
<svg class="feather"><use href="/feather-sprite-v4.29.0.svg#layout"/></svg>
Menu item 1
</RouterLink>
</li>
<li class="nav-item">
<RouterLink to="/link2" class="nav-link">
<svg class="feather"><use href="/feather-sprite-v4.29.0.svg#key"/></svg>
Menu item 2
Search
</RouterLink>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
<span>Secondary menu</span>
<span>Account</span>
</h6>
<ul class="nav flex-column">
<li class="nav-item">
<RouterLink :to="'/some/' + 'variable_here' + '/path'" class="nav-link">
<svg class="feather"><use href="/feather-sprite-v4.29.0.svg#file-text"/></svg>
Item 1
Your profile
</RouterLink>
</li>
</ul>
</div>
</nav>
</nav>-->
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<!---<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">-->
<main class="mb-5">
<RouterView />
</main>
<nav id="global-nav" class="navbar fixed-bottom navbar-light bg-light row">
<div class="collapse navbar-collapse" id="navbarNav"></div>
<RouterLink to="/" class="col-4 text-center">
<i class="bi bi-house text-dark" style="font-size: 2em"></i>
</RouterLink>
<RouterLink to="/search" class="col-4 text-center">
<i class="bi bi-search text-dark" style="font-size: 2em"></i>
</RouterLink>
<RouterLink :to="'/profile/' + my_id" class="col-4 text-center">
<i class="bi bi-person text-dark" style="font-size: 2em"></i>
</RouterLink>
</nav>
</div>
</div>
</template>
<style>
#global-nav a.router-link-active {
font-size: 1.2em
}
</style>

40
webui/src/components/UserCard.vue
View file

@ -8,7 +8,8 @@ export default {
user_followed: this.post_followed,
user_banned: this.banned,
myself: this.my_id == this.user_id,
showModal: false,
show_post_form: false,
upload_file: null,
}
},
methods: {
@ -47,9 +48,18 @@ export default {
})
.catch(error => alert(error.toString()));
},
openModal() {
var modal = document.getElementById("exampleModal1");
modal.modal();
load_file(e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.upload_file = files[0];
},
submit_file() {
this.$axios.post("/users/" + this.my_id + "/photos", this.upload_file)
.then(response => {
this.show_post_form = false
this.$emit('updatePosts')
})
.catch(error => alert(error.toString()));
},
},
created() {
@ -74,21 +84,31 @@ export default {
<div v-if="!myself" class="d-flex">
<button v-if="!user_banned" @click="ban" type="button" class="btn btn-outline-danger me-2">Ban</button>
<button v-if="user_banned" @click="unban" type="button" class="btn btn-danger me-2">Banned</button>
<button v-if="!user_followed" @click="follow" type="button" class="btn btn-outline-primary">Follow</button>
<button v-if="user_followed" @click="unfollow" type="button" class="btn btn-primary">Following</button>
<button v-if="!user_followed" @click="follow" type="button" class="btn btn-primary">Follow</button>
<button v-if="user_followed" @click="unfollow" type="button" class="btn btn-outline-primary">Following</button>
</div>
<div v-if="(myself && !show_new_post)">
<button disabled type="button" class="btn btn-secondary">Yourself</button>
</div>
<div v-if="(myself && show_new_post)" class="d-flex">
<button type="button" class="btn btn-primary" @click="showModal = true">Post</button>
<button v-if="!show_post_form" type="button" class="btn btn-primary" @click="show_post_form = true">Post</button>
</div>
</div>
</div>
</div>
<div class="row" v-if="show_post_form">
<div class="col-9">
<div class="card-body h-100 d-flex align-items-center">
<input @change="load_file" class="form-control form-control-lg" id="formFileLg" type="file" />
</div>
</div>
<div class="col-3">
<div class="card-body d-flex justify-content-end">
<button type="button" class="btn btn-primary btn-lg" @click="submit_file">Publish</button>
</div>
</div>
</div>
</div>
</div>
</template>

27
webui/src/views/HomeView.vue
View file

@ -56,30 +56,19 @@ export default {
</script>
<template>
<div>
<div
class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Home page</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-secondary" @click="refresh">
Refresh
</button>
</div>
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-primary" @click="newPost">
New
</button>
</div>
</div>
</div>
<div class="mt-4">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-xl-6 col-lg-9">
<h3 class="card-title border-bottom mb-4 pb-2 text-center">Your daily WASAStream!</h3>
<ErrorMsg v-if="errormsg" :msg="errormsg"></ErrorMsg>
<div v-if="(stream_data.length == 0)" class="alert alert-secondary text-center" role="alert">
There's nothing here 😢
<br />Why don't you start following somebody? 👻
</div>
<div id="main-content" v-for="item of stream_data">
<PostCard :user_id="item.user_id"
:photo_id="item.photo_id"
@ -92,7 +81,7 @@ export default {
</div>
<div v-if="data_ended" class="alert alert-secondary text-center" role="alert">
Hai visualizzato tutti i post. Hooray! 👻
This is the end of your stream. Hooray! 👻
</div>
<LoadingSpinner :loading="loading" /><br />

3
webui/src/views/ProfileView.vue
View file

@ -85,7 +85,8 @@ export default {
:banned = "user_data['banned']"
:my_id = "my_id"
:show_new_post = "true"
@updateInfo = "getMainData" />
@updateInfo = "getMainData"
@updatePosts = "refresh" />
<div class="row text-center mt-2 mb-3">
<div class="col-4" style="border-right: 1px">

13
webui/src/views/SearchView.vue
View file

@ -32,9 +32,6 @@ export default {
let response = await this.$axios.get("/users?query=" + this.field_username + "&start_index=" + this.start_idx + "&limit=" + this.limit);
if (response.data.length == 0) this.data_ended = true;
else this.stream_data = this.stream_data.concat(response.data);
this.errormsg = this.stream_data; // todo: temoprary
this.loading = false;
} catch (e) {
this.errormsg = e.toString();
@ -59,22 +56,18 @@ export default {
// todo: may not work in 4k screens :/
this.limit = Math.round(window.innerHeight / 72);
this.scroll();
this.loadContent();
}
}
</script>
<template>
<div>
<div
class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Search</h1>
</div>
<div class="mt-4">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-xl-6 col-lg-9">
<h3 class="card-title border-bottom mb-4 pb-2 text-center">WASASearch</h3>
<ErrorMsg v-if="errormsg" :msg="errormsg"></ErrorMsg>
<div class="form-floating mb-4">