Skip to content

Resource modification page feature frontend implementation for fe-revamp #133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
WryanCartie wants to merge 7 commits into
base: neo-fe-revamp
Choose a base branch
from
Open

Resource modification page feature frontend implementation for fe-revamp #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3ac9bbd
Add new resource button and draggable resource(unfinished)
WryanCartie Aug 10, 2023
f418af5
Add drag and drop to modify the resource tier list.
WryanCartie Aug 14, 2023
8a7e237
Add a fix where the colour of resource doesnt change if its the same …
WryanCartie Aug 14, 2023
26a4f1a
Finish the submit resources feature
WryanCartie Aug 16, 2023
bec65e2
Created the deletion area
WryanCartie Sep 12, 2023
1fa430f
Added deletion area and dragging items into the deletion area
WryanCartie Oct 2, 2023
54ff6bb
Fix minor bugs in the resource tier.
WryanCartie May 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 95 additions & 4 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,69 @@
<!--App Container-->
<div class="flex flex-row text-center shadow-lg bg-white h-fit">
<!--Sidebar -->
<router-view
@openRegionPage="openRegionPage"
@openStatePage="openStatePage"
></router-view>
<div
class="hidden w-1/5 md:flex flex-col justify-between bg-gray-300 text-blue-400 border border-white border-x-2"
>
<div class="sticky left-0 top-0">
<div class="p-2 border-white border flex justify-center">
<img src="./assets/ces_logo.png" class="h-24 hover:scale-110" />
</div>
<div class="p-6 border-white border hover:text-white hover:bg-blue-400">
<router-link to="/">Home</router-link>
</div>
<div class="p-6 border-white border hover:text-white hover:bg-blue-400">
<router-link to="state-list">State List</router-link>
</div>
<div class="p-6 border-white border hover:text-white hover:bg-blue-400">
<router-link to="region-list">Region List</router-link>
</div>
<div class="p-6 border-white border hover:text-white hover:bg-blue-400">
<router-link to="trade-agreement">Trade Agreement</router-link>
</div>
<div class="p-6 border-white border hover:text-white hover:bg-blue-400">
<router-link to="resource-tier">Resource Tier</router-link>
</div>
</div>
</div>
<!--Content-->
<div class="md:w-4/5 w-full flex flex-col">
<router-view
:state-list="stateList"
:region-data="stateRegion"
:resource-list="resourceList"
:date="date"
:biome-list="biomeList"
:corruption-list="corruptionLevelList"
:development-list="developmentLevelList"
@advance-season="advanceSeason"
@add-region="addNewRegion"
@add-state="addNewState"
@open-state="openState()"
@save-new-resources="saveNewResources"
></router-view>
</div>
</div>
<!--Sidebar Menu for small screen-->
<Teleport to="#app">
<div class="md:hidden flex flex-row
justify-between sticky text-center bottom-0
bg-gray-200 mx-810 text-blue-400 border-2 border-white space-x-0">

<div class="flex-1 py-4 border-white border hover:text-white hover:bg-blue-400">
<router-link to="/">Home</router-link>
</div>
<div class="flex-1 py-4 border-white border hover:text-white hover:bg-blue-400">
<router-link to="state-list">State List</router-link>
</div>
<div class="flex-1 py-4 border-white border hover:text-white hover:bg-blue-400">
<router-link to="region-list">Region List</router-link>
</div>
<div class="flex-1 py-4 border-white border hover:text-white hover:bg-blue-400">
<a href="">Trade Agreement</a>
</div>
<div class="flex-1 py-4 border-white border hover:text-white hover:bg-blue-400">
<a href="">Resource Tiers</a>
</div>
</div>
</div>
</template>
Expand All @@ -26,6 +85,38 @@ export default {
};
},
methods: {
addNewState(data){
let addStateData = {...data}
console.log(addStateData,'report')
window.ipcRenderer.send("State:addState",addStateData);
window.ipcRenderer.once("State:addStateOK", (e, res) => {
console.log(res,'state added')
});
},
addNewRegion(data){
const {regionName,stateId,corruptionId,biomeId,developmentId, population, taxRate, desc} = data
let addRegionObj = {
biome: {biomeId},
corruption: {corruptionId},
desc,
development: {developmentId},
population,
regionName,
state: {stateId},
taxRate
}
window.ipcRenderer.send("Region:addRegion",JSON.stringify(addRegionObj));
window.ipcRenderer.once("Region:addRegionOK", (e, res) => {
console.log(res,'legiun added')
});
},
saveNewResources(newResourceList){
console.log(newResourceList,'nueva resource list')
window.ipcRenderer.send("Resource:updateResourceAll",newResourceList);
window.ipcRenderer.once("Resource:updateResourceAllOK", (e, res) => {
console.log(res,'legiun added')
});
},
setLanding() {
this.hasLanded = true;
localStorage.setItem("landed", true);
Expand Down
191 changes: 186 additions & 5 deletions src/pages/Home/sections/ResourceTier.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div
class="px-4 mx-auto lg:w-3/4 w-full text-center py-24 pt-16 flex flex-col space-y-5"
class="px-4 mx-auto lg:w-fit w-full text-center py-24 pt-16 flex flex-col space-y-5"
>
<h1 class="mb-4 text-4xl font-semibold tracking-tight leading-none">
Resource Tier List
Expand All @@ -9,29 +9,210 @@
<div class="md:grid-cols-6 sm:grid-cols-4 grid-cols-2 grid gap-4">
<div
class="flex flex-col space-y-2"
v-for="resourceTier in resourceList"
:class="{
'bg-blue-100': isDragging,
'bg-red-200': resourceTier.isDraggedOver,
}"
@dragover.prevent="dragOverList(resourceTier)"
@drop="onDragDrop(resourceTier, tierIndex)"
@dragleave="leaveDraggedOverList(resourceTier)"
@dragenter.prevent
v-for="(resourceTier, tierIndex) in tierResourceList"
:key="resourceTier.ResourceTierID"
>
<h2 class="text-xl font-semibold border py-4 px-3 bg-black text-white">
{{ resourceTier.ResourceTierName }}
</h2>
<div
v-for="resource in resourceTier.Resources"
@dragstart="startDrag(index, resourceTier, tierIndex)"
@dragend="stopDrag"
draggable="true"
v-for="(resource, index) in resourceTier.Resources"
:key="resource.ResourceName"
class="border p-3 bg-gray-100"
class="border p-3 bg-gray-100 cursor-pointer"
:class="{
'bg-yellow-200':
resource.isChanged &&
resourceTier.ResourceTierID !== resource.originTierIndex,
}"
>
{{ resource.ResourceName }}
</div>
</div>
</div>
<!--Deletion Area-->
<div
class="relative py-12 mx-auto border-2 border-red-500 bg-red-300 w-3/4"
:class="{'bg-red-400': isOnDeletion}"

@drop="onDeleteResource(resourceTier, tierIndex)"
@dragleave="leaveDeletionArea"
@dragover.prevent="dragOverDelete"
@dragenter.prevent
>
<div class="w-full lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 px-2 grid gap-4" v-if="deletedResourceList.length > 0">

<div
@dragstart="startDrag(index, resourceTier, tierIndex)"
@dragend="stopDrag"
draggable="true"
v-for="(resource, index) in deletedResourceList"
:key="resource.ResourceName"
class="border p-3 bg-gray-100 cursor-pointer"
:class="{
'bg-yellow-200':
resource.isChanged &&
resourceTier.ResourceTierID !== resource.originTierIndex,
}"
>
{{ resource.ResourceName }}
</div>
</div>

</div>
<!--Add State Button Container-->
<div class="pt-2 flex justify-center space-x-2">
<button
type="button"
@click="toggleAddStateModal"
href="#"
class="inline-flex justify-center items-center py-4 px-5 text-base font-medium text-center text-white rounded-lg bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-green-900"
>
Add Resource
</button>
<button
v-if="isChanging"
type="button"
@click="onResourceSubmit"
href="#"
class="inline-flex justify-center items-center py-4 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"
>
Submit Changes
</button>
</div>
<!---->
</div>
</template>

<script>
export default {
props: ["resourceList"],
emits: ["save-new-resources"],
mounted() {
console.log(this.resourceList);
console.log(this.resourceList, "resources");
for (let tier of this.resourceList) {
tier.isDraggedOver = false;
for (let resources of tier.Resources) {
resources.isChanged = false;
resources.originTierIndex = tier.ResourceTierID;
}
}
this.tierResourceList = structuredClone(this.resourceList);
console.log(this.tierResourceList, "tier Resourcce list");
},
data() {
return {
isChanging: false,
isDragging: false,
isOnDeletion: false,
draggedResourceIdx: "",
originTierIdx: null,
targetTierIdx: null,
originTier: null,
tierResourceList: [],
deletedResourceList: [],
};
},
methods: {
startDrag(resourceIndex, tier, tierIndex) {
this.isDragging = true;
this.draggedResourceIdx = resourceIndex;

this.originTier = tier;
this.originTierIdx = tierIndex;
},
stopDrag() {
this.isDragging = false;
console.log("consolation");
},
dragOverList(tier) {
tier.isDraggedOver = true;
},
dragOverDelete(){
this.isOnDeletion = true;

},
leaveDeletionArea(){
this.isOnDeletion = false
},
leaveDraggedOverList(tier) {
tier.isDraggedOver = false;
},
onDragDrop(tier, index) {
this.targetTierIdx = index;

tier.isDraggedOver = false;
if (this.originTier.ResourceTierID === tier.ResourceTierID) {
return;
}

let newOriginTier = { ...this.originTier };

let targetElement = newOriginTier.Resources.splice(
this.draggedResourceIdx,1);
targetElement[0].isChanged = true;
targetElement[0].ResourceTierID = tier.ResourceTierID;


let newTier = { ...tier };
newTier.Resources.push(targetElement[0]);
let newResourceTierList = structuredClone(this.tierResourceList);
newResourceTierList.splice(this.originTierIdx, 1, newOriginTier);
newResourceTierList.splice(this.targetTierIdx, 1, newTier);

this.tierResourceList = [...newResourceTierList];
this.isChanging = true;
},
onDeleteResource(){

let deletedResource = this.tierResourceList[this.originTierIdx].Resources.splice(this.draggedResourceIdx,1)[0];
this.deletedResourceList.push(deletedResource);
},
onDragDropDelete() {
// this.targetTierIdx = index
// tier.isDraggedOver = false
// if (this.originTier.ResourceTierID === tier.ResourceTierID) {
// return;
// }
// let newOriginTier = { ...this.originTier }
// console.log(this.draggedResourceIdx, 'television')
// let targetElement = newOriginTier.Resources.splice(this.draggedResourceIdx, 1)
// targetElement[0].isChanged = true;
// targetElement[0].ResourceTierID = tier.ResourceTierID
// console.log(targetElement, 'new guys')
// let newTier = { ...tier }
// newTier.Resources.push(targetElement[0])
// let newResourceTierList = structuredClone(this.tierResourceList);
// newResourceTierList.splice(this.originTierIdx, 1, newOriginTier)
// newResourceTierList.splice(this.targetTierIdx, 1, newTier)
// this.tierResourceList = [...newResourceTierList]
// this.isChanging = true;
},
onResourceSubmit() {
let newResources = [];
for (let tier of this.tierResourceList) {
for (let resource of tier.Resources) {
console.log(resource, "nueva resource");
newResources.push({
ResourceID: resource.ResourceID.toString(),
ResourceName: resource.ResourceName.toString(),
ResourceTierID: resource.ResourceTierID.toString(),
});
}
}
console.log(newResources, "new-result");
this.$emit("save-new-resources", newResources);
},
},
};
</script>