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

page switch fix and design upgrade

parent 26459d02
No related branches found
No related tags found
No related merge requests found
<script setup> <script setup>
import HelloWorld from './components/HelloWorld.vue' 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 IntroKomponens from "@/components/intro-komponens.vue";
import {ref} from "vue"; import {ref} from "vue";
import BrowseKomponens from "@/components/browse-komponens.vue"; import BrowseKomponens from "@/components/browse-komponens.vue";
import axios from "axios"; 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){ function setStatus(status){
isNotLoggedIn.value = !status; isNotLoggedIn.value = !status;
} }
// registers user
function registerUser(credentials, callback) { function registerUser(credentials, callback) {
return axios.post('http://localhost:8080/api/register', credentials) return axios.post('http://localhost:8080/api/register', credentials)
.then(response => { .then(response => {
...@@ -39,8 +38,8 @@ function registerUser(credentials, callback) { ...@@ -39,8 +38,8 @@ function registerUser(credentials, callback) {
id: 1, id: 1,
user: "kazso", user: "kazso",
subject: "szofttech", subject: "szofttech",
title: "1. előadás", title: "Szoftvertechnológia: 1. előadás",
description: "tehe", 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" filepath: "1.eloadas_szoftvertechnologia_2024_v1.0.pdf"
}) })
} }
...@@ -49,8 +48,8 @@ function registerUser(credentials, callback) { ...@@ -49,8 +48,8 @@ function registerUser(credentials, callback) {
id: 2, id: 2,
user: "kazso", user: "kazso",
subject: "szofttech", subject: "szofttech",
title: "3. előadás", title: "Szoftvertechnológia: 3. előadás",
description: "tehee", 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" filepath: "3.eloadas_szoftvertechnologia_2024_v1.0.pdf"
}) })
} }
...@@ -77,12 +76,6 @@ function registerUser(credentials, callback) { ...@@ -77,12 +76,6 @@ function registerUser(credentials, callback) {
<style scoped> <style scoped>
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) { @media (min-width: 1024px) {
main { main {
...@@ -90,27 +83,17 @@ function registerUser(credentials, callback) { ...@@ -90,27 +83,17 @@ function registerUser(credentials, callback) {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: lightseagreen; color: var(--light);
padding: 20px; padding: 20px;
} }
header { header {
display: block; display: block;
line-height: 1.5; line-height: 1.5;
background-color: #224c49; background-color: var(--dark);
margin: 10px 0 20px 0; margin: 10px 0 20px 0;
} }
.logo {
margin: 0 2rem 0 0;
}
.wrapper {
display: block;
width: 100%;
height: 20%;
}
main h1 { main h1 {
padding-right: 20%; padding-right: 20%;
text-align: justify; text-align: justify;
......
@import './base.css'; @import './base.css';
:root {
--lightest: aqua;
--lighter: #768d90;
--lighttext: #b3ced1;
--light: lightseagreen;
--dark: #134946;
--darker: #1f2c2c;
--darkest: #181818;
}
#app { #app {
/*max-width: 1280px;*/ /*max-width: 1280px;*/
margin: 0 auto; margin: 0 auto;
...@@ -34,3 +44,42 @@ a, ...@@ -34,3 +44,42 @@ a,
padding: 0 2rem; 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;
}
}
<?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
<script setup> <script setup>
import PeldaKomponens from "@/components/pelda-komponens.vue";
import LoginKomponens from "@/components/login-komponens.vue"; import LoginKomponens from "@/components/login-komponens.vue";
defineProps({ defineProps({
...@@ -12,15 +11,8 @@ defineProps({ ...@@ -12,15 +11,8 @@ defineProps({
<template> <template>
<div class="greetings"> <div class="greetings">
<!-- <h1 class="green">{{ msg }}</h1>-->
<img alt="NoteStore logo" class="logo" src="../assets/book-shelf.svg" width="100" height="100" /> <img alt="NoteStore logo" class="logo" src="../assets/book-shelf.svg" width="100" height="100" />
<h1 class="title">{{msg}}</h1> <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"> <div class="login">
<LoginKomponens @status="(value) => $emit('status', value)" /> <LoginKomponens @status="(value) => $emit('status', value)" />
</div> </div>
...@@ -32,7 +24,8 @@ defineProps({ ...@@ -32,7 +24,8 @@ defineProps({
.title { .title {
color: lightseagreen; color: var(--lightest);
text-shadow: 0 0 10px var(--light);
} }
.title:after{ .title:after{
...@@ -75,16 +68,9 @@ h3 { ...@@ -75,16 +68,9 @@ h3 {
align-items: center; align-items: center;
} }
.space {
width: 40%;
}
.logo { .logo {
margin: 0 2rem 0 0; margin: 0 2rem 0 0;
} }
} }
.subtitle {
margin-bottom: 16px;
}
</style> </style>
...@@ -61,8 +61,14 @@ function downloadFile(filename) { ...@@ -61,8 +61,14 @@ function downloadFile(filename) {
<h3 class="note-description"> <h3 class="note-description">
{{description}} {{description}}
</h3> </h3>
<h4>{{userName}}</h4> <div class="footer">
<button @click="downloadFile(fileName)">Letöltés</button> <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> </div>
</main> </main>
</div> </div>
...@@ -74,7 +80,7 @@ function downloadFile(filename) { ...@@ -74,7 +80,7 @@ function downloadFile(filename) {
display: grid; display: grid;
grid-auto-flow: row; grid-auto-flow: row;
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
column-gap: 10px; column-gap: 15px;
padding: 0 10% 0 10%; padding: 0 10% 0 10%;
} }
...@@ -89,25 +95,44 @@ li { ...@@ -89,25 +95,44 @@ li {
.note:hover { .note:hover {
cursor: pointer; cursor: pointer;
color: lightseagreen; color: var(--light);
background-color: #1f2c2c; background-color: #1f2c2c;
} }
.browse, .note-page { .browse {
border: 1px solid lightseagreen; border: 1px solid var(--lightest);
box-shadow: var(--light) 0 0 5px;
padding: 5px; padding: 5px;
} }
.module { .module {
background-color: #224c49; background-color: var(--dark);
color: var(--lighttext);
} }
.note-page > h4 { .note-page {
color: lightseagreen; border: 1px solid var(--lightest);
padding: 25px;
color: var(--lighttext);
box-shadow: var(--light) 0 0 5px;
} }
.note-page { .note-header {
padding: 15px; 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> </style>
\ No newline at end of file
...@@ -2,31 +2,7 @@ ...@@ -2,31 +2,7 @@
import {ref} from "vue"; import {ref} from "vue";
import axios from 'axios'; import axios from 'axios';
// const isLoading = ref(true); // api call to login
// 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';
// })
// }
function loginUser(credentials, callback) { function loginUser(credentials, callback) {
axios.post('http://localhost:8080/api/login', credentials) axios.post('http://localhost:8080/api/login', credentials)
.then(response => { .then(response => {
...@@ -37,29 +13,23 @@ function loginUser(credentials, callback) { ...@@ -37,29 +13,23 @@ function loginUser(credentials, callback) {
}); });
} }
const loggedIn = ref(false); // login logic handling
const btnText = ref("Bejelentkezés") const logged_in = ref(false);
const userName = ref("") const userName = ref("")
function login(){ function login(self){
loggedIn.value = !loggedIn.value //Itt lesz a kitalált user (Gipsz Jakab, keksz) aki megpróbál bejelentkezni
if(loggedIn.value){
loginUser({username: 'gipja', password: 'süti'}, function(response) { loginUser({username: 'gipja', password: 'süti'}, function(response) {
userName.value = response["fullName"]
//Tessék bool :P
const bool = response["loggedIn"];
console.log(response) console.log(response)
}) userName.value = response["fullName"]
btnText.value = "Kijelentkezés" logged_in.value = response["loggedIn"]
} else {
loginUser({username: 'gipja', password: 'süti'}, function(response) { if(!logged_in.value){
//Tessék bool :P
const bool = response["loggedIn"];
console.log(response)
})
userName.value = "" userName.value = ""
btnText.value = "Bejelentkezés"
} }
self.$emit('status', logged_in.value)
})
console.log(logged_in)
} }
...@@ -68,7 +38,12 @@ function login(){ ...@@ -68,7 +38,12 @@ function login(){
<template> <template>
<div class="wrapper"> <div class="wrapper">
<h2 class="user">{{userName}}</h2> <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> </div>
</template> </template>
...@@ -79,50 +54,14 @@ function login(){ ...@@ -79,50 +54,14 @@ function login(){
} }
.user { .user {
color: lightseagreen; color: var(--light);
width: 200px; width: 200px;
text-align: center; text-align: center;
} }
button { .user:hover {
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;
cursor: pointer; 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> </style>
\ No newline at end of file
...@@ -26,17 +26,17 @@ function register(){ ...@@ -26,17 +26,17 @@ function register(){
<style> <style>
p { p {
display: inline-block; display: inline-block;
color: aqua; color: var(--lightest);
} }
p:hover { p:hover {
color: lightseagreen; color: var(--light);
cursor: grab; cursor: grab;
text-decoration: underline; text-decoration: underline;
} }
p:active { p:active {
color: aqua; color: var(--lightest);
} }
</style> </style>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment