WordPress admin page with custom, draggable meta boxes

<?php

/**
 * Plugin Name:     LHF Volunteer Form
 * Description:     Manages a google-sheet full of names and emails
 * Plugin URI:      http://ladehammerfestivalen.no/volunteer
 * Author URI:      http://genja.org
 * Author:          jazzoslav@gmail.com
 * Text Domain:     lhf-volunteer-form
 * Domain Path:     /languages
 * Version:         0.2.0
 * @package         Lhf_Volunteer_Form
 */

require_once  __DIR__ . '/vendor/autoload.php';

use Lhf\Sheet\RegistrationsSheet;

frivilligSystemMain();

function frivilligSystemMain() {
	try {
		$regSheet = \Lhf\Sheet\RegistrationsSheet::createInWordPress();
	} catch (\Exception $ex) {
		error_log(sprintf('%s:%d %s', __FILE__, __LINE__, $ex->getMessage()));
	}
	add_action('init', function() use ($regSheet) {
		if (is_admin()) {
			add_action( 'admin_menu', function() use ($regSheet) {
				$screenId = DashboardView::screen_id;
				$pageId = add_dashboard_page( 'hammerater', 'Hammerater', 'endre_frivillig_skjema', $screenId,
					function () use ($regSheet) { DashboardView::renderVolunteerDashboard($regSheet); } );
				add_action("load-$pageId", function() use ($regSheet, $pageId, $screenId) {
					wp_enqueue_script('postbox');
					add_screen_option('layout_columns', array('max' => 2, 'default' => 2) );
					do_action("add_meta_boxes_$screenId", null); // allow third parties to hook into this.
					do_action('add_meta_boxes', $screenId, null); // allow third parties to hook into this.
				});
				add_action("add_meta_boxes_$screenId", function () use ($regSheet) { DashboardView::registerMetaboxes($regSheet); });
			});
		}
	});
}

class DashboardView
{
	const screen_id = 'frivillig-liste';

	private static function includeAdminHeader()
	{
		require_once( ABSPATH . 'wp-admin/admin.php');
		require_once( ABSPATH . 'wp-admin/includes/dashboard.php');
		require_once( ABSPATH . 'wp-admin/admin-header.php');
		wp_dashboard_setup();
		wp_enqueue_script( 'dashboard' );
		add_thickbox();
		do_action( 'add_meta_boxes' );
		if ( wp_is_mobile() ) {
			wp_enqueue_script( 'jquery-touch-punch' );
			//wp_dequeue_script('jquery-migrate');
		}

		wp_enqueue_script( 'datatables', '//cdn.datatables.net/1.10.16/js/jquery.dataTables.js');
		wp_enqueue_style( 'datatables', '//cdn.datatables.net/1.10.16/css/jquery.dataTables.css');

		wp_enqueue_script( 'datatables-responsive', '//cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js');
		wp_enqueue_style(  'datatables-responsive', '//cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css');

		wp_enqueue_script( 'datatables-row-group', '//cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.min.js');
		wp_enqueue_style(  'datatables-row-group', '//cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.dataTables.min.css');
	}

	static function renderVolunteerDashboard(RegistrationsSheet $regSheet) {
		static::includeAdminHeader();
		wp_enqueue_script('lhf-sheets');
		$workTypes = get_option( 'lhfsheets_form_work_types' );
		?>
        <div class="wrap">
			<form>
<?php
        wp_nonce_field( 'meta-box-order', 'meta-box-order-nonce', false );
        wp_nonce_field( 'closedpostboxes', 'closedpostboxesnonce', false );
?>
            <h1>Frivillige Hammerater</h1>
            <h2 class="nav-tab-wrapper">
                <a href="<?= admin_url( 'index.php?page=frivillig-liste&tab=liste' ) ?>" >Liste</a>
				<a href="<?= admin_url( 'index.php?page=frivillig-liste&tab=preferanser' ) ?>">Arbeidsposter</a>
                <a href="<?= admin_url( 'index.php?page=frivillig-liste&tab=info' ) ?>">Frivilliginfo</a>
            </h2>
			<?php
			$screen      = get_current_screen();
			$columns     = absint( $screen->get_columns() );
			$columns_css = '';
			if ( $columns ) {
				$columns_css = " columns-$columns";
			}
			?>

			<?php if ( $_GET['tab'] == 'liste' || ! $_GET['tab'] ) { ?>
                <div id="dashboard-widgets" class="metabox-holder<?php echo $columns_css; ?>">
                    <div id="postbox-container-1" class="postbox-container">
						<?php do_meta_boxes( $screen->id, 'main_list', '' ); ?>
                    </div>
                </div>
			<?php } ?>

	        <?php if ( $_GET['tab'] == 'preferanser' || ! $_GET['tab'] ) { ?>
				<div id="dashboard-widgets" class="metabox-holder<?php echo $columns_css; ?>">
					<div id="preferences-sortables" class="postbox-container">
				        <?php do_meta_boxes( $screen->id, 'preferences', ''); ?>
					</div>
					<div id="preferences_left-sortables" class="postbox-container">
						<?php do_meta_boxes( $screen->id, 'preferences_right', ''); ?>
					</div>
				</div>
	        <?php } ?>
            <?php if ( $_GET['tab'] == 'info' ) { ?>
                        <h3>Annen info</h3>
			<?php } ?>
			</form>
        </div>
		<?php
	}

	static function renderMainList($records, $status = 'registered/served/contacted') {
		/** @var Frivillig $e */
		?>
		<div class="main">
          <table id="frivillige-hammerater-<?= $status ?>" style="display:none" data-status="<?= $status ?>">
            <?php foreach ($records as $e) { ?>
              <tr> ...  </tr>
            <?php } ?>
            </tbody>
          </table>
		</div>
		<?php
	}

	public static function registerMetaboxes( RegistrationsSheet $regSheet ) {
		if ($_GET['tab'] == 'info') { return; }
		$all = $regSheet->getVolunteerRecords();
		if ($_GET['tab'] == 'liste' || $_GET['tab'] === null) {
			foreach (Frivillig::states() as $state) {
				add_meta_box(
					"volunteers-search-all",
					__('Verktøy') ,
					function () use ($state) { DashboardView::renderGlobalSearchMetaBox(); },
					'dashboard_page_frivillig-liste',
					'main_list'
				);

				$peopleWithState = [];
				foreach ($all as $f) { if ($f->status === $state) { $peopleWithState[] = $f; } }

				add_meta_box(
					"volunteers-$state",
					DashboardView::$stateName[$state],
					function () use ($peopleWithState, $state) { DashboardView::renderMainList($peopleWithState, $state); },
					'dashboard_page_frivillig-liste',
					'main_list'
				);
			}
		}

		if ($_GET['tab'] == 'preferanser') {
			$workTypes = get_option('lhfsheets_form_work_types');
			foreach ($workTypes as $workType) {
				$workers = [];
				foreach ($all as $frivillig) {
					$interests = preg_split('/,\s+/', $frivillig->interests);
					if (in_array($workType['slug'], $interests)) {
						$workers[] = $frivillig;
					}
				}
				add_meta_box(
					"volunteer-prefers-{$workType['slug']}",
					$workType['description'],
					function () use ($workers, $workType) { DashboardView::renderPreferences($workers, $workType); },
					'dashboard_page_frivillig-liste',
					'preferences'
				);
			}
		}
	}

	public static function renderPreferences($workers, $workType) { ?>
		<ul>
			<?php foreach ($workers as $e) { ?>
			<li data-id="<?= $e->id ?>"> ...  </li>
			<?php } ?>
		</ul>
		<?php
	}

	private static function renderGlobalSearchMetaBox() {
		?> Søk: <input type="text" onkeydown="window.populateSearchFields(event)" placeholder="<?= __('i alle tabellene') ?>  "> <?php
	}
}