Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
const vesselIsNotASpot = () => {
	return true
}

const requirementUnlocked = () => {
	return true
}

const requirementCanBeAssignedToVessel = (context, event) => {
	return true
}

const assignRequirementToVesselMachine = {
	initial: "loading",
	states: {
		loading: {
			entry: assign({
				isLoading: true,
			}),
			invoke: {
				id: "assign-requirement-to-vessel",
				src: "assignRequirement",
				onDone: {
					target: "#ready",
					actions: assign({
						assignedRequirement: (context, event) =>
							event.data.assignedRequirement,
					}),
				},
				onError: {
					target: "failure",
				},
			},
		},
		failure: {
			type: "final",
		},
	},
};

const requirementDetailsMachine = {
	initial: 'loading',
	states: {
		loading: {
			entry: assign({
				isLoading: true,
			}),
			invoke: {
				id: "fetch-requirement-details",
				src: "getRequirementDetails",
				onDone: {
					target: "#ready.idle",
					actions: assign({
						requirementDetails: (context, event) =>
							event.data.requiremntDetails,
					}),
				},
				onError: {
					target: "failure",
				},
			},
		},
		requirementDetailsLoaded: {
			type: 'final'
		},
		failure: {
			type: 'final'
		}
	}
}


const vesselDetailsMachine = {
	initial: 'loading',
	states: {
		loading: {
			entry: assign({
				isLoading: true,
			}),
			invoke: {
				id: "fetch-vessel-details",
				src: "getVesselDetails",
				onDone: {
					target: "vesselDetailsLoaded",
					actions: assign({
						vesselDetails: (context, event) =>
							event.data.vesselDeatils,
					}),
				},
				onError: {
					target: "failure",
				},
			},
		},
		vesselDetailsLoaded: {
			type: 'final'
		},
		failure: {
			type: 'final'
		}
	}
}

const vesselFormMachine = {
	initial: 'loading',
	states: {
		loading: {
			entry: assign({
				isLoading: true,
			}),
			invoke: {
				id: "fetch-vessel-form",
				src: "getVesselForm",
				onDone: {
					target: "vesselFormLoaded"
				},
				onError: {
					target: "#failure",
				},
			},
		},
		vesselFormLoaded: {
			initial: "idle",
			on: {
				SUBMIT: {
					target: ".submitVesselForm"
				},
			},
			states: {
				idle: {
					type: "final"
				},
				submitVesselForm: {
					invoke: {
						id: "submit-vessel-form",
						src: "submitVesselForm",
						onDone: {
							target: "#ready"
						},
						onError: {
							target: "#failure"
						}
					}
				}
			}
		},
		failure: {
			id: "failure",
			type: 'final'
		}
	}
}

  const fetchMachine = Machine({
		id: "fleet-machine",
		initial: "idle",
		context: {
			selectedRequirement: {},
			selectedVessel: {},
			vesselDetails: {},
			requirementDetails: {},
			detailsPanelOpen: {},
			assignedRequirement: {},
			schedule: {},
			isLoading: false,
		},
		states: {
			idle: {
				id: "idle",
				// * fetch fleet schedule immediately
				initial: "loading",
				context: {
					schedule: {},
					selectedRequirement: {},
				},
				states: {
					loading: {
						entry: assign({
							isLoading: true,
						}),
						invoke: {
							id: "fetch-fleet-schedule",
							src: "getFleetSchedule",
							onDone: {
								target: "ready",
								actions: assign({
									schedule: (context, event) =>
										event.data.schedule,
								}),
							},
							onError: {
								target: "failure",
							},
						},
					},
					ready: {
						id: "ready",
						initial: "idle",
						entry: assign({
							isLoading: false,
						}),

						states: {
							idle: {
								type: "final",
								on: {
									onRequirementClicked: "#requirementActive",
									onVesselClicked: "#vesselActive",
								},
							},
							requirementActive: {
								id: "requirementActive",
								on: {
									CLICK:
										"#detailsPanelActive.requirementClicked",
									DRAG_START: {
										target: "requirementDragging",
										cond: requirementUnlocked,
									},

									onMouseOutRequirement: "#ready",
								},
							},
							requirementDragging: {
								on: {
									DRAG_END: {
										target: "assignRequirement",
										cond: requirementCanBeAssignedToVessel,
									},
								},
								entry: (context) => {
									return true;
								},
							},
							assignRequirement: {
								...assignRequirementToVesselMachine
							},

							vesselActive: {
								id: "vesselActive",

								on: {
									CLICK: {
										target:
											"#detailsPanelActive.vesselClicked",
										cond: vesselIsNotASpot,
									},
									RIGHT_CLICK: {
										target:
											"#detailsPanelActive.vesselRightClicked",
										cond: vesselIsNotASpot,
									},
									onMouseOutVessel: "#ready",
								},
							},
						},
					},
					failure: {
						on: {
							RETRY: "loading",
						},
					},
				},
			},

			detailsPanelActive: {
				id: "detailsPanelActive",
				on: {
					CLOSE: "#ready",
				},
				states: {
					requirementClicked: {
						id: "requirementClicked",
						...requirementDetailsMachine,
					},
					vesselClicked: {
						id: "vesselClicked",
						...vesselDetailsMachine,
					},
					vesselRightClicked: {
						id: "vesselRightClicked",
						...vesselFormMachine,
					},
				},
			},
		},
	},
	{
		services: {
			getFleetSchedule: (context, event) => {
				console.log("GETTING SCHEDULE")
				return new Promise(async (resolve) => {
					// const result = await fleetOptimizationClient.query({ query: GET_SCHEDULE })
					// const { data: { testCalculateEndToEnd } } = result
					// console.log("result", result)
					// resolve({
					// 	schedule: testCalculateEndToEnd
					// })
					setTimeout(() => {
						resolve({
							schedule: {
								test: true,
							},
						});
					}, 2000);
				});
			},
			getRequirementDetails: (context, event) => {
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve({
							requirementDetails: {
								name: "My Requirement",
							},
						});
					}, 2000);
				});
			},
			getVesselDetails: (context, event) => {
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve({
							vesselDeatils: {
								name: "My Vessel",
							},
						});
					}, 2000);
				});
			},
			assignRequirement: (context, event) => {
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve({
							assignedRequirement: {
								requirement: 'abc',
								vessel: 'xyz'
							},
						});
					}, 2000);
				});
			},
			getVesselForm: (context, event) => {
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve({
							formData: {
								test: true,
							},
						});
					}, 2000);
				});
			},
			submitVesselForm: (context, event) => {
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve({
							formSubmitted: {
								test: true,
							},
						});
					}, 2000);
				});
			}

			// fetch(fleetScheduleUrl).then((response) => response.json()),
		},
	});