Skip to content
Snippets Groups Projects
Commit 88f8c8fb authored by Titus Netland's avatar Titus Netland
Browse files

Everything linted/reformatted to "prettier" rules

parent 510214fc
Branches
No related tags found
1 merge request!49Everything linted/reformatted to "prettier" rules
Pipeline #177554 passed
Stage: setup
Stage: test
Show whitespace changes
Inline Side-by-side
Showing
with 349 additions and 302 deletions
src/components/CreateNewGroup.vue
+ 1
− 3
View file @ 88f8c8fb
......@@ -351,8 +351,6 @@ export default {
const postCreatedGroup = await postNewgroup(groupInfo);
console.log(postCreatedGroup);
}
},
addImage: function (event) {
......@@ -362,6 +360,6 @@ export default {
this.imageThere = true;
console.log("image: " + this.imageThere);
},
}
},
};
</script>
src/components/LoginForm.vue
+ 5
− 5
View file @ 88f8c8fb
<template>
<div class="max-w-md p-6 mx-auto rounded-md shadow-lg mt-16">
<div class="flex justify-center text-2xl">Logg inn</div>
<div
id="emailField"
......@@ -72,7 +70,9 @@
<div id="buttonsField" class="m-6">
<div class="align-items: flex-end; mb-6">
<div class="ml-3 text-sm">
<router-link to="/resetPassword" class="text-blue-600 flex justify-end"
<router-link
to="/resetPassword"
class="text-blue-600 flex justify-end"
>Glemt passord</router-link
>
</div>
......
src/components/NewPasswordForm.vue
+ 1
− 2
View file @ 88f8c8fb
......@@ -2,7 +2,6 @@
<div
class="w-full max-w-sm p-6 m-auto bg-white rounded-md shadow-md dark:bg-gray-800 mt-8"
>
<div
id="firstPasswordField"
:class="{ error: v$.user.password.$errors.length }"
......
src/components/chat/ChatMessage.vue
+ 48
− 39
View file @ 88f8c8fb
<template>
<div v-bind:class="'w-full break-words flex ' + side()">
<div style="max-width: 70%" v-bind:class="this.color() + ' rounded px-5 py-2 my-2 relative ' + this.textColor() ">
<span class="block">{{this.message.content}} {{this.message.from}}</span>
<div
style="max-width: 70%"
v-bind:class="
this.color() + ' rounded px-5 py-2 my-2 relative ' + this.textColor()
"
>
<span class="block"
>{{ this.message.content }} {{ this.message.from }}</span
>
<span class="block text-xs text-right">{{ this.calculateTime() }}</span>
</div>
</div>
......@@ -12,17 +19,17 @@ import {parseCurrentUser} from "@/utils/token-utils";
export default {
props: {
message: Object
message: Object,
},
data() {
return {
abc: "abcde"
}
abc: "abcde",
};
},
computed: {
userID() {
return parseCurrentUser().accountId;
}
},
},
methods: {
color() {
......@@ -33,7 +40,9 @@ export default {
return this?.message.from == this.userID ? "text-gray-900" : "text-white";
},
side() {
return this?.message.from == this.userID ? "justify-start" : "justify-end"
return this?.message.from == this.userID
? "justify-start"
: "justify-end";
},
calculateTime() {
//let time = this.message.from;
......@@ -41,9 +50,9 @@ export default {
let date = new Date(Date.now());
let hours = date.getHours();
let minutes = "0" + date.getMinutes();
let formattedTime = hours + ':' + minutes.substr(-2);
let formattedTime = hours + ":" + minutes.substr(-2);
return formattedTime;
}
}
}
},
},
};
</script>
src/components/chat/ChatProfile.vue
+ 25
− 19
View file @ 88f8c8fb
<template>
<a
v-on:click="selectUser" class="hover:bg-gray-100 border-b border-gray-300 px-3 py-2 cursor-pointer flex items-center text-sm focus:outline-none focus:border-gray-300 transition duration-150 ease-in-out"
v-on:click="selectUser"
class="hover:bg-gray-100 border-b border-gray-300 px-3 py-2 cursor-pointer flex items-center text-sm focus:outline-none focus:border-gray-300 transition duration-150 ease-in-out"
>
<img
class="h-10 w-10 rounded-full object-cover"
......@@ -9,10 +10,12 @@
/>
<div class="w-full pb-2">
<div class="flex justify-between">
<span class="block ml-2 font-semibold text-base text-gray-600"
>{{name}}</span
>
<span class="block ml-2 text-sm text-gray-600">{{lastMessageTime}}</span>
<span class="block ml-2 font-semibold text-base text-gray-600">{{
name
}}</span>
<span class="block ml-2 text-sm text-gray-600">{{
lastMessageTime
}}</span>
</div>
<span class="block ml-2 text-sm text-gray-600">{{ lastMessage }}</span>
</div>
......@@ -25,30 +28,33 @@ export default {
props: {
conversation: {
type: Object,
required: true
required: true,
},
recipient: Function
recipient: Function,
},
data: () => {
return {
};
return {};
},
computed: {
lastMessage() {
return this.conversation.lastMessage.content;
},
name() {
return this.conversation.recipient.firstName + " " + this.conversation.recipient.lastName;
return (
this.conversation.recipient.firstName +
" " +
this.conversation.recipient.lastName
);
},
lastMessageTime() {
return "5 min";
}
},
},
methods: {
selectUser() {
console.log(this.conversation.recipient.userId)
console.log(this.conversation.recipient.userId);
this.$emit("recipient", this.conversation.recipient.userId);
}
}
},
},
};
</script>
src/components/chat/CurrentChat.vue
+ 134
− 102
View file @ 88f8c8fb
......@@ -8,31 +8,51 @@
<div class="w-8 h-0.5 bg-gray-600"></div>
</div>
<div class="relative flex items-center p-3">
<img class="object-cover w-10 h-10 rounded-full"
<img
class="object-cover w-10 h-10 rounded-full"
src="https://www.mintface.xyz/content/images/2021/08/QmTndiF423kjdXsNzsip1QQkBQqDuzDhJnGuJAXtv4XXiZ-1.png"
alt="{{name}}" />
alt="{{name}}"
/>
<span class="block ml-2 font-bold text-gray-600">{{ name }}</span>
</div>
<div></div>
</div>
<div class="relative w-full p-6 overflow-y-auto" style="max-height: 400px">
<div
class="relative w-full p-6 overflow-y-auto"
style="max-height: 400px"
>
<ul class="space-y-2">
<div>
<ChatMessage v-for="(message, i) in messages" v-bind:key="i" :message="message"></ChatMessage>
<ChatMessage
v-for="(message, i) in messages"
v-bind:key="i"
:message="message"
></ChatMessage>
</div>
</ul>
</div>
<div class="flex items-center justify-between w-full p-3 border-t border-gray-300">
<input type="text" placeholder="Message"
<div
class="flex items-center justify-between w-full p-3 border-t border-gray-300"
>
<input
type="text"
placeholder="Message"
class="block w-full py-2 pl-4 mx-3 bg-gray-100 rounded-full outline-none focus:text-gray-700"
name="message" v-model="message" />
<button v-on:click="sendMessage" style="padding: 10px; color: red;">
<svg class="w-5 h-5 text-gray-500 origin-center transform rotate-90"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
name="message"
v-model="message"
/>
<button v-on:click="sendMessage" style="padding: 10px; color: red">
<svg
class="w-5 h-5 text-gray-500 origin-center transform rotate-90"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"
/>
</svg>
</button>
</div>
......@@ -41,11 +61,10 @@
</template>
<script>
import ChatMessage from "./ChatMessage.vue"
import axios from 'axios';
import ChatMessage from "./ChatMessage.vue";
import axios from "axios";
import { parseCurrentUser } from "@/utils/token-utils";
import ws from '@/services/ws';
import ws from "@/services/ws";
export default {
props: {
......@@ -54,13 +73,12 @@ export default {
data: () => {
return {
messages: [],
message: ""
message: "",
};
},
components: { ChatMessage },
computed: {
userid() {
return parseCurrentUser().accountId;
},
recipientID() {
......@@ -68,54 +86,68 @@ export default {
},
name() {
return this.recipient.firstName + " " + this.recipient.lastName;
}
},
},
methods: {
calculateSide(from) {
return from == this.userid ? 'end' : 'start'
return from == this.userid ? "end" : "start";
},
async sendMessage() {
const token = this.$store.state.user.token;
await axios.post(process.env.VUE_APP_BASEURL + `chats/users/${this.recipientID}/messages`, {
message: this.message
}, {
await axios.post(
process.env.VUE_APP_BASEURL +
`chats/users/${this.recipientID}/messages`,
{
message: this.message,
},
{
headers: {
Authorization: `Bearer ${token}`
Authorization: `Bearer ${token}`,
},
}
})
);
this.message = "";
ws.sendMessage({ sender: parseInt(this.userid), recipient: this.recipientID });
ws.sendMessage({
sender: parseInt(this.userid),
recipient: this.recipientID,
});
this.reloadMessages();
},
async reloadMessages() {
const token = this.$store.state.user.token;
const response = await fetch(`${process.env.VUE_APP_BASEURL}chats/users/${this.recipientID}/messages`, {
const response = await fetch(
`${process.env.VUE_APP_BASEURL}chats/users/${this.recipientID}/messages`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`
Authorization: `Bearer ${token}`,
},
}
})
);
this.messages = await response.json()
}
this.messages = await response.json();
},
},
async created() {
const token = this.$store.state.user.token;
// Fetch /chats/users/{userId}/messages from api
const response = await fetch(`${process.env.VUE_APP_BASEURL}chats/users/${this.recipientID}/messages`, {
const response = await fetch(
`${process.env.VUE_APP_BASEURL}chats/users/${this.recipientID}/messages`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`
Authorization: `Bearer ${token}`,
},
}
});
);
ws.on("NEW_MESSAGE", () => {
this.reloadMessages();
})
});
this.messages = await response.json()
}
}
this.messages = await response.json();
},
};
</script>
src/main.js
+ 3
− 6
View file @ 88f8c8fb
......@@ -3,10 +3,7 @@ import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./index.css";
import ws from './services/ws';
import ws from "./services/ws";
createApp(App)
.use(router)
.use(store)
.mount("#app");
createApp(App).use(router).use(store).mount("#app");
console.log("WS", ws.test);
src/services/ws.js
+ 66
− 69
View file @ 88f8c8fb
......@@ -5,30 +5,29 @@ import {parseCurrentUser} from "@/utils/token-utils";
// Create a Singleton function
// Events fired by websocket, MESSAGE
const ws = (function () {
// Object of all injected functions that the client may want
const handlers = {};
const fire = function (event, data) {
if (handlers[event]) {
handlers[event](data)
handlers[event](data);
}
};
const onMessageReceived = (payload) => {
const data = JSON.parse(payload.body);
console.log("New message!")
console.log("New message!");
// Fire message event
fire("MESSAGE", JSON.parse(payload.body));
if(data.status == "NEW_MESSAGE") fire("NEW_MESSAGE", JSON.parse(payload.body));
if (data.status == "NEW_MESSAGE")
fire("NEW_MESSAGE", JSON.parse(payload.body));
console.log("Received message: " + payload);
}
};
const onConnected = () => {
console.log("Websocket Connected");
stompClient.subscribe(
"/user/" + parseCurrentUser().accountId + "/queue/messages",
......@@ -36,17 +35,12 @@ const ws = (function () {
);
};
const onError = () => {
};
const onError = () => {};
let stompClient = Stomp.over(SockJS);
stompClient.connect({}, onConnected, onError);
return {
on: function (event, callback) {
handlers[event] = callback;
......@@ -63,17 +57,20 @@ const ws = (function () {
}
},
sendMessage: ({ sender, recipient, status }) => {
if(status) console.log(status)
stompClient.send("/app/chat", {}, JSON.stringify({
if (status) console.log(status);
stompClient.send(
"/app/chat",
{},
JSON.stringify({
from: sender,
to: recipient,
id: null,
status: "NEW_MESSAGE"
}));
status: "NEW_MESSAGE",
})
);
},
test: true
}
test: true,
};
})();
export default ws;
src/utils/apiutil.js
+ 1
− 1
View file @ 88f8c8fb
src/views/ChatView.vue
+ 63
− 52
View file @ 88f8c8fb
......@@ -5,11 +5,20 @@
<ul class="hidden sm:block overflow-auto h-full">
<h2 class="my-2 mb-2 ml-2 text-lg text-gray-600">Chats</h2>
<li>
<ChatProfile v-for="(conversation, i) in conversations" :conversation="conversation" :key="i" @recipient="selectUser"></ChatProfile>
<ChatProfile
v-for="(conversation, i) in conversations"
:conversation="conversation"
:key="i"
@recipient="selectUser"
></ChatProfile>
</li>
</ul>
</div>
<CurrentChat v-if="selected" :recipient="selected" :key="key"></CurrentChat>
<CurrentChat
v-if="selected"
:recipient="selected"
:key="key"
></CurrentChat>
</div>
</div>
</template>
......@@ -22,12 +31,12 @@ import {parseCurrentUser} from "@/utils/token-utils";
export default {
components: {
ChatProfile,
CurrentChat
CurrentChat,
},
data() {
return {
conversations: null,
selected: null
selected: null,
};
},
computed: {
......@@ -36,17 +45,19 @@ export default {
},
key() {
return this.selected.userId || "ERROR";
}
},
},
methods: {
selectUser(value) {
const userid = value
this.conversations.find(conversation => {
const userid = value;
this.conversations.find((conversation) => {
return conversation.recipient.userId == userid;
})
this.selected = this.conversations.find(conversation => conversation.recipient.userId == userid).recipient;
console.log(this.selected)
}
});
this.selected = this.conversations.find(
(conversation) => conversation.recipient.userId == userid
).recipient;
console.log(this.selected);
},
},
async created() {
const token = this.$store.state.user.token;
......@@ -55,11 +66,11 @@ export default {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`
}
}) // TODO add error handling
Authorization: `Bearer ${token}`,
},
}); // add error handling
const res = await response.json();
this.conversations = res;
}
}
},
};
</script>
src/views/GroupHomeView.vue
+ 2
− 4
View file @ 88f8c8fb
......@@ -9,9 +9,7 @@ export default {
components: {
GroupHome,
},
}
};
</script>
<style scoped>
</style>
<style scoped></style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment