421 lines
11 KiB
JavaScript
421 lines
11 KiB
JavaScript
import vehheader from './components/header/index.js';
|
|
import vehshopleft from './components/vehshopleft/index.js';
|
|
import vehshopright from './components/vehshopright/index.js';
|
|
import vehicleslist from './components/vehicleslist/index.js';
|
|
import bill from './components/bill/index.js';
|
|
import bossmenu from './components/bossmenu/index.js';
|
|
import adminmenu from './components/adminmenu/index.js';
|
|
|
|
const vuexstore = Vuex.createStore({
|
|
state: {
|
|
selectedCategory: false,
|
|
viewMode: false,
|
|
showBill: false,
|
|
page: '',
|
|
jobData: false,
|
|
vehicleshopData: false,
|
|
ranks: [],
|
|
bossmenuPage: 1,
|
|
stockMarketCategories: [],
|
|
stockMarketVehicles: [],
|
|
selectedVehicleShop: {},
|
|
selectedVehicle: false,
|
|
currency: '',
|
|
notification: {
|
|
type: false,
|
|
text: false,
|
|
},
|
|
notificationTimeout: false,
|
|
pdmFee: 1000,
|
|
customPlateFee: 20,
|
|
adminMenuVehicleshops: [],
|
|
billPage: 1,
|
|
vehicleshops: [],
|
|
enableCustomPlate: false,
|
|
locales: {},
|
|
playerName: '',
|
|
},
|
|
mutations: {
|
|
setCurrency(state, payload) {
|
|
state.currency = payload;
|
|
},
|
|
setPlayerName(state, payload) {
|
|
state.playerName = payload;
|
|
},
|
|
setLocales(state, payload) {
|
|
state.locales = payload;
|
|
},
|
|
setBillPage(state, payload) {
|
|
state.billPage = payload;
|
|
if (!payload) {
|
|
state.selectedVehicle = false;
|
|
}
|
|
},
|
|
setCustomPlateFee(state, payload) {
|
|
state.customPlateFee = payload;
|
|
},
|
|
setAdminMenuVehicleshops(state, payload) {
|
|
state.adminMenuVehicleshops = payload;
|
|
},
|
|
setPdmFee(state, payload) {
|
|
state.pdmFee = payload;
|
|
},
|
|
createNotification(state, payload) {
|
|
if (!payload.text || !payload.type) {
|
|
return;
|
|
}
|
|
if (payload.type != 'error' && payload.type != 'success') {
|
|
payload.type = 'success';
|
|
}
|
|
if (state.notification.text) {
|
|
clearTimeout(state.notificationTimeout);
|
|
}
|
|
|
|
state.notification = payload;
|
|
state.notificationTimeout = setTimeout(() => {
|
|
state.notification.type = false;
|
|
state.notification.text = false;
|
|
}, 3000);
|
|
},
|
|
setViewMode(state, payload) {
|
|
if(payload && !state.selectedVehicle){
|
|
return
|
|
}
|
|
state.viewMode = payload;
|
|
if (!payload) {
|
|
postNUI('setVehicleHeader');
|
|
}
|
|
},
|
|
setSelectedVehicle(state, payload) {
|
|
if (payload && payload.model == state.selectedVehicle.model) {
|
|
state.selectedVehicle = false;
|
|
} else {
|
|
state.selectedVehicle = payload;
|
|
}
|
|
},
|
|
setSelectedVehicleShop(state, payload) {
|
|
state.selectedVehicleShop = payload;
|
|
},
|
|
setStockMarketCategories(state, payload) {
|
|
state.stockMarketCategories = payload;
|
|
},
|
|
setStockMarketVehicles(state, payload) {
|
|
state.stockMarketVehicles = payload;
|
|
},
|
|
setBossMenuPage(state, payload) {
|
|
state.bossmenuPage = payload;
|
|
},
|
|
setShowBill(state, payload) {
|
|
state.showBill = payload;
|
|
},
|
|
setRanks(state, payload) {
|
|
state.ranks = payload;
|
|
},
|
|
setPage(state, payload) {
|
|
state.page = payload;
|
|
},
|
|
setJobData(state, payload) {
|
|
state.jobData = payload;
|
|
},
|
|
setVehicleShopData(state, payload) {
|
|
state.vehicleshopData = payload;
|
|
},
|
|
setSelectedCategory(state, payload) {
|
|
state.selectedCategory = payload;
|
|
if (!payload) {
|
|
state.selectedVehicle = false;
|
|
}
|
|
},
|
|
setEnableCustomPlate(state, payload) {
|
|
state.enableCustomPlate = payload;
|
|
},
|
|
},
|
|
});
|
|
|
|
const app = Vue.createApp({
|
|
data: () => ({
|
|
testMode: false,
|
|
remainTestTime: 0,
|
|
showOfferRequest: false,
|
|
offerData: {
|
|
id: false,
|
|
position: false,
|
|
salary: false,
|
|
},
|
|
jobOfferModal: false,
|
|
}),
|
|
components: {
|
|
vehheader,
|
|
vehshopleft,
|
|
vehshopright,
|
|
vehicleslist,
|
|
bill,
|
|
bossmenu,
|
|
adminmenu,
|
|
},
|
|
methods: {
|
|
...Vuex.mapMutations({
|
|
setCurrency: 'setCurrency',
|
|
setPage: 'setPage',
|
|
setJobData: 'setJobData',
|
|
setVehicleShopData: 'setVehicleShopData',
|
|
setRanks: 'setRanks',
|
|
setStockMarketVehicles: 'setStockMarketVehicles',
|
|
setStockMarketCategories: 'setStockMarketCategories',
|
|
setSelectedVehicleShop: 'setSelectedVehicleShop',
|
|
setSelectedVehicle: 'setSelectedVehicle',
|
|
setViewMode: 'setViewMode',
|
|
createNotification: 'createNotification',
|
|
setShowBill: 'setShowBill',
|
|
setPdmFee: 'setPdmFee',
|
|
setCustomPlateFee: 'setCustomPlateFee',
|
|
setAdminMenuVehicleshops: 'setAdminMenuVehicleshops',
|
|
setEnableCustomPlate: 'setEnableCustomPlate',
|
|
setSelectedCategory: 'setSelectedCategory',
|
|
setLocales: 'setLocales',
|
|
setPlayerName: 'setPlayerName',
|
|
}),
|
|
testVehicle() {
|
|
if (!this.selectedVehicle) {
|
|
this.createNotification({
|
|
type: 'error',
|
|
text: 'Select a vehicle first!',
|
|
});
|
|
return;
|
|
}
|
|
postNUI('testVehicle', this.selectedVehicle);
|
|
this.testMode = true;
|
|
},
|
|
checkPermission(name) {
|
|
return this.jobData.permissions[name] || this.isBoss;
|
|
},
|
|
numberWithSpaces(x) {
|
|
if (!isNaN(x)) {
|
|
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
}
|
|
return 'NaN';
|
|
},
|
|
acceptOffer() {
|
|
postNUI('acceptOffer', this.offerData.id);
|
|
this.offerData = {
|
|
id: false,
|
|
position: false,
|
|
salary: false,
|
|
};
|
|
this.jobOfferModal = false;
|
|
postNUI('unfocus');
|
|
},
|
|
messageHandler(event) {
|
|
switch (event.data.action) {
|
|
case 'checkNui':
|
|
postNUI('loaded');
|
|
break;
|
|
case 'openBossMenu':
|
|
this.openBossMenu();
|
|
break;
|
|
case 'openAdminMenu':
|
|
this.openAdminMenu();
|
|
break;
|
|
case 'setPlayerName':
|
|
this.setPlayerName(event.data.payload);
|
|
break;
|
|
case 'SetSelectedVehicleShop':
|
|
this.setSelectedVehicleShop(event.data.payload);
|
|
break;
|
|
case 'setJobData':
|
|
this.setJobData(event.data.payload);
|
|
break;
|
|
case 'setCurrency':
|
|
this.setCurrency(event.data.payload);
|
|
break;
|
|
case 'showJobOfferModal':
|
|
this.jobOfferModal = true;
|
|
break;
|
|
case 'openVehicleShop':
|
|
this.openVehicleshop();
|
|
break;
|
|
case 'showOfferRequest':
|
|
this.showOfferRequest = true;
|
|
this.offerData = event.data.payload;
|
|
break;
|
|
case 'closeOfferRequest':
|
|
this.showOfferRequest = false;
|
|
break;
|
|
case 'createNotification':
|
|
this.createNotification(event.data.payload);
|
|
break;
|
|
case 'setVehicleShopData':
|
|
this.setVehicleShopData(event.data.payload);
|
|
break;
|
|
case 'setRanks':
|
|
this.setRanks(event.data.payload);
|
|
break;
|
|
case 'setStockMarketCategories':
|
|
this.setStockMarketCategories(event.data.payload);
|
|
break;
|
|
case 'setLocales':
|
|
this.setLocales(event.data.payload);
|
|
break;
|
|
case 'setAdminMenuVehicleShops':
|
|
this.setAdminMenuVehicleshops(event.data.payload);
|
|
break;
|
|
case 'setStockMarketVehicles':
|
|
this.setStockMarketVehicles(event.data.payload);
|
|
break;
|
|
case 'setEnableCustomPlate':
|
|
this.setEnableCustomPlate(event.data.payload);
|
|
break;
|
|
case 'setRemainTestTime':
|
|
this.remainTestTime = event.data.payload;
|
|
break;
|
|
case 'closeTestMode':
|
|
this.testMode = false;
|
|
break;
|
|
case 'close':
|
|
this.close();
|
|
break;
|
|
case 'cancelTestMode':
|
|
this.testMode = false;
|
|
postNUI('cancelTestMode');
|
|
break;
|
|
case 'setPDMFee':
|
|
this.setPdmFee(event.data.payload);
|
|
break;
|
|
case 'setCustomPlateFee':
|
|
this.setCustomPlateFee(event.data.payload);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
openBossMenu() {
|
|
this.setPage('bossmenu');
|
|
},
|
|
openAdminMenu() {
|
|
this.setPage('adminmenu');
|
|
},
|
|
openVehicleshop() {
|
|
this.setSelectedCategory(false);
|
|
this.setShowBill(false);
|
|
this.setViewMode(false);
|
|
this.setPage('vehicleshop');
|
|
},
|
|
keyHandler(e) {
|
|
if (e.which == 27 && this.page.length > 0) {
|
|
this.close();
|
|
}
|
|
},
|
|
buyVehicle() {
|
|
if (this.selectedVehicle) {
|
|
this.setShowBill(true);
|
|
}
|
|
},
|
|
close() {
|
|
postNUI('close');
|
|
this.setPage('');
|
|
this.setSelectedVehicleShop({});
|
|
this.setSelectedVehicle(false);
|
|
this.setShowBill(false);
|
|
},
|
|
},
|
|
mounted() {
|
|
window.addEventListener('wheel', (e) => {
|
|
if (this.viewMode && this.selectedVehicle) {
|
|
if (e.deltaY < 0) {
|
|
postNUI('zoomin');
|
|
}
|
|
if (e.deltaY > 0) {
|
|
postNUI('zoomout');
|
|
}
|
|
}
|
|
});
|
|
|
|
window.addEventListener('message', this.messageHandler);
|
|
window.addEventListener('keydown', this.keyHandler);
|
|
document.querySelector('#app').style.display = 'block';
|
|
let holding = false;
|
|
document.addEventListener('mousedown', function (e) {
|
|
holding = true;
|
|
});
|
|
document.addEventListener('mouseup', function (e) {
|
|
holding = false;
|
|
});
|
|
|
|
let mousemovemethod = (e) => {
|
|
if (this.viewMode && this.selectedVehicle) {
|
|
let direction = '';
|
|
// if (e.movementY > 0 && e.movementX == 0 && holding) {
|
|
// direction = "down";
|
|
// postNUI('rotatedown')
|
|
|
|
// } else if (e.movementY < 0 && e.movementX == 0 && holding) {
|
|
// direction = "up";
|
|
// postNUI('rotateup')
|
|
|
|
if (e.movementX > 0 && e.movementY == 0 && holding) {
|
|
direction = 'right';
|
|
postNUI('rotateright');
|
|
} else if (e.movementX < 0 && e.movementY == 0 && holding) {
|
|
direction = 'left';
|
|
postNUI('rotateleft');
|
|
}
|
|
}
|
|
};
|
|
|
|
document.addEventListener('mousemove', mousemovemethod);
|
|
},
|
|
watch: {
|
|
selectedVehicle(val) {
|
|
if (val) {
|
|
postNUI('spawnLocalVehicle', val);
|
|
} else {
|
|
postNUI('deleteLocalVehicle');
|
|
}
|
|
},
|
|
selectedVehicleShop(val) {
|
|
if (val && val.vehicles) {
|
|
let find = val.vehicles.find((item) => item.model == this.selectedVehicle.model);
|
|
if (!find) {
|
|
if (this.billPage != 3) {
|
|
this.setSelectedVehicle(false);
|
|
this.setShowBill(false);
|
|
}
|
|
} else {
|
|
this.selectedVehicle.amount = find.amount;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
...Vuex.mapState({
|
|
selectedCategory: (state) => state.selectedCategory,
|
|
viewMode: (state) => state.viewMode,
|
|
showBill: (state) => state.showBill,
|
|
page: (state) => state.page,
|
|
selectedVehicle: (state) => state.selectedVehicle,
|
|
notification: (state) => state.notification,
|
|
selectedVehicleShop: (state) => state.selectedVehicleShop,
|
|
billPage: (state) => state.billPage,
|
|
locales: (state) => state.locales,
|
|
currency: (state) => state.currency,
|
|
}),
|
|
formatRemainTestTime() {
|
|
var sec_num = parseInt(this.remainTestTime, 10); // don't forget the second param
|
|
var hours = Math.floor(sec_num / 3600);
|
|
|
|
var minutes = Math.floor((sec_num - hours * 3600) / 60);
|
|
var seconds = sec_num - hours * 3600 - minutes * 60;
|
|
if (minutes < 10) {
|
|
minutes = '0' + minutes;
|
|
}
|
|
if (seconds < 10) {
|
|
seconds = '0' + seconds;
|
|
}
|
|
return minutes + ':' + seconds;
|
|
},
|
|
},
|
|
});
|
|
|
|
app.use(vuexstore);
|
|
app.mount('#app');
|