dan/Nertivia-Client
1
0
Fork 0
mirror of https://github.com/danbulant/Nertivia-Client synced 2026-05-22 21:59:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added 12 hour mode time option

Browse source
This commit is contained in:
supertiger1234 2019-11-24 15:33:23 +00:00
parent 4262a9a901
commit 7ea4d0e438
3 changed files with 46 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/app/MessageTemplate.vue
View file

@ -249,10 +249,11 @@ export default {
return file;
},
getDate() {
return friendlyDate(this.$props.date);
return friendlyDate(this.$props.date, this.apperance && this.apperance['12h_time'] ? '12h' : false);
},
getEditedDate() {
return friendlyDate(this.timeEdited);
return friendlyDate(this.timeEdited, this.apperance && this.apperance['12h_time'] ? '12h' : false);
},
userAvatar() {
return config.domain + "/avatars/" + this.$props.avatar;

25
src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
View file

@ -33,15 +33,20 @@
Options
</div>
<div class="switches">
<div
class="checkbox"
@click="toggleAppearance"
>
<div class="checkbox"
@click="toggleAppearance">
<div :class="`checkbox-box ${apperance && apperance.own_message_right && apperance.own_message_right === true ? 'selected' : '' }`" />
<div class="checkbox-name">
Show my messages on the right side.
</div>
</div>
<div class="checkbox"
@click="toggleTime">
<div :class="`checkbox-box ${apperance && apperance['12h_time'] && apperance['12h_time'] === true ? 'selected' : '' }`" />
<div class="checkbox-name">
Show time in 12 hour.
</div>
</div>
</div>
</div>
<div class="title">
@ -74,6 +79,14 @@ export default {
}
},
methods: {
toggleTime() {
if (!this.apperance || !this.apperance['12h_time'] || this.apperance['12h_time'] === false) {
this.$store.dispatch('settingsModule/setApperance', {"12h_time": true})
return SettingsService.setApperance("12h_time", true)
}
this.$store.dispatch('settingsModule/setApperance', {"12h_time": false})
SettingsService.setApperance("12h_time", false)
},
toggleAppearance() {
if (!this.apperance || !this.apperance.own_message_right || this.apperance.own_message_right === false) {
this.$store.dispatch('settingsModule/setApperance', {"own_message_right": true})
@ -93,6 +106,7 @@ export default {
margin: 20px;
user-select: none;
flex-shrink: 0;
flex-wrap: wrap;
}
.checkbox {
@ -106,6 +120,7 @@ export default {
margin: auto;
margin-right: 10px;
transition: 0.3s;
flex-shrink: 0;
}
.checkbox-box.selected {
@ -121,6 +136,8 @@ export default {
}
.checkbox-name {
max-width: 200px;
display: flex;
align-items: center;
}
.message-example{

30
src/utils/date.js
View file

@ -1,14 +1,14 @@
export default (miliseconds) => {
export default (miliseconds, type) => {
let friendlyDate = "";
const now = new Date();
const messageDate = new Date(miliseconds);
if (sameDay(now, messageDate)) {
friendlyDate = `Today at ${getFullTime(messageDate)}`
friendlyDate = `Today at ${getFullTime(messageDate, type)}`
} else if (yesterDay(now, messageDate)) {
friendlyDate = `Yesterday at ${getFullTime(messageDate)}`
friendlyDate = `Yesterday at ${getFullTime(messageDate, type)}`
} else {
friendlyDate = getFullDateWithTime(messageDate)
friendlyDate = getFullDateWithTime(messageDate, type)
}
return friendlyDate;
}
@ -24,7 +24,10 @@ function yesterDay(d1, d2) {
(d1.getDate() - d2.getDate()) == 1
}
function getFullTime(date){
function getFullTime(date, type){
if (type === "12h") {
return formatAMPM(date);
}
let finalTime = ""
let hours = date.getHours();
let minutes = date.getMinutes()
@ -43,11 +46,22 @@ function getFullTime(date){
return finalTime;
}
function getFullDateWithTime(date) {
function getFullDateWithTime(date, type) {
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const dayName = days[date.getDay()];
const monthName = months[date.getMonth()];
return `${dayName} ${date.getDate()} ${monthName} ${date.getFullYear()} at ${getFullTime(date)}`
return `${dayName} ${date.getDate()} ${monthName} ${date.getFullYear()} at ${getFullTime(date, type)}`
}
}
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}