MediaWiki:Gadget-database-songs-core.js

mw.loader.using( ['oojs-ui-core', 'oojs-ui-widgets', 'mediawiki.api', 'mediawiki.widgets.DateInputWidget', 'jquery.tablesorter'] ).done( function () {
	function QueryOptions() {
		this.queryParams = {
			units: {
				'VIRTUAL SINGER': false,
				'Leo/need': false,
				'MORE MORE JUMP!': false,
				'Vivid BAD SQUAD': false,
				'Wonderlands×Showtime': false,
				'25-ji, Nightcord de.': false,
				'Other': false
			},
			mvs: {
				'3D': undefined,
				'2D': undefined,
				'Original': undefined
			},
			commissioned: undefined,
			minDate: '',
			maxDate: '',
			easyDiffs: {},
			normalDiffs: {},
			hardDiffs: {},
			expertDiffs: {},
			masterDiffs: {}
		};
		var qParams = this.queryParams;
		
		// Units
		var unitOptionButtons = Object.keys( qParams.units ).map( function(unitName) {
			var btn = new OO.ui.ToggleButtonWidget( {
				label: unitName,
				value: qParams.units[unitName]
			} );
			btn.on( 'change', function(newVal) {
				qParams.units[unitName] = newVal;
			} );
			
			return btn;
		} );
		var unitOptions = new OO.ui.ButtonGroupWidget( {
			items: unitOptionButtons,
			align: 'left'
		} );
		
		// 3D MV
		this._3d_mv = new OO.ui.ButtonSelectWidget( {
			items: [
				new OO.ui.ButtonOptionWidget({ data: undefined, label: 'Any' }),
				new OO.ui.ButtonOptionWidget({ data: true, label: 'Yes' }),
				new OO.ui.ButtonOptionWidget({ data: false, label: 'No' }),
			],
			align: 'left'
		} );
		this._3d_mv.selectItemByLabel('Any');
		
		// 2D MV
		this._2d_mv = new OO.ui.ButtonSelectWidget( {
			items: [
				new OO.ui.ButtonOptionWidget({ data: undefined, label: 'Any' }),
				new OO.ui.ButtonOptionWidget({ data: true, label: 'Yes' }),
				new OO.ui.ButtonOptionWidget({ data: false, label: 'No' }),
			],
			align: 'left'
		} );
		this._2d_mv.selectItemByLabel('Any');
		
		// Original MV
		this._og_mv = new OO.ui.ButtonSelectWidget( {
			items: [
				new OO.ui.ButtonOptionWidget({ data: undefined, label: 'Any' }),
				new OO.ui.ButtonOptionWidget({ data: true, label: 'Yes' }),
				new OO.ui.ButtonOptionWidget({ data: false, label: 'No' }),
			],
			align: 'left'
		} );
		this._og_mv.selectItemByLabel('Any');
		
		// Commissioneed
		this.commissioned = new OO.ui.ButtonSelectWidget( {
			items: [
				new OO.ui.ButtonOptionWidget({ data: undefined, label: 'Any' }),
				new OO.ui.ButtonOptionWidget({ data: true, label: 'Yes' }),
				new OO.ui.ButtonOptionWidget({ data: false, label: 'No' }),
			],
			align: 'left'
		} );
		this.commissioned.selectItemByLabel('Any');
		
		this.afterDateInput = new mw.widgets.DateInputWidget( {
			type: 'date'
		} );
		
		this.beforeDateInput = new mw.widgets.DateInputWidget( {
			type: 'date'
		} );
		
		function createDiffButtons(min, max, obj) {
			var diffs = [];
			for (var i = min; i <= max; i++) {
				diffs.push(i);
			}
			var diffButtons = diffs.map( function(diff) {
				var btn = new OO.ui.ToggleButtonWidget( {
					label: diff.toString(),
					value: false
				} );
				btn.on( 'change', function(newVal) {
					obj[diff] = newVal;
				} );
				
				return btn;
			} );
			return new OO.ui.ButtonGroupWidget( {
				items: diffButtons,
				align: 'left'
			} );
		}
		
		var easyOptions = createDiffButtons(5, 9, qParams.easyDiffs);
		var normalOptions = createDiffButtons(10, 15, qParams.normalDiffs);
		var hardOptions = createDiffButtons(15, 21, qParams.hardDiffs);
		var expertOptions = createDiffButtons(22, 30, qParams.expertDiffs);
		var masterOptions = createDiffButtons(26, 33, qParams.masterDiffs);
		
		this.fieldset = new OO.ui.FieldsetLayout( {
		    label: 'Query options',
		    items: [
			    new OO.ui.FieldLayout( unitOptions, {
			    	label: 'Unit',
			    	align: 'top'
			    } ),
			    new OO.ui.FieldLayout( this._3d_mv, {
			    	label: '3D MV?',
			    	align: 'top'
			    } ),
			    new OO.ui.FieldLayout( this._2d_mv, {
			    	label: '2D MV?',
			    	align: 'top'
			    } ),
			    new OO.ui.FieldLayout( this._og_mv, {
			    	label: 'Original MV?',
			    	align: 'top'
			    } ),
			    new OO.ui.FieldLayout( this.commissioned, {
			    	label: 'Commissioned?',
			    	align: 'top'
			    } ),
			    new OO.ui.FieldLayout( this.afterDateInput, {
			    	label: 'Released after',
			    	align: 'top'
			    } ),
			    new OO.ui.FieldLayout( this.beforeDateInput, {
			    	label: 'Released before',
			    	align: 'top'
			    } ),
			    new OO.ui.FieldLayout( easyOptions, {
			    	label: 'Easy difficulties',
			    	align: 'top'
			    } ),
			    new OO.ui.FieldLayout( normalOptions, {
			    	label: 'Normal difficulties',
			    	align: 'top'
			    } ),
			    new OO.ui.FieldLayout( hardOptions, {
			    	label: 'Hard difficulties',
			    	align: 'top'
			    } ),
			    new OO.ui.FieldLayout( expertOptions, { 
			    	label: 'Expert difficulties',
			    	align: 'top'
			    } ),
			    new OO.ui.FieldLayout( masterOptions, {
			    	label: 'Master difficulties',
			    	align: 'top'
			    } )
			]
		} );
	}
	QueryOptions.prototype.getOptions = function() {
		var resQuery = {};
		
		// Unit
		var units = [];
		for (var unit in this.queryParams.units) {
			if (this.queryParams.units[unit]) {
				units.push(unit);
			}
		}
		resQuery.unit = units.join(';');
		
		// 3D MV
		var _3d_mv_val = this._3d_mv.findSelectedItem();
		if (_3d_mv_val !== null) {
			var data = _3d_mv_val.getData();
			if (typeof data !== 'undefined') {
				resQuery['3d mv'] = data;
			}
		}
		
		// 2D MV
		var _2d_mv_val = this._2d_mv.findSelectedItem();
		if (_2d_mv_val !== null) {
			var data = _2d_mv_val.getData();
			if (typeof data !== 'undefined') {
				resQuery['2d mv'] = data;
			}
		}
		
		// Original MV
		var _og_mv_val = this._og_mv.findSelectedItem();
		if (_og_mv_val !== null) {
			var data = _og_mv_val.getData();
			if (typeof data !== 'undefined') {
				resQuery['original mv'] = data;
			}
		}
		
		// Commissioned
		var commVal = this.commissioned.findSelectedItem();
		if (commVal !== null) {
			var data = commVal.getData();
			if (typeof data !== 'undefined') {
				resQuery.commissioned = data;
			}
		}
		
		// Release date
		resQuery['min date'] = this.afterDateInput.getValue();
		resQuery['max date'] = this.beforeDateInput.getValue();
		
		function getDiffs(diffObj) {
			var diffs = [];
			for (var key in diffObj) {
				if (diffObj[key]) {
					diffs.push(key);
				}
			}
			return diffs.join(',');
		}
		
		resQuery['easy diff'] = getDiffs(this.queryParams.easyDiffs);
		resQuery['normal diff'] = getDiffs(this.queryParams.normalDiffs);
		resQuery['hard diff'] = getDiffs(this.queryParams.hardDiffs);
		resQuery['expert diff'] = getDiffs(this.queryParams.expertDiffs);
		resQuery['master diff'] = getDiffs(this.queryParams.masterDiffs);
		
		return resQuery;
	};
	
	function DisplayOptions() {
		var displayOptions = new OO.ui.CheckboxMultiselectWidget({
			items: [
				new OO.ui.CheckboxMultioptionWidget( {
					selected: false, 
					label: 'Display jacket art', 
					disabled: true 
				} ),
			],
			align: 'left'
		});

		this.fieldset = new OO.ui.FieldsetLayout( {
		    label: 'Display options',
		    items: [
		    	displayOptions
	    	]
		} );
	}
	DisplayOptions.prototype.getOptions = function() {
		
	};
	
	$( function () {
		console.log('loading query interface');
		
		var api = new mw.Api();
		
		var queryOptions   = new QueryOptions();
		var displayOptions = new DisplayOptions();
		
		var submitButton = new OO.ui.ButtonInputWidget( { 
			label: 'Search',
			flags: [ 'primary', 'progressive' ],
			align: 'left',
			icon: 'search'
		} );
		submitButton.on('click', function() {
			go(api, queryOptions, displayOptions);
		});
		
		var fieldset = new OO.ui.FieldsetLayout();
		fieldset.addItems( [
		    queryOptions.fieldset,
		    displayOptions.fieldset,
		    new OO.ui.FieldLayout( submitButton )
		] );
		$( '#song-query' ).append( fieldset.$element );
		
		function go(api, queryOptions, displayOptions) {
			const params = [];
			
			const query = queryOptions.getOptions();
			for (var key in query) {
				params.push('|' + key + ' = ' + query[key]);
			}
			
			var z = '{' + '{Song datatable\n' + params.join('\n') + '\n}}';
			console.log(z);
			
			api.get({
				action: 'parse',
				title: mw.config.get('wgPageName'),
				prop: 'text',
				text: z,
				maxage: 3600,
				smaxage: 3600
			}).done(function(results) {
				$('#song-results').empty().append($(results.parse.text['*']));
				$('#song-results table').tablesorter();
			});
		}
	});
});