Skip to content
Snippets Groups Projects
Commit 8c85f9bd authored by rinaboc's avatar rinaboc
Browse files

page switch fix and design upgrade

parent 26459d02
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 130 additions and 143 deletions
frontend/src/App.vue
+ 10
− 27
View file @ 8c85f9bd
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
import PeldaKomponens from "@/components/pelda-komponens.vue";
import RegisterKomponens from "@/components/register-komponens.vue";
import IntroKomponens from "@/components/intro-komponens.vue";
import {ref} from "vue";
import BrowseKomponens from "@/components/browse-komponens.vue";
import axios from "axios";
// import loggedIn from "@/components/login-komponens.vue"
const isNotLoggedIn = ref(true);
// handle page switch
const isNotLoggedIn = ref(true);
function setStatus(status){
isNotLoggedIn.value = !status;
}
// registers user
function registerUser(credentials, callback) {
return axios.post('http://localhost:8080/api/register', credentials)
.then(response => {
......@@ -39,8 +38,8 @@ function registerUser(credentials, callback) {
id: 1,
user: "kazso",
subject: "szofttech",
title: "1. előadás",
description: "tehe",
title: "Szoftvertechnológia: 1. előadás",
description: "A Szoftvertechnológia alapjai című tárgy első előadás diái. Tartalmazza a szoftverkövetelményeket, milyen alap elemei vannak, mit kell tartalmaznia.",
filepath: "1.eloadas_szoftvertechnologia_2024_v1.0.pdf"
})
}
......@@ -49,8 +48,8 @@ function registerUser(credentials, callback) {
id: 2,
user: "kazso",
subject: "szofttech",
title: "3. előadás",
description: "tehee",
title: "Szoftvertechnológia: 3. előadás",
description: "A Szoftvertechnológia alapjai című tárgy harmadik előadás diái. Tartalmazza a szoftverfolyamatot, milyen modellek léteznek és a szoftverfolyamat szakaszait.",
filepath: "3.eloadas_szoftvertechnologia_2024_v1.0.pdf"
})
}
......@@ -77,12 +76,6 @@ function registerUser(credentials, callback) {
<style scoped>
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
main {
......@@ -90,27 +83,17 @@ function registerUser(credentials, callback) {
grid-template-columns: 1fr 1fr;
width: 100%;
height: 100%;
color: lightseagreen;
color: var(--light);
padding: 20px;
}
header {
display: block;
line-height: 1.5;
background-color: #224c49;
background-color: var(--dark);
margin: 10px 0 20px 0;
}
.logo {
margin: 0 2rem 0 0;
}
.wrapper {
display: block;
width: 100%;
height: 20%;
}
main h1 {
padding-right: 20%;
text-align: justify;
......
frontend/src/assets/main.css
+ 49
− 0
View file @ 8c85f9bd
@import './base.css';
:root {
--lightest: aqua;
--lighter: #768d90;
--lighttext: #b3ced1;
--light: lightseagreen;
--dark: #134946;
--darker: #1f2c2c;
--darkest: #181818;
}
#app {
/*max-width: 1280px;*/
margin: 0 auto;
......@@ -34,3 +44,42 @@ a,
padding: 0 2rem;
}
}
.grow {
height: 40px;
width: 130px;
color: var(--light);
border-style: solid;
background-color: var(--darkest);
font-weight: bold;
border-color: var(--dark);
}
.grow:hover{
background-color: var(--dark);
color: var(--lightest);
border-color: var(--light);
cursor: pointer;
}
.grow:active {
border-color: var(--light);
background-color: var(--darkest);
color: var(--light);
}
.grow:active {
animation-name: growScale;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-duration: 0.1s;
}
@keyframes growScale {
0% {
scale: 1;
}
100%{
scale: 1.05;
}
}
frontend/src/assets/user.svg 0 → 100644
+ 5
− 0
View file @ 8c85f9bd
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="20px" height="20px" viewBox="0" fill="lightseagreen" xmlns="http://www.w3.org/2000/svg">
<path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="lightseagreen" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="lightseagreen" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
\ No newline at end of file
frontend/src/components/HelloWorld.vue
+ 2
− 16
View file @ 8c85f9bd
<script setup>
import PeldaKomponens from "@/components/pelda-komponens.vue";
import LoginKomponens from "@/components/login-komponens.vue";
defineProps({
......@@ -12,15 +11,8 @@ defineProps({
<template>
<div class="greetings">
<!-- <h1 class="green">{{ msg }}</h1>-->
<img alt="NoteStore logo" class="logo" src="../assets/book-shelf.svg" width="100" height="100" />
<h1 class="title">{{msg}}</h1>
<!-- <h3 class="subtitle">-->
<!-- You’ve successfully created a project with-->
<!-- <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +-->
<!-- <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.-->
<!-- </h3>-->
<!-- <div class="space"></div>-->
<div class="login">
<LoginKomponens @status="(value) => $emit('status', value)" />
</div>
......@@ -32,7 +24,8 @@ defineProps({
.title {
color: lightseagreen;
color: var(--lightest);
text-shadow: 0 0 10px var(--light);
}
.title:after{
......@@ -75,16 +68,9 @@ h3 {
align-items: center;
}
.space {
width: 40%;
}
.logo {
margin: 0 2rem 0 0;
}
}
.subtitle {
margin-bottom: 16px;
}
</style>
frontend/src/components/browse-komponens.vue
+ 36
− 11
View file @ 8c85f9bd
......@@ -61,8 +61,14 @@ function downloadFile(filename) {
<h3 class="note-description">
{{description}}
</h3>
<h4>{{userName}}</h4>
<button @click="downloadFile(fileName)">Letöltés</button>
<div class="footer">
<h4>
Feltöltötte: <p class="green">{{userName}}</p>
<img alt="user icon" class="user" src="../assets/user.svg" width="18" height="18"/>
</h4>
<span></span>
<button class="grow" @click="downloadFile(fileName)">Letöltés</button>
</div>
</div>
</main>
</div>
......@@ -74,7 +80,7 @@ function downloadFile(filename) {
display: grid;
grid-auto-flow: row;
grid-template-columns: 1fr 2fr;
column-gap: 10px;
column-gap: 15px;
padding: 0 10% 0 10%;
}
......@@ -89,25 +95,44 @@ li {
.note:hover {
cursor: pointer;
color: lightseagreen;
color: var(--light);
background-color: #1f2c2c;
}
.browse, .note-page {
border: 1px solid lightseagreen;
.browse {
border: 1px solid var(--lightest);
box-shadow: var(--light) 0 0 5px;
padding: 5px;
}
.module {
background-color: #224c49;
background-color: var(--dark);
color: var(--lighttext);
}
.note-page > h4 {
color: lightseagreen;
.note-page {
border: 1px solid var(--lightest);
padding: 25px;
color: var(--lighttext);
box-shadow: var(--light) 0 0 5px;
}
.note-page {
padding: 15px;
.note-header {
text-align: center;
margin-bottom: 10px;
}
.footer {
margin-top: 20px;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
align-items: center;
color: var(--lighter);
}
.user {
margin-bottom: -2px;
}
</style>
\ No newline at end of file
frontend/src/components/login-komponens.vue
+ 25
− 86
View file @ 8c85f9bd
......@@ -2,31 +2,7 @@
import {ref} from "vue";
import axios from 'axios';
// const isLoading = ref(true);
// const aFact = ref('');
// function getAFact() {
// isLoading.value = true;
// axios.get('https://catfact.ninja/fact').then(result => {
// aFact.value = result.data.fact;
// isLoading.value = false;
// }).catch(error => {
// console.error('cannot get data from api', error);
// });
// }
//
// getAFact();
// const backendStatus = ref('unknown');
// function checkBackend() {
// axios.get('/api/ok').then(result=>{
// backendStatus.value = result.data;
// }).catch(error => {
// console.error('cannot get backend OK api endpoint', error);
// backendStatus.value = 'error';
// })
// }
// api call to login
function loginUser(credentials, callback) {
axios.post('http://localhost:8080/api/login', credentials)
.then(response => {
......@@ -37,29 +13,23 @@ function loginUser(credentials, callback) {
});
}
const loggedIn = ref(false);
const btnText = ref("Bejelentkezés")
// login logic handling
const logged_in = ref(false);
const userName = ref("")
function login(){
loggedIn.value = !loggedIn.value
function login(self){
//Itt lesz a kitalált user (Gipsz Jakab, keksz) aki megpróbál bejelentkezni
loginUser({username: 'gipja', password: 'süti'}, function(response) {
console.log(response)
userName.value = response["fullName"]
logged_in.value = response["loggedIn"]
if(!logged_in.value){
userName.value = ""
}
if(loggedIn.value){
loginUser({username: 'gipja', password: 'süti'}, function(response) {
userName.value = response["fullName"]
//Tessék bool :P
const bool = response["loggedIn"];
console.log(response)
})
btnText.value = "Kijelentkezés"
} else {
loginUser({username: 'gipja', password: 'süti'}, function(response) {
//Tessék bool :P
const bool = response["loggedIn"];
console.log(response)
})
userName.value = ""
btnText.value = "Bejelentkezés"
}
self.$emit('status', logged_in.value)
})
console.log(logged_in)
}
......@@ -68,7 +38,12 @@ function login(){
<template>
<div class="wrapper">
<h2 class="user">{{userName}}</h2>
<button class="grow" @click="login(); $emit('status', loggedIn)">{{btnText}}</button>
<div v-if="logged_in">
<button class="grow" @click="login(this)">Kijelentkezés</button>
</div>
<div v-else>
<button class="grow" @click="login(this)">Bejelentkezés</button>
</div>
</div>
</template>
......@@ -79,50 +54,14 @@ function login(){
}
.user {
color: lightseagreen;
color: var(--light);
width: 200px;
text-align: center;
}
button {
height: 40px;
width: 130px;
color: lightseagreen;
background-color: #181818;
font-weight: bold;
border-color: #181818;
}
button:hover{
background-color: #224c49;
color: lightseagreen;
border-color: lightseagreen;
.user:hover {
cursor: pointer;
color: var(--lightest);
}
button:active {
border-color: lightseagreen;
background-color: #181818;
color: lightseagreen;
}
.grow:active {
animation-name: growScale;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-duration: 0.1s;
}
@keyframes growScale {
0% {
scale: 1;
}
100%{
scale: 1.05;
}
}
.a-fact {
font-weight: bold;
}
</style>
\ No newline at end of file
frontend/src/components/register-komponens.vue
+ 3
− 3
View file @ 8c85f9bd
......@@ -26,17 +26,17 @@ function register(){
<style>
p {
display: inline-block;
color: aqua;
color: var(--lightest);
}
p:hover {
color: lightseagreen;
color: var(--light);
cursor: grab;
text-decoration: underline;
}
p:active {
color: aqua;
color: var(--lightest);
}
</style>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment