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: "requirementDetailsLoaded",
  					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: "submit-vessel-form",
  			    src: "submitVesselForm",
  			    onDone: {
  			      target: "#ready"
  			    },
  			    onError: {
  			      target: "failure"
  			    }
  			  }  
  			}
  		},
  		failure: {
  			type: 'final'
  		}	
  	}
  }
  
  const fleetScheduleMachine = 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: {
									onMouseInRequirement: "#requirementActive",
									onMouseInVessel: "#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) => {
				return new Promise((resolve) => {
					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()),
		},
	});