Merge remote-tracking branch 'origin/developer' into developer
# Conflicts: # public/index.html # public/routes/createMessage.js
This commit is contained in:
@@ -0,0 +1,145 @@
|
||||
var auth = {};
|
||||
|
||||
function clearAuthState() {
|
||||
auth.user = ''; // Login name
|
||||
auth.name = ''; // Full name
|
||||
auth.type = ''; // type of login (domain specific)
|
||||
auth.mail = ''; // Full mail address
|
||||
auth.roles = {}; // Role authorizations e.g. {user: true}
|
||||
auth.gender = ''; // Gender (e.g. Frau)
|
||||
}
|
||||
clearAuthState();
|
||||
|
||||
function fillAuthState(state) {
|
||||
// Shallow copy
|
||||
if (auth === undefined) {
|
||||
auth = state;
|
||||
}
|
||||
for (e in auth) {
|
||||
auth[e] = state[e];
|
||||
}
|
||||
}
|
||||
|
||||
// Login component: Login panel (if not logged in) or Logout element (if logged in)
|
||||
Vue.component('login-panel', {
|
||||
template: `
|
||||
<div class="modal-card" style="width: auto">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Login (Ohmportal)</p>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<b-field>
|
||||
<b-input
|
||||
v-model=user
|
||||
placeholder="User"
|
||||
:value="user"
|
||||
required>
|
||||
</b-input>
|
||||
</b-field>
|
||||
<b-field>
|
||||
<b-input
|
||||
v-model=pwd
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
:value="pwd"
|
||||
@change="pwd_changed"
|
||||
@keyup.enter.native="login"
|
||||
required>
|
||||
</b-input>
|
||||
</b-field>
|
||||
<b-checkbox>Eingeloggt bleiben</b-checkbox>
|
||||
<div v-if="error" style="color:red;"> Versuche es nochmal.</div>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<button class="button" type="button" @click.prevent="$parent.close()">Close</button>
|
||||
<button class="button is-primary" @click.prevent="login">Login</button>
|
||||
</footer>
|
||||
</div>`,
|
||||
data: function () {
|
||||
return {
|
||||
auth: auth,
|
||||
user: '',
|
||||
pwd: '',
|
||||
error: false,
|
||||
};
|
||||
},
|
||||
// TODO: Check if enough for session cookie re-login; checkbox
|
||||
// mounted: function() {
|
||||
// this.checkData();
|
||||
// },
|
||||
methods: {
|
||||
closeLoginPanel: function() {
|
||||
this.$emit('close-login-panel');
|
||||
},
|
||||
showLoginPanel: function() {
|
||||
this.$emit('show-login-panel');
|
||||
},
|
||||
pwd_changed: function(evt) {
|
||||
// Only required for PasswordInsert Apps etc. who send only(!) change events
|
||||
this.pwd = e.target.value;
|
||||
// Alternative call the input event
|
||||
//e.target.dispatchEvent(new Event('input'));
|
||||
},
|
||||
login: function() {
|
||||
clearAuthState();
|
||||
|
||||
$.ajax({
|
||||
url: "api/login",
|
||||
data: {
|
||||
user: this.user,
|
||||
pwd: this.pwd
|
||||
},
|
||||
method: "POST"
|
||||
}).done(successful_login).fail(failed_login);
|
||||
|
||||
function successful_login(resData) {
|
||||
fillAuthState(resData);
|
||||
console.info("Correct credentials");
|
||||
this.closeLoginPanel;
|
||||
|
||||
//console.log(resData);
|
||||
router.push('/home');
|
||||
}
|
||||
|
||||
function failed_login(err) {
|
||||
console.info("Wrong credentials");
|
||||
this.showError=true;
|
||||
this.showLoginPanel;
|
||||
|
||||
console.log("error: " + err.responseText);
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
checkData: function() {
|
||||
clearAuthState();
|
||||
|
||||
$.ajax({
|
||||
url: "api/login",
|
||||
data: undefined,
|
||||
method: "POST"
|
||||
}).done(successful_login).fail(failed_login);
|
||||
|
||||
function successful_login(res) {
|
||||
console.info("Re-Auth: Correct credentials");
|
||||
this.closeLoginPanel;
|
||||
|
||||
//console.log(res);
|
||||
router.push('/home')
|
||||
}
|
||||
|
||||
function failed_login(err) {
|
||||
console.info("Re-Auth: Wrong credentials");
|
||||
this.showError=true;
|
||||
this.showLoginPanel;
|
||||
|
||||
console.log("error: " + err.responseText);
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
logout: function() {
|
||||
clearAuthState();
|
||||
$.ajax({ url: "api/logout", method: "POST" });
|
||||
this.closeLoginPanel;
|
||||
}
|
||||
},
|
||||
});
|
||||
+95
-32
@@ -1,48 +1,111 @@
|
||||
const BookmarkRouter = {
|
||||
template: `
|
||||
<div>
|
||||
<div class="bookmark-headline"><h4>Gepeicherte Beiträge</h4></div>
|
||||
<div class="om-card card">
|
||||
<h6 class="msg-head">
|
||||
<div class="content">
|
||||
<div class="is-hidden-desktop">
|
||||
<div class="bookmark-headline"><h4>Gepeicherte Beiträge</h4></div>
|
||||
<div class="om-card card">
|
||||
<h6 class="msg-head">
|
||||
<b>Betreff</b>
|
||||
<img src="favicon.ico" width=20px height=20px>
|
||||
</h6>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
|
||||
<a href="#">#beispiel #tag</a></p>
|
||||
<div class="om-card-footer"> <div class="om-user-line">
|
||||
<i class="material-icons">account_circle</i>
|
||||
Erstellt von User 1</div>
|
||||
</h6>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
|
||||
<a href="#">#beispiel #tag</a>
|
||||
<div class="om-card-footer">
|
||||
<div class="om-user-line">
|
||||
<i class="material-icons">account_circle</i>
|
||||
Erstellt von User 1
|
||||
</div>
|
||||
<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
|
||||
<i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
|
||||
</div></div>
|
||||
<div class="om-card card">
|
||||
<h6 class="msg-head">
|
||||
</div>
|
||||
</div>
|
||||
<div class="om-card card">
|
||||
<h6 class="msg-head">
|
||||
<b>Betreff</b>
|
||||
<img src="favicon.ico" width=20px height=20px>
|
||||
</h6>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <br><br>
|
||||
<a href="#">#beispiel #tag</a></p>
|
||||
<div class="om-card-footer"> <div class="om-user-line">
|
||||
<i class="material-icons">account_circle</i>
|
||||
Erstellt von User 2</div>
|
||||
<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
|
||||
</h6>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <br><br>
|
||||
<a href="#">#beispiel #tag</a>
|
||||
<div class="om-card-footer">
|
||||
<div class="om-user-line">
|
||||
<i class="material-icons">account_circle</i>
|
||||
Erstellt von User 2
|
||||
</div>
|
||||
<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
|
||||
<i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
|
||||
</div></div>
|
||||
<div class="om-card card">
|
||||
<h6 class="msg-head">
|
||||
</div>
|
||||
</div>
|
||||
<div class="om-card card">
|
||||
<h6 class="msg-head">
|
||||
<b>Betreff</b>
|
||||
<img src="favicon.ico" width=20px height=20px>
|
||||
</h6>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
|
||||
<a href="#">#beispiel #tag</a></p>
|
||||
<div class="om-card-footer"> <div class="om-user-line">
|
||||
<i class="material-icons">account_circle</i>
|
||||
Erstellt von User 3</div>
|
||||
</h6>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
|
||||
<a href="#">#beispiel #tag</a>
|
||||
<div class="om-card-footer">
|
||||
<div class="om-user-line">
|
||||
<i class="material-icons">account_circle</i>
|
||||
Erstellt von User 3
|
||||
</div>
|
||||
<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
|
||||
<i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>`,
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-three-quarters is-pulled-right is-hidden-touch content-desktop">
|
||||
<div class="bookmark-headline"><h4>Gepeicherte Beiträge</h4></div>
|
||||
<div class="om-card card">
|
||||
<h6 class="msg-head">
|
||||
<b>Betreff</b>
|
||||
<img src="favicon.ico" width=20px height=20px>
|
||||
</h6>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
|
||||
<a href="#">#beispiel #tag</a>
|
||||
<div class="om-card-footer">
|
||||
<div class="om-user-line">
|
||||
<i class="material-icons">account_circle</i>
|
||||
Erstellt von User 1
|
||||
</div>
|
||||
<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
|
||||
<i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="om-card card">
|
||||
<h6 class="msg-head">
|
||||
<b>Betreff</b>
|
||||
<img src="favicon.ico" width=20px height=20px>
|
||||
</h6>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <br><br>
|
||||
<a href="#">#beispiel #tag</a>
|
||||
<div class="om-card-footer">
|
||||
<div class="om-user-line">
|
||||
<i class="material-icons">account_circle</i>
|
||||
Erstellt von User 2
|
||||
</div>
|
||||
<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
|
||||
<i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="om-card card">
|
||||
<h6 class="msg-head">
|
||||
<b>Betreff</b>
|
||||
<img src="favicon.ico" width=20px height=20px>
|
||||
</h6>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
|
||||
<a href="#">#beispiel #tag</a>
|
||||
<div class="om-card-footer">
|
||||
<div class="om-user-line">
|
||||
<i class="material-icons">account_circle</i>
|
||||
Erstellt von User 3
|
||||
</div>
|
||||
<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
|
||||
<i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
messages: _messages,
|
||||
|
||||
@@ -1,57 +0,0 @@
|
||||
Vue.component('login-panel', {
|
||||
template: `
|
||||
<form action="">
|
||||
<div class="modal-card" style="width: auto">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Login</p>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<b-field>
|
||||
<b-input
|
||||
placeholder="User (Ohmportal)"
|
||||
:value="user"
|
||||
v-model=user
|
||||
required>
|
||||
</b-input>
|
||||
</b-field>
|
||||
<b-field>
|
||||
<b-input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
:value="pwd"
|
||||
required>
|
||||
</b-input>
|
||||
</b-field>
|
||||
<b-checkbox>Eingeloggt bleiben</b-checkbox>
|
||||
<div v-if="showError" style="color:red;"> Versuche es nochmal.</div>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<button class="button" type="button" @click="$parent.close()">Close</button>
|
||||
<button class="button is-primary" @click="checkData()">Login</button>
|
||||
</footer>
|
||||
</div>
|
||||
</form>`,
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
user: "name",
|
||||
pwd:"password",
|
||||
showError:false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
checkData(){
|
||||
if(this.user === "name" && this.pwd === "password"){
|
||||
console.log("correct");
|
||||
this.$parent.close();
|
||||
}else{
|
||||
console.log("wrong");
|
||||
this.showError=true;
|
||||
}
|
||||
},
|
||||
|
||||
logIn(){
|
||||
$parent.close();
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,46 @@
|
||||
var majorList = [
|
||||
{id:'B-AC',name:'Bachelor Angewandte Chemie'},
|
||||
{id:'B-AMP',name:'Bachelor Angewandte Mathematik und Physik'},
|
||||
{id:'B-TJ',name:'Bachelor Technikjournalismus/Technik-PR'},
|
||||
{id:'B-AR',name:'Bachelor Architektur'},
|
||||
{id:'B-BI',name:'Bachelor Bauingenieurwesen'},
|
||||
{id:'B-BW',name:'Bachelor Betriebswirtschaft'},
|
||||
{id:'B-BIO',name:'Bachelor Management in der Biobranche'},
|
||||
{id:'B-IB',name:'Bachelor International Business'},
|
||||
{id:'B-IBT',name:'Bachelor International Business and Technology'},
|
||||
{id:'B-DE',name:'Bachelor Design'},
|
||||
{id:'B-EI',name:'Bachelor Elektrotechnik und Informationstechnik'},
|
||||
{id:'B-MED',name:'Bachelor Medizintechnik'},
|
||||
{id:'B-MF',name:'Bachelor Mechatronik/Feinwerktechnik'},
|
||||
{id:'B-ME',name:'Bachelor Media Engineering'},
|
||||
{id:'B-IN',name:'Bachelor Informatik'},
|
||||
{id:'B-MIN',name:'Bachelor Medieninformatik'},
|
||||
{id:'B-WIN',name:'Bachelor Wirtschaftsinformatik'},
|
||||
{id:'B-MB',name:'Bachelor Maschinenbau'},
|
||||
{id:'B-EGT',name:'Bachelor Energie- und Gebäudetechnik'},
|
||||
{id:'B-EBL',name:'Bachelor Soziale Arbeit: Erziehung und Bildung im Lebenslauf'},
|
||||
{id:'B-SA',name:'Bachelor Soziale Arbeit'},
|
||||
{id:'B-EPT',name:'Bachelor Energieprozesstechnik'},
|
||||
{id:'B-VT',name:'Bachelor Verfahrenstechnik'},
|
||||
{id:'B-WT',name:'Bachelor Werkstofftechnik'},
|
||||
{id:'M-AMP',name:'Master Angewandte Mathematik und Physik'},
|
||||
{id:'M-AR',name:'Master Architektur'},
|
||||
{id:'M-BI',name:'Master Internationales Bauwesen'},
|
||||
{id:'M-URB',name:'Master Urbane Mobilität (Verkehrsingenieurwesen)'},
|
||||
{id:'M-BW',name:'Master Betriebswirtschaft'},
|
||||
{id:'M-TAX',name:'Master Steuerberatung'},
|
||||
{id:'M-WR',name:'Master Wirtschaftsrecht'},
|
||||
{id:'M-IFE',name:'Master International Finance and Economics'},
|
||||
{id:'M-IMA',name:'Master International Marketing'},
|
||||
{id:'M-APR',name:'Master Applied Research in Engineering Sciences'},
|
||||
{id:'M-SY',name:'Master Elektronische und Mechatronische Systeme'},
|
||||
{id:'M-IN',name:'Master Informatik'},
|
||||
{id:'M-MIN',name:'Master Medieninformatik'},
|
||||
{id:'M-WIN',name:'Master Wirtschaftsinformatik'},
|
||||
{id:'M-MB',name:'Master Maschinenbau'},
|
||||
{id:'M-EE',name:'Master Energiemanagement und Energietechnik'},
|
||||
{id:'M-GT',name:'Master Gebäudetechnik'},
|
||||
{id:'M-SA',name:'Master Soziale Arbeit'},
|
||||
{id:'M-VT',name:'Master Chemieingenieurwesen und Verfahrenstechnik'},
|
||||
{id:'M-WT',name:'Master Werkstofftechnik'},
|
||||
];
|
||||
@@ -1,31 +1,58 @@
|
||||
Vue.component('nav-router', {
|
||||
template: `
|
||||
<div>
|
||||
<nav class="navbar is-fixed-bottom is-expanded is-primary" role="navigation" aria-label="main navigation">
|
||||
<nav class="navbar is-fixed-bottom is-expanded is-primary is-hidden-desktop" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand is-expanded is-light">
|
||||
<router-link to="/home" class="navbar-item is-primary is-expanded has-text-centered">
|
||||
<router-link to="/home" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop">
|
||||
<i class="material-icons">home</i>
|
||||
</router-link>
|
||||
|
||||
<router-link to="/files" class="navbar-item is-primary is-expanded">
|
||||
<i class="material-icons">language</i>
|
||||
<i class="material-icons">search</i>
|
||||
</router-link>
|
||||
|
||||
<router-link to="/createMessage" class="navbar-item is-primary is-expanded">
|
||||
<router-link to="/createMessage" class="navbar-item is-primary is-expanded is-hidden-desktop">
|
||||
<i class="material-icons">add_circle</i>
|
||||
</router-link>
|
||||
|
||||
<router-link to="/bookmark" class="navbar-item is-primary is-expanded">
|
||||
<router-link to="/bookmark" class="navbar-item is-primary is-expanded is-hidden-desktop">
|
||||
<i class="material-icons">bookmark</i>
|
||||
</router-link>
|
||||
|
||||
<router-link to="/profil" class="navbar-item is-primary is-expanded">
|
||||
<router-link to="/profil" class="navbar-item is-primary is-expanded is-hidden-desktop">
|
||||
<i class="material-icons">person</i>
|
||||
</router-link>
|
||||
</div>
|
||||
</nav>
|
||||
</div>`,
|
||||
|
||||
<div class="is-fullheight">
|
||||
<div class="column is-sidebar-menu is-hidden-touch">
|
||||
<aside class="menu is-medium">
|
||||
<ul class="menu-list">
|
||||
<li><router-link to="/home" class="is-hidden-touch">
|
||||
<i class="material-icons">home</i> Home
|
||||
</router-link></li>
|
||||
|
||||
<li><router-link to="/files" class="is-hidden-touch">
|
||||
<i class="material-icons">language</i> Language
|
||||
</router-link></li>
|
||||
|
||||
<li><router-link to="/createMessage" class="is-hidden-touch">
|
||||
<i class="material-icons">add_circle</i> Create Message
|
||||
</router-link></li>
|
||||
|
||||
<li><router-link to="/bookmark" class="is-hidden-touch">
|
||||
<i class="material-icons">bookmark</i> Bookmark
|
||||
</router-link></li>
|
||||
|
||||
<li><router-link to="/profil" class="is-hidden-touch">
|
||||
<i class="material-icons">person</i> Profil
|
||||
</router-link></li>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
});
|
||||
|
||||
const routes = [
|
||||
@@ -35,9 +62,33 @@ const routes = [
|
||||
{ path: "/createMessage", component: CreateMsgRouter },
|
||||
{ path: "/bookmark", component: BookmarkRouter },
|
||||
{ path: "/profil", component: ProfilRouter },
|
||||
];
|
||||
];
|
||||
|
||||
const router = new VueRouter({
|
||||
routes,
|
||||
linkActiveClass: 'is-active'
|
||||
});
|
||||
|
||||
/*
|
||||
<div class="nav-right nav-menu is-hidden-desktop-only">
|
||||
<router-link to="/home" class="nav-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
|
||||
<i class="material-icons">home</i> Home
|
||||
</router-link>
|
||||
|
||||
<router-link to="/files" class="nav-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
|
||||
<i class="material-icons">language</i> Language
|
||||
</router-link>
|
||||
|
||||
<router-link to="/createMessage" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
|
||||
<i class="material-icons">add_circle</i> Create Message
|
||||
</router-link>
|
||||
|
||||
<router-link to="/bookmark" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
|
||||
<i class="material-icons">bookmark</i> Bookmark
|
||||
</router-link>
|
||||
|
||||
<router-link to="/profil" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
|
||||
<i class="material-icons">person</i> Profil
|
||||
</router-link>
|
||||
</div>
|
||||
*/
|
||||
|
||||
+34
-37
@@ -1,45 +1,42 @@
|
||||
const ProfilRouter = {
|
||||
template: `
|
||||
<div>
|
||||
<div v-if="isAuthentified">
|
||||
<ProfilCard
|
||||
v-for="(profil, index) in profilcard"
|
||||
:key="profil.id"
|
||||
:profil="profil"
|
||||
></ProfilCard>
|
||||
<b-button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="logOut()">Logout</b-button>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="isAuth">
|
||||
<profil-card></profil-card>
|
||||
</div>
|
||||
<div v-else>
|
||||
<button class="button is-primary is-medium"
|
||||
@click="isLPVisible = true">
|
||||
Login
|
||||
</button>
|
||||
|
||||
<div v-else-if="!isAuthentified">
|
||||
<button class="button is-primary is-medium"
|
||||
@click="showLoginModal = true">
|
||||
Login
|
||||
</button>
|
||||
|
||||
<b-modal :active.sync="showLoginModal" has-modal-card>
|
||||
<login-panel></login-panel>
|
||||
</b-modal>
|
||||
</div>
|
||||
</div>`,
|
||||
<b-modal :active.sync="isLPVisible"
|
||||
@close-login-panel="closeLoginPanel"
|
||||
@show-login-panel="showLoginPanel"
|
||||
has-modal-card>
|
||||
<login-panel></login-panel>
|
||||
</b-modal>
|
||||
</div>
|
||||
</div>`,
|
||||
data: function () {
|
||||
return {
|
||||
showLoginModal: false,
|
||||
isAuthentified: false,
|
||||
profilcard: _profilcard,
|
||||
isAuth: false,
|
||||
isLPVisible: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
closeLoginPanel: function() {
|
||||
this.isLPVisible = false;
|
||||
},
|
||||
showLoginPanel: function() {
|
||||
this.isLPVisible = true;
|
||||
},
|
||||
},
|
||||
created: function() {
|
||||
//console.info(auth);
|
||||
},
|
||||
beforeMount: function() {
|
||||
this.isAuth = (auth != null && auth.mail != '');
|
||||
//console.info('beforeMount: '+this.isAuth);
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
$('#myModal').on('show.bs.modal', function (event) {
|
||||
console.log("Modal Opened")
|
||||
var button = $(event.relatedTarget) // Button that triggered the modal
|
||||
var recipient = button.data('whatever') // Extract info from data-* attributes
|
||||
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
|
||||
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
|
||||
var modal = $(this)
|
||||
modal.find('.modal-title').text('New message to ' + recipient)
|
||||
modal.find('.modal-body input').val(recipient)
|
||||
})
|
||||
*/
|
||||
|
||||
+68
-59
@@ -1,72 +1,81 @@
|
||||
Vue.component('ProfilCard', {
|
||||
template: `<div>
|
||||
<div class="profil-card card">
|
||||
<br/>
|
||||
<img class="prof-image" src="img/profil_icon.png" alt="Card image cap">
|
||||
Vue.component('profil-card', {
|
||||
template: `
|
||||
<div class="profil-card card">
|
||||
<img class="prof-image" src="img/profil_icon.png" alt="Card image cap">
|
||||
|
||||
<div class="logout-item"><i class="material-icons" @click="$router.push('/login')">exit_to_app</i></div>
|
||||
<div class="logout-item" style="float: right;">
|
||||
<b-button type="button" class="btn btn-primary" data-dismiss="modal" @click.prevent="logout">
|
||||
<i class="material-icons" style="float: left; margin: -0.1rem 0.2rem 0 -0.2rem;" @click.prevent="logout">exit_to_app</i>
|
||||
Logout</b-button>
|
||||
</div>
|
||||
|
||||
<div class="profil-text">
|
||||
<h6><b>Benutzername:</b><br><br>
|
||||
<b>{{ profil.user }}</b><br><br>
|
||||
<b>Studiengang:</b><br><br>
|
||||
{{ profil.major }}<br><br>
|
||||
<b>Semester:</b><br><br>
|
||||
{{ profil.semester }}<br></h6>
|
||||
</div>
|
||||
<div class="profil-text">
|
||||
<span style="font-size:120%; display:inline-block; margin: 0.8rem 0 0 0;"><b>{{ auth.name }}</b></span><br><br>
|
||||
<span style="font-size:90%; display:inline-block; margin: 0 0 0.8rem 0;"><b>{{ major }}</b></span>
|
||||
<br><br>
|
||||
</div>
|
||||
|
||||
<hr class="first">
|
||||
<hr class="first">
|
||||
|
||||
<div class="btnprofil">
|
||||
<button @click="isCardModalActive = true"><b>Abonniert: <br/>{{ profil.abos }}</b> <br/></button>
|
||||
<button @click="$router.push('/bookmark')"><b>Gespeichert:<br/> {{ profil.saved }}</b><br/></button>
|
||||
</div>
|
||||
<div class="btnprofil">
|
||||
<button @click="isCardModalActive = true"><b>Abonniert: <br/>{{ abo }}</b> <br/></button>
|
||||
<button @click="$router.push('/bookmark')"><b>Gespeichert:<br/> {{ saved }}</b><br/></button>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<b-modal :active.sync="isCardModalActive" :width="600" scroll="keep">
|
||||
<div class="card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Abonnierte Kanäle</p>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
<ul>
|
||||
<li>
|
||||
</li>
|
||||
<li>
|
||||
</li>
|
||||
<li>
|
||||
</li>
|
||||
<li>
|
||||
</li>
|
||||
<li>
|
||||
</li>
|
||||
<li>
|
||||
</li>
|
||||
<li>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="modal-card-foot">
|
||||
<b-button size="is-medium" @click="isCardModalActive = false">Close</b-button>
|
||||
</footer>
|
||||
<section>
|
||||
<b-modal :active.sync="isCardModalActive" :width="600" scroll="keep">
|
||||
<div class="card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Abonnierte Kanäle</p>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</div>
|
||||
</b-modal>
|
||||
</section>
|
||||
</div>
|
||||
</div>`,
|
||||
|
||||
props: ['profil'],
|
||||
|
||||
</div>
|
||||
<footer class="modal-card-foot">
|
||||
<b-button size="is-medium" @click="isCardModalActive = false">Close</b-button>
|
||||
</footer>
|
||||
</div>
|
||||
</b-modal>
|
||||
</section>
|
||||
</div>`,
|
||||
data: function () {
|
||||
return {
|
||||
isCardModalActive: false
|
||||
auth: auth,
|
||||
abo: 7,
|
||||
saved: 3,
|
||||
isCardModalActive: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
major: function() {
|
||||
// e.g. ST@B-ME;ST@EFI;
|
||||
var majorID = auth.type.split(';')[0].split('@')[1];
|
||||
//console.info(majorID);
|
||||
//console.info(majorList);
|
||||
var majorName = 'Studiengang Unbekannt';
|
||||
majorList.forEach(function(major) {
|
||||
if (major.id == majorID) {
|
||||
majorName = major.name;
|
||||
}
|
||||
});
|
||||
return majorName;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
close: function () {
|
||||
|
||||
}
|
||||
logout: function() {
|
||||
clearAuthState();
|
||||
$.ajax({ url: "api/logout", method: "POST" });
|
||||
router.push('/profil');
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
_profilcard = [
|
||||
{
|
||||
id: 1,
|
||||
user: '',
|
||||
major: '',
|
||||
semester: '',
|
||||
abos: '7',
|
||||
saved: '3',
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user