undefined room fix

update_chat
adb 4 years ago
parent f39699479e
commit d16d7153e3

983
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -10,6 +10,9 @@
"dependencies": { "dependencies": {
"core-js": "^3.6.5", "core-js": "^3.6.5",
"matrix-js-sdk": "^9.1.0", "matrix-js-sdk": "^9.1.0",
"sass": "^1.29.0",
"sass-loader": "^10.1.0",
"v-emoji-picker": "^2.3.1",
"vue": "^2.6.11", "vue": "^2.6.11",
"ws": "^7.3.1" "ws": "^7.3.1"
}, },
@ -19,8 +22,13 @@
"@vue/cli-service": "~4.5.0", "@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"electron": "^11.0.1", "electron": "^11.0.1",
"eslint": "^6.7.2", "eslint": "^7.14.0",
"eslint-plugin-vue": "^6.2.2", "eslint-config-airbnb-base": "^14.2.1",
"eslint-config-standard": "^16.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-vue": "^7.2.0",
"vue-router": "^3.4.9", "vue-router": "^3.4.9",
"vue-template-compiler": "^2.6.11" "vue-template-compiler": "^2.6.11"
}, },

@ -39,6 +39,12 @@ export default {
let msgContainer = document.getElementById("messagesContainer") let msgContainer = document.getElementById("messagesContainer")
msgContainer.style.height msgContainer.style.height
= `calc(100% - ${id.parentElement.clientHeight}px - 3rem)` = `calc(100% - ${id.parentElement.clientHeight}px - 3rem)`
},
toggleEmojiPicker() {
this.showEmojiPicker= !this.showEmojiPicker;
},
onSelectEmoji(emoji) {
this.msg.content.body += emoji.data;
} }
}, },
data(){ data(){
@ -51,7 +57,8 @@ export default {
} }
}, },
chatroom: main.data().chatroom, chatroom: main.data().chatroom,
session: matrix.data().session session: matrix.data().session,
showEmojiPicker: false
} }
} }
} }

@ -1,81 +1,81 @@
import Vue from 'vue' import Vue from "vue"
import VueRouter from 'vue-router' import VueRouter from "vue-router"
import App from './App.vue' import App from "./App.vue"
import login from './views/login.vue' import login from "./views/login.vue"
import chat from './views/chat.vue' import chat from "./views/chat.vue"
import rooms from './views/rooms.vue' import rooms from "./views/rooms.vue"
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(VueRouter) Vue.use(VueRouter)
const router = new VueRouter({ const router = new VueRouter({
routes: [ routes: [
{ {
path: '/', path: "/",
name: 'home', name: "home",
component: login component: login
}, },
{ {
path: '/login', path: "/login",
name: 'login', name: "login",
component: login component: login
}, },
{ {
path: '/chat/*', path: "/chat/*",
name: 'chat', name: "chat",
component: chat component: chat
}, },
{ {
path: '/rooms/*', path: "/rooms/*",
name: 'room', name: "room",
component: rooms component: rooms
}, },
{ {
path: '/rooms', path: "/rooms",
name: 'rooms', name: "rooms",
component: rooms component: rooms
} }
] ]
}) })
let chatroom = { let chatroom = {
name: "open chat", name: "open chat",
user: [], user: [],
username: "you", username: "you",
messages: [] messages: []
}; }
export default { export default {
data(){ data(){
return { return {
chatroom: chatroom chatroom: chatroom
} }
},
methods: {
error(msg){
show_error(msg)
}, },
router(route){router.push(route)} methods: {
} error(msg){
show_error(msg)
},
router(route){router.push(route)}
}
} }
new Vue({ new Vue({
el: '#app', el: "#app",
router, router,
template: '<App/>', template: "<App/>",
components: {App}, components: {App},
data(){ data(){
return { return {
chatroom: chatroom chatroom: chatroom
}
} }
} }).$mount("#app")
}).$mount('#app')
function element(id){ return document.getElementById(id)} function element(id){ return document.getElementById(id)}
function show_error(msg) { function show_error(msg) {
let error_style = element('errorBox').style let error_style = element("errorBox").style
element('errorMessage').innerText = msg element("errorMessage").innerText = msg
error_style.display = "block" error_style.display = "block"
error_style.animation = "slide-from-left alternate 0.2s" error_style.animation = "slide-from-left alternate 0.2s"
setTimeout(() => {error_style.animation = ""}, 200) setTimeout(() => {error_style.animation = ""}, 200)
} }

@ -1,159 +1,170 @@
import matrix from 'matrix-js-sdk'; import matrix from 'matrix-js-sdk';
import main from '@/main.js'; import main from '@/main.js';
//import Vue from 'vue'; // import Vue from 'vue';
var matrix_cli = matrix.createClient({ const client = matrix.createClient({
baseUrl: "https://adb.sh", baseUrl: 'https://adb.sh',
accessToken: getCookie("accessToken"), accessToken: getCookie('accessToken'),
userId: getCookie("userId") userId: getCookie('userId'),
}) });
let session = { let session = {
user: "", user: '',
password: "", password: '',
accessToken: "", accessToken: '',
rooms: [], rooms: [],
currentRoom: undefined, currentRoom: undefined,
login:{ login: {
user: "", user: '',
password: "" password: '',
} },
}; };
console.log(document.cookie) console.log(document.cookie);
if (getCookie("accessToken") && getCookie("userId")){ if (getCookie('accessToken') && getCookie('userId')) {
document.cookie = `expires=${ new Date(Date.now()+86400*10*1000)}`; document.cookie = `expires=${new Date(Date.now() + 86400 * 10 * 1000)}`;
session = { session = {
user: getCookie("userId"), user: getCookie('userId'),
password: "", password: '',
accessToken: getCookie("accessToken"), accessToken: getCookie('accessToken'),
rooms: [], rooms: [],
currentRoom: undefined currentRoom: undefined,
}; };
//Vue.$router.push("/rooms/") // Vue.$router.push("/rooms/")
window.location.href = '/#/rooms/'; window.location.href = '/#/rooms/';
matrix_cli.startClient(); client.startClient();
matrix_cli.once('sync', function (state){ client.once('sync', (state) => {
console.log(state) console.log(state);
}) });
} } else window.location.href = '/#/login';
else window.location.href = '/#/login';
export default { export default {
data(){ data() {
return { return {
session: session session,
};
},
methods: {
login() {
if (session.accessToken !== '') {
main.methods.error('you are already logged in');
return;
} if (session.login.user === '') {
main.methods.error('username is empty');
return;
} if (session.login.password === '') {
main.methods.error('password is empty');
return;
} if (!(session.login.user.includes('@') && session.login.user.includes(':'))) {
main.methods.error('username is in wrong style');
return;
}
client.login('m.login.password', {
user: session.login.user,
password: session.login.password,
initial_device_display_name: 'matrix chat',
}).then((response) => {
document.cookie = `accessToken=${response.access_token}`;
document.cookie = `userId=${session.login.user}`;
document.cookie = `max-expires=${new Date(Date.now() + 86400 * 10 * 1000)}`;
session = {
user: session.login.user,
password: '',
accessToken: response.access_token,
rooms: [],
currentRoom: undefined,
};
console.log(`access token => ${response.access_token}`);
if (response.error) {
main.methods.error(response.error);
console.log(`login error => ${response.error}`);
} }
window.location.href = '/#/rooms/';
client.startClient();
client.once('sync', (state) => {
console.log(state);
});
});
}, },
methods: { sendMessage(msg) {
login(){ const msgSend = {
if (session.accessToken !== ""){ type: msg.type,
main.methods.error("you are already logged in") content: {
return; body: msg.content.body,
} else if (session.login.user === ""){ msgtype: msg.content.msgtype,
main.methods.error('username is empty')
return;
} else if (session.login.password === ""){
main.methods.error('password is empty')
return;
} else if (!(session.login.user.includes("@") && session.login.user.includes(":"))){
main.methods.error('username is in wrong style')
return;
}
matrix_cli.login("m.login.password", {
user: session.login.user,
password: session.login.password,
initial_device_display_name: "matrix chat",
}).then((response) => {
document.cookie = `accessToken=${response.access_token}`;
document.cookie = `userId=${session.login.user}`;
document.cookie = `max-expires=${ new Date(Date.now()+86400*10*1000)}`;
session = {
user: session.login.user,
password: "",
accessToken: response.access_token,
rooms: [],
currentRoom: undefined
};
console.log(`access token => ${response.access_token}`);
if (response.error){
main.methods.error(response.error)
console.log(`login error => ${response.error}`)
}
window.location.href = '/#/rooms/';
matrix_cli.startClient();
matrix_cli.once('sync', function (state){
console.log(state)
})
});
}, },
sendMessage(msg){ };
let msgSend = { client.sendEvent(session.currentRoom.roomId, msgSend.type, msgSend.content, '').then(() => {
type: msg.type, console.log('message sent successfully');
content: { }).catch((err) => {
body: msg.content.body, console.log(`error while sending message => ${err}`);
msgtype: msg.content.msgtype main.methods.error('message could not be sent');
} });
} },
matrix_cli.sendEvent(session.currentRoom.roomId, msgSend.type, msgSend.content, "").then(()=>{ },
console.log("message sent successfully") };
}).catch(err => {
console.log(`error while sending message => ${err}`)
main.methods.error("message could not be sent")
})
}
}
}
function getCookie(key) { function getCookie(key) {
let cookie = document.cookie.replace(/ /g, '').split(';') const cookie = document.cookie.replace(/ /g, '').split(';')
.find(cookie => cookie.split('=')[0] === key); .find((cookie) => cookie.split('=')[0] === key);
return cookie?cookie.split('=')[1]:false; return cookie ? cookie.split('=')[1] : false;
} }
matrix_cli.on("event", event => { client.on('event', (event) => {
console.log(event.getType()); console.log(event.getType());
console.log(event); console.log(event);
if (event.getType() === "m.room.name") { if (event.getType() === 'm.room.name') {
matrix_cli.getRooms().forEach(newRoom => { client.getRooms().forEach((newRoom) => {
let room = session.rooms.find(room => room.roomId === newRoom.roomId) const room = session.rooms.find((room) => room.roomId === newRoom.roomId);
if (!room) { if (!room) {
session.rooms.push({name: newRoom.name, roomId: newRoom.roomId, messages: [], members: []}) session.rooms.push({
console.log(`new room => ${newRoom.name}`) name: newRoom.name, roomId: newRoom.roomId, messages: [], members: [],
} else if (room.name !== newRoom.name) { });
console.log(`roomname changed from ${room.name} to ${newRoom.name}`) console.log(`new room => ${newRoom.name}`);
room.name = newRoom.name } else if (room.name !== newRoom.name) {
} console.log(`roomname changed from ${room.name} to ${newRoom.name}`);
}) room.name = newRoom.name;
} }
else if (event.getType() === "m.room.member"){ });
let room = session.rooms.find(room => room.roomId === event.event.room_id) } else if (event.getType() === 'm.room.member') {
if (!room) { const room = session.rooms.find((room) => room.roomId === event.event.room_id);
session.rooms.push({name: "undefined", roomId: event.event.room_id, messages: [], members: []}) if (!room) {
console.log(`new user => ${event.event.sender}`) session.rooms.push({
} else { name: 'undefined', roomId: event.event.room_id, messages: [], members: [],
room.members.push({sender: event.event.sender, content: event.event.content}) });
} console.log(`new user => ${event.event.sender}`);
} else {
room.members.push({ sender: event.event.sender, content: event.event.content });
} }
console.log(session) }
}) console.log(session);
});
matrix_cli.on("Room.timeline", event => { client.on('Room.timeline', (event, room) => {
if (event.getType() === "m.room.message") { if (event.getType() === 'm.room.message') {
console.log(`new message => ${event.event.content.body}`); console.log(`message => ${event.event.content.body}`);
let room = session.rooms.find(room => room.roomId === event.event.room_id) const thisRoom = session.rooms.find((thisRoom) => thisRoom.roomId === room.roomId);
if (!room) { if (!thisRoom) {
session.rooms.push({name: "undefined", roomId: event.event.room_id, messages: [event.event], members: []}) session.rooms.push({
console.log(`undefined room name for => ${event.event.room_id}`) name: room.name, roomId: event.event.room_id, messages: [event.event], members: [],
} else room.messages.push(event.event) });
} else {
thisRoom.messages.push(event.event);
if (thisRoom.name === 'undefined') thisRoom.name = room.name;
}
let msgContainer = document.getElementById("messagesContainer") const msgContainer = document.getElementById('messagesContainer');
if (session.currentRoom && session.currentRoom.roomId === event.event.room_id) { if (session.currentRoom && session.currentRoom.roomId === room.roomId) {
if (event.event.sender === session.user || msgContainer.scrollHeight < msgContainer.scrollTop + 1000) if (event.event.sender === session.user || msgContainer.scrollHeight < msgContainer.scrollTop + 1000) {
setTimeout(() => { setTimeout(() => {
msgContainer.scrollTo(0, msgContainer.scrollHeight) msgContainer.scrollTo(0, msgContainer.scrollHeight);
}, 10) }, 10);
else document.getElementById("scrollDown").style.display = "block" } else document.getElementById('scrollDown').style.display = 'block';
}
} }
}
});
client.on('Room.member', (member) => {
console.log('this is a member');
console.log(member);
}); });

@ -44,7 +44,7 @@ export default {
}, },
getTime(time){ getTime(time){
let date = new Date(time); let date = new Date(time);
return `${date.getHours()}:${(date.getMinutes()<10)?"0"+date.getMinutes():date.getMinutes()}`; return `${date.getHours()}:${(date.getMinutes()<10)?"0":""}${date.getMinutes()}`;
}, },
getDate(time){ getDate(time){
let months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; let months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

Loading…
Cancel
Save