hopfma/om
4
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Vue Rerender function

Browse Source
This commit is contained in:
Erik Römmelt 2019-07-23 17:22:01 +02:00
parent b1d0a0f095
commit 2d4850520d
10 changed files with 106 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
mong_usr.js
View File

@ -1,12 +1,10 @@
db.users.insert([
// author,OHMNEWS2019
{"_id":"author","name":"Test Author","type":"author","roles":["user","author"],"hash":"sha256","salt":"cy5CkPrplcEze6o4psURhw==","pwd":"Gc8ozlxjEGITkS+fW9tz2xLROzws44s04EOCWuP04qE=","abos":["wichtig","th"],"bookmarks":["th"],},
{"_id":"author","name":"Test Author","type":"author","roles":{"user":true,"author":true},"hash":"sha256","salt":"cy5CkPrplcEze6o4psURhw==","pwd":"Gc8ozlxjEGITkS+fW9tz2xLROzws44s04EOCWuP04qE=","abos":["wichtig","th"],"bookmarks":["th"],},
// admin,oZuse1
{"_id":"admin","name":"Test Admin","type":"admin","roles":["user","author","admin"],"hash":"sha256","salt":"PoIUHbDp7tP34ji31iQ0zw==","pwd":"mJpIfIksYs6LJJwYRBemFKqR6TacsSl2E0ZtpO1GMuk=","abos":["wichtig","th"],"bookmarks":["wichtig"],},
{"_id":"admin","name":"Test Admin","type":"admin","roles":{"user":true,"author":true,"admin":true},"hash":"sha256","salt":"PoIUHbDp7tP34ji31iQ0zw==","pwd":"mJpIfIksYs6LJJwYRBemFKqR6TacsSl2E0ZtpO1GMuk=","abos":["wichtig","th"],"bookmarks":["wichtig"],},
])
db.users.insert({"name":"mustermannmax", "roles":["user"],"abos":[],"bookmarks":[]})
//var c = require('./server/crypto.js'),
// e = {"_id":"writer","hash":"sha256"};
//c.fillLocalAuth(e,"pwd");

15
public/index.html
View File

@ -95,28 +95,17 @@
<div class="om-content">
<div id=xxx></div>
<nav-router></nav-router>
<router-view :key="auth.user"></router-view>
<router-view :key="vueRender.key"></router-view>
</div>
</div>
<script>
new Vue({
router,
el: '#api',
components: {
// Locally registered components
},
data: {
// Locally registered variables
auth: auth,
},
computed:{
// Methods to change data appearance, does cache results
},
methods: {
// Methods to change data content, run always again
vueRender : vueRender,
},
});
</script>

8
public/routes/auth.js
View File

@ -122,6 +122,8 @@ Vue.component('login-panel', {
function successful_login(resData) {
fillAuthState(resData);
// updateUserInDB();
auth.abos = [];
auth.bookmarks = [];
console.info("Correct credentials");
this.closeLoginPanel;
@ -150,6 +152,7 @@ Vue.component('login-panel', {
function successful_login(res) {
console.info("Re-Auth: Correct credentials");
this.closeLoginPanel;
vueForceRender();
//console.log(res);
router.push('/home')
@ -163,10 +166,5 @@ Vue.component('login-panel', {
console.log(err);
}
},
logout: function() {
clearAuthState();
$.ajax({ url: "api/logout", method: "POST" });
this.closeLoginPanel;
},
},
});

24
public/routes/home.js
View File

@ -1,17 +1,17 @@
const HomeRouter = {
template: `
<div>
<div id="om-msg-cards" class="column pull-right-sm is-four-fifths-desktop">
<a v-if="isSearchActiv" @click="goBackToDashboard">< zurück zu allen Einträgen</a>
<b-button class="subscribe-btn" v-if="isSubscripeButtonActiv" type="is-primary" @click="">#IPSUM ABONNIEREN</b-button>
<MsgCard
v-for="id in messagelist.slice().reverse()"
:key="id"
:msg="messages[id] || {}"
:isBookmark="bookmarkArray[id]"
></MsgCard>
</div>
</div>`,
<div>
<div id="om-msg-cards" class="column pull-right-sm is-four-fifths-desktop">
<a v-if="isSearchActiv" @click="goBackToDashboard">< zurück zu allen Einträgen</a>
<b-button class="subscribe-btn" v-if="isSubscripeButtonActiv" type="is-primary" @click="">#IPSUM ABONNIEREN</b-button>
<MsgCard
v-for="id in messagelist.slice().reverse()"
:key="id"
:msg="messages[id] || {}"
:isBookmark="bookmarkArray[id]">
</MsgCard>
</div>
</div>`,
data: function () {
return {
messagelist: _messagelist,

13
public/routes/initGlobals.js
View File

@ -16,6 +16,17 @@ var auth = {},
_isSearchActiv = false,
_isSubscripeButtonActiv = false,
data = [],
search_data = []
search_data = [],
// Vue Rerender Key
vueRender = { key:0 };
const authorRole = 'author';
// Global Functions
function vueForceRender() {
if (vueRender.key >= 10) {
vueRender.key = 0;
}
vueRender.key++;
}

38
public/routes/msgCard.js
View File

@ -1,27 +1,31 @@
Vue.component('MsgCard', {
template: `<div class="om-card card">
<h6 class="msg-head">
template: `
<div class="om-card card">
<h6 class="msg-head">
<b>{{ msg.subject }}</b>
<div id="msgid" >{{msg._id}}</div>
<img src="favicon.ico" width=20px height=20px>
</h6>
{{ msg.message }}<br>
<a v-for="tag in msg.tag" @click="filterForTag(tag)">#{{ tag }} </a>
<br>
</p>
<div class="om-card-footer"> <div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von {{ msg.user }}</div>
</h6>
{{ msg.message }}<br>
<a v-for="tag in msg.tag" @click="filterForTag(tag)">#{{ tag }} </a>
<br>
<div class="om-card-footer">
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von {{ msg.user }}
</div>
<i id="bockmark-not-active" class="material-icons" :key="isActive" @click="myFilter(msg._id)" v-if="!isActive">bookmark_border</i>
<i id="bockmark-active" class="material-icons" :key="isActive" @click="myFilter(msg._id)" v-else>bookmark</i>
</div></div>`,
</div>
</div>`,
props: ['msg', 'isBookmark'],
data: function () {
return {
isActive: this.isBookmark,
isActive_: 0,
msgid: this.msg._id
msgid: this.msg._id,
bookmarkArray: auth.bookmarks,
};
},
@ -29,15 +33,15 @@ Vue.component('MsgCard', {
myFilter: function (_messageid) {
//var _messageid = $("#msgid").text();
if (this.isActive == true) {
var index = auth.bookmarks.indexOf(_messageid);
var index = this.bookmarkArray.indexOf(_messageid);
if (index > -1) {
auth.bookmarks.splice(index, 1);
this.bookmarkArray.splice(index, 1);
}
this.isActive = false;
} else {
console.log("_messsageid: "+_messageid+" bookmarks: "+auth.bookmarks);
auth.bookmarks.push(_messageid);
console.log("_messsageid: "+_messageid+" bookmarks: "+this.bookmarkArray);
this.bookmarkArray.push(_messageid);
this.isActive =true;
}
/*console.log("msgid"+_bookmark);
@ -69,7 +73,7 @@ Vue.component('MsgCard', {
},
isBookmarkActive: function (msgid) {
//console.log("isBookmarkActive(): " + msgid);
if (auth.bookmarks.indexOf(msgid) > -1) {
if (this.bookmarkArray.indexOf(msgid) > -1) {
// $("#bockmark-not-active").css("visibility","hidden");
// $("#bockmark-active").css("visibility","visible");
this.isActive = true;

18
public/routes/navRoutes.js
View File

@ -11,7 +11,7 @@ Vue.component('nav-router', {
<i class="material-icons">search</i>
</router-link>
<router-link to="/createMessage" class="navbar-item is-primary is-expanded is-hidden-desktop">
<router-link v-if="isAuthor" to="/createMessage" class="navbar-item is-primary is-expanded is-hidden-desktop">
<i class="material-icons">add_circle</i>
</router-link>
@ -37,7 +37,7 @@ Vue.component('nav-router', {
<i class="material-icons">search</i> Search
</router-link></li>
<li><router-link to="/createMessage">
<li><router-link v-if="isAuthor" to="/createMessage">
<i class="material-icons">add_circle</i> Create Message
</router-link></li>
@ -53,6 +53,20 @@ Vue.component('nav-router', {
</div>
</div>
</div>`,
data: function() {
return {
isAuthor: this.isAuthorCheck(),
};
},
methods: {
isAuthorCheck: function() {
console.info(auth.roles.author === authorRole);
return (auth.roles.author === authorRole);
},
},
updated: function() {
this.isAuthorChecked();
}
});
const routes = [

30
public/routes/profil.js
View File

@ -2,22 +2,22 @@ const ProfilRouter = {
template: `
<div>
<div class="column pull-right-sm is-four-fifths-desktop">
<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-if="isAuth">
<profil-card></profil-card>
</div>
<div v-else>
<button class="button is-primary is-medium"
@click="isLPVisible = true">
Login
</button>
<b-modal :active.sync="isLPVisible"
@close-login-panel="closeLoginPanel"
@show-login-panel="showLoginPanel"
has-modal-card>
<login-panel></login-panel>
</b-modal>
</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>
</div>`,
data: function () {

11
public/routes/profilCard.js
View File

@ -18,15 +18,15 @@ Vue.component('profil-card', {
<hr class="first">
<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>
<button @click="isCardModalActive = true"><b>Abonniert: <br/>{{ abos }}</b> <br/></button>
<button @click="$router.push('/bookmark')"><b>Gespeichert:<br/> {{ bookmarks }}</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>
<p class="modal-card-title">Abonnierte Tags</p>
</header>
<div class="card-content">
<div class="content">
@ -51,8 +51,8 @@ Vue.component('profil-card', {
data: function () {
return {
auth: auth,
abo: 7,
saved: 3,
abos: auth.abos ? auth.abos.length : '-',
bookmarks: auth.bookmarks ? auth.bookmarks.length : '-',
isCardModalActive: false,
};
},
@ -75,6 +75,7 @@ Vue.component('profil-card', {
logout: function() {
clearAuthState();
$.ajax({ url: "api/logout", method: "POST" });
vueForceRender();
router.push('/profil');
},
}

24
server/authorization.js
View File

@ -12,6 +12,16 @@ const ldap = require ('./ldap_ohm'),
const serverVisibleSession = { user: true, name: true, type: true, mail: true, roles: true, gender: true, deactivated: true, host: true };
const clientVisibleSession = { user: true, name: true, type: true, mail: true, roles: true, gender: true };
// Return user role, query from found.mail
function getUserRole(found) {
var roles = "user";
var mail = found.mail;
if (!/\d/.test(mail)) {
// Mail contains no number
roles += ',"author"';
}
return roles;
}
// Fill in session object
function fillSession (req, user, roles, cb) {
@ -22,7 +32,7 @@ function fillSession (req, user, roles, cb) {
req.session.regenerate (function (err) {
if (user !== undefined && ! err) {
common.shallowCopy (user, serverVisibleSession, {roles: true}, req.session);
console.info(req.session);
// console.info(req.session);
if (user._id) {
req.session.user = user._id;
}
@ -37,7 +47,7 @@ function fillSession (req, user, roles, cb) {
// Save found user into DB, if not already exists
function saveFoundToDB(found, cb) {
console.info(found);
// console.info(found);
Users.findById(found.user)
.exec(function(err, result){
if (err) {
@ -52,15 +62,15 @@ function saveFoundToDB(found, cb) {
mail: found.mail,
type: found.type,
gender: found.gender,
// abos: '',
// bookmarks: '',
roles: 'user',
abos: '',
bookmarks: '',
roles: getUserRole(found),
}, function(err, done) {
if (err) {
console.error("User creation: Failed");
console.error(err);
} else {
console.info("New User created!");
console.info("User created: "+ found.user);
}
if (done == null) {
console.error("Can not create user.");
@ -158,7 +168,7 @@ const authorization = {
console.error(err);
}
});
console.info(req.session);
// console.info(req.session);
return res.json ({});
});
},