brotherton-erpnext/erpnext/public/js/plant_floor_visual/visual_plant.js

class VisualPlantFloor {
	constructor({wrapper, skip_filters=false, plant_floor=null}, page=null) {
		this.wrapper = wrapper;
		this.plant_floor = plant_floor;
		this.skip_filters = skip_filters;

		this.make();
		if (!this.skip_filters) {
			this.page = page;
			this.add_filter();
			this.prepare_menu();
		}
	}

	make() {
		this.wrapper.append(`
			<div class="plant-floor">
				<div class="plant-floor-filter">
				</div>
				<div class="plant-floor-container col-sm-12">
				</div>
			</div>
		`);

		if (!this.skip_filters) {
			this.filter_wrapper = this.wrapper.find('.plant-floor-filter');
			this.visualization_wrapper = this.wrapper.find('.plant-floor-visualization');
		} else if(this.plant_floor) {
			this.wrapper.find('.plant-floor').css('border', 'none');
			this.prepare_data();
		}
	}

	prepare_data() {
		frappe.call({
			method: 'erpnext.manufacturing.doctype.workstation.workstation.get_workstations',
			args: {
				plant_floor: this.plant_floor,
			},
			callback: (r) => {
				this.workstations = r.message;
				this.render_workstations();
			}
		});
	}

	add_filter() {
		this.plant_floor = frappe.ui.form.make_control({
			df: {
				fieldtype: 'Link',
				options: 'Plant Floor',
				fieldname: 'plant_floor',
				label: __('Plant Floor'),
				reqd: 1,
				onchange: () => {
					this.render_plant_visualization();
				}
			},
			parent: this.filter_wrapper,
			render_input: true,
		});

		this.plant_floor.$wrapper.addClass('form-column col-sm-2');

		this.workstation_type = frappe.ui.form.make_control({
			df: {
				fieldtype: 'Link',
				options: 'Workstation Type',
				fieldname: 'workstation_type',
				label: __('Machine Type'),
				onchange: () => {
					this.render_plant_visualization();
				}
			},
			parent: this.filter_wrapper,
			render_input: true,
		});

		this.workstation_type.$wrapper.addClass('form-column col-sm-2');

		this.workstation = frappe.ui.form.make_control({
			df: {
				fieldtype: 'Link',
				options: 'Workstation',
				fieldname: 'workstation',
				label: __('Machine'),
				onchange: () => {
					this.render_plant_visualization();
				},
				get_query: () => {
					if (this.workstation_type.get_value()) {
						return {
							filters: {
								'workstation_type': this.workstation_type.get_value() || ''
							}
						}
					}
				}
			},
			parent: this.filter_wrapper,
			render_input: true,
		});

		this.workstation.$wrapper.addClass('form-column col-sm-2');

		this.workstation_status = frappe.ui.form.make_control({
			df: {
				fieldtype: 'Select',
				options: '\nProduction\nOff\nIdle\nProblem\nMaintenance\nSetup',
				fieldname: 'workstation_status',
				label: __('Status'),
				onchange: () => {
					this.render_plant_visualization();
				},
			},
			parent: this.filter_wrapper,
			render_input: true,
		});
	}

	render_plant_visualization() {
		let plant_floor = this.plant_floor.get_value();

		if (plant_floor) {
			frappe.call({
				method: 'erpnext.manufacturing.doctype.workstation.workstation.get_workstations',
				args: {
					plant_floor: plant_floor,
					workstation_type: this.workstation_type.get_value(),
					workstation: this.workstation.get_value(),
					workstation_status: this.workstation_status.get_value()
				},
				callback: (r) => {
					this.workstations = r.message;
					this.render_workstations();
				}
			});
		}
	}

	render_workstations() {
		this.wrapper.find('.plant-floor-container').empty();
		let template  = frappe.render_template("visual_plant_floor_template", {
			workstations: this.workstations
		});

		$(template).appendTo(this.wrapper.find('.plant-floor-container'));
	}

	prepare_menu() {
		this.page.add_menu_item(__('Refresh'), () => {
			this.render_plant_visualization();
		});
	}
}

frappe.ui.VisualPlantFloor = VisualPlantFloor;