kiss/plugin/dashboard/dashboard.plugin.php

<?php
//Déclaration d'un item de menu dans le menu principal
function dashboard_menu(&$menuItems){
	global $myUser;
	if(!$myUser->can('dashboard','read')) return;
	$menuItems[] = array(
		'sort'=>3,
		'url'=>'index.php?module=dashboard',
		'label'=>'Dashboard',
		'icon'=> 'far fa-object-ungroup',
		'color'=> '#273c75'
	);
}

//Cette fonction va générer une page quand on clique sur Dashboard dans menu
function dashboard_page(){
	global $_, $myUser;
	if(isset($_['module'])) return;
	$page = !isset($_['page']) ? 'list.dashboard' : $_['page'];
	$page = str_replace('..','',$page);
	$file = __DIR__.SLASH.'page.'.$page.'.php';
	if(!file_exists($file)) throw new Exception("Page ".$page." inexistante");

	require_once($file);
}

//Fonction executée lors de l'activation du plugin
function dashboard_install($id){
	if($id != 'fr.core.dashboard') return;
	Entity::install(__DIR__);
}

//Fonction executée lors de la désactivation du plugin
function dashboard_uninstall($id){
	if($id != 'fr.core.dashboard') return;
	Entity::uninstall(__DIR__);
}

//Déclaration des sections de droits du plugin
Right::register('dashboard',array('label'=>'Gestion des droits sur le plugin Dashboard'));

//Déclaration du menu de réglages
function dashboard_menu_setting(&$settingMenu){
	global $myUser;

	if(!$myUser->can('dashboard','configure')) return;
	$settingMenu[]= array(
		'sort' =>1,
		'url' => 'setting.php?section=global.dashboard',
		'icon' => 'fas fa-angle-right',
		'label' => 'Dashboard'
	);
}

//Déclaration des pages de réglages
function dashboard_content_setting(){
	global $_;
	if(file_exists(__DIR__.SLASH.'setting.'.$_['section'].'.php'))
		require_once(__DIR__.SLASH.'setting.'.$_['section'].'.php');
}


require_once(__DIR__.SLASH.'action.php');


//Déclaration des settings de base
//Types possibles : voir FieldType.class.php. Un simple string définit une catégorie.
Configuration::setting('dashboard',array(
    "Général",
    //'dashboard_enable' => array("label"=>"Activer","type"=>"boolean"),
));

function dashboard_application_bottom(){
?>
 <template id="dashboard-widget-template">
    <div class="dashboard-widget" data-id="{{id}}" data-width="{{width}}" data-height="{{height}}">
    	<div class="dashboard-widget-header">
    		<div class="widget-header-icon"><i class="fas fa-question"></i></div>
    		<div class="widget-header-title">{{label}}</div>
    		<ul class="widget-header-options"></ul>
    	</div>
    	<div class="dashboard-widget-content"></div>
    	<div class="dashboard-widget-resize py-1 px-2"><i class="fas fa-chevron-right"></i></div>
	</div>
 </template>

<!-- Modal Dashboard -->
<div class="modal fade dashboard-modal" id="dashboard-modal"  tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Configuration</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body p-0 overflow-hidden">
				<div class="container-fluid py-0 h-100">
					<div class="row h-100">
						<div class="col-md-3 border-right px-0 overflow-auto h-100 dashboard-configure-menu" id="dashboard-configure-menu">
							<ul class="nav nav-tabs flex-column dashboard-configure-menu rounded-0 border-0" id="dashboard-configure-menu" role="tablist" aria-orientation="vertical">
								<li data-menu='model' class="nav-item border-bottom">
									<a class="nav-link border-0 rounded-0 active" id="model-tab" data-toggle="tab" role="tab" aria-controls="model" aria-selected="true">
										<i class="far fa-window-maximize mr-1"></i>Modèle
									</a>
								</li>
								<li data-menu='properties' class="nav-item border-bottom">
									<a class="nav-link border-0 rounded-0" id="properties-tab" data-toggle="tab" role="tab" aria-controls="properties" aria-selected="false">
										<i class="fas fa-list-ul mr-1"></i>Propriétés
									</a>
								</li>
								<li data-menu='style' class="nav-item border-bottom">
									<a class="nav-link border-0 rounded-0" id="style-tab" data-toggle="tab" role="tab" aria-controls="style" aria-selected="false">
										<i class="fas fa-palette mr-1"></i>Style
									</a>
								</li>
							</ul>
						</div>
						<template id="configure-model">
								<ul id="widget-models" class="widget-models bg-light">
								    <li data-model="{{model}}" class="shadow-sm bg-white hidden">
								        <h3><div class="widget-model-chip" style="background-color: {{headerBackground
}};color: {{iconColor}}"><i class="{{icon}}"></i></div> {{label}}</h3>
								        <p>{{excerpt}}</p>
								        <i onclick="event.stopPropagation();$(this).parent().find('.long-description').toggleClass('hidden')" title="plus d'information sur le widget" class="fas fa-info-circle widget-model-info"></i>
								        <hr/>
								        <div class="hidden long-description text-muted">{{description}}<br>
								        	Créé par <i class="fas fa-user"></i> {{creator}} le <i>{{created}}</i>
								        </div>
								        <div class="checked"><i class="fas fa-check"></i></div>
								    </li>
								</ul>
						</template>
						<template id="properties-model">
								<div class="p-3">
									<h3>Propriétés</h3>
									<div id="dashboard-properties-form"></div>
									<div class="btn btn-primary mt-1" id="dashboard-properties-save">Enregistrer</div>
								</div>
						</template>
						<template id="configure-style">
							<div class="row">
								<div class="col">
									<table class="table" id="configure-style-table">
										<tbody>
											<tr>
												<th colspan="2" class="align-middle">En-tête</th>
											</tr>
											<tr>
												<td><input type="text" data-type="icon" id="widget-header-icon"></td>
												<td class="align-middle">Icône</td>
											</tr>
											<tr>
												<td><input type="text" data-type="color" id="widget-header-icon-color"></td>
												<td class="align-middle">Couleur Icône</td>
											</tr>
											<tr>
												<td><input type="text" data-type="color" id="widget-header-title-color"></td>
												<td class="align-middle">Couleur titre</td>
											</tr>
											<tr>
												<td><input type="text" data-type="color" id="widget-header-background"></td>
												<td class="align-middle">Couleur de fond</td>
											</tr>
											<tr>
												<th colspan="2" class="align-middle">Corps</th>
											</tr>
											<tr>
												<td><input type="text" data-type="color" id="widget-body-background"></td>
												<td class="align-middle">Couleur de fond</td>
											</tr>
											<tr>
												<td><input type="text" data-type="color" id="widget-body-color"></td>
												<td class="align-middle">Couleur texte</td>
											</tr>

										</tbody>
									</table>
								</div>
								<div class="col dashboard-container">
									<!-- -->
									<div class="dashboard-widget dashboard-widget-customizer widget-draggable widget-resizeable widget-removable ui-draggable">
								    	<div class="dashboard-widget-header" style="background-color: rgb(0, 123, 255);">
								    		<div class="widget-header-icon ui-draggable-handle"><i class="far fa-user"></i></div>
								    		<div class="widget-header-title ui-draggable-handle">Titre</div>
								    		<ul class="widget-header-options"><li class="widget-option-configure" title="Configurer"><i class="fas fa-ellipsis-v"></i></li><li class="widget-option-delete" title="Supprimer"><i class="fa fa-times"></i></li></ul>
								    	</div>
								    	<div class="dashboard-widget-content"><div class="text-center m-auto">Contenu</div></div>
								    	<div class="dashboard-widget-resize py-1 px-2"><i class="fas fa-chevron-right"></i></div>
									</div>
									<!-- -->
								</div>
							</div>
						</template>
						<div class="col-md-9 px-0 overflow-auto h-100 dashboard-configure-content" id="dashboard-configure-content">
							
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn" data-dismiss="modal">Fermer</button>
			</div>
		</div>
	</div>
</div>
   <?php
}

Plugin::addHook('widget',function(&$models){
		$model = new DashboardWidget();
		$model->icon = 'far fa-user';
		$model->headerBackground = 'rgb(0, 123, 255)';
		$model->description = 'Une Horloge toute couillone';
		$model->label = 'Horloge';
		$model->width = 3;
		$model->height = 3;
		$model->model = 'clock';
		$model->css = array(__DIR__.'/css/widget-clock.css?v='.time());
		$model->js = array(__DIR__.'/js/widget-clock.js?v='.time());
		$model->live = true;
		
		$model->content = function(&$widget){
			if(empty($widget->meta['hour-format'])) $widget->meta['hour-format'] = 'H:i:s';
			$widget->content = '<div class="text-center m-auto widget-clock-content">'.date($widget->meta['hour-format']).'</div>';
			$widget->label = 'Horloge '.date($widget->meta['hour-format']);
		};

		$model->configure = function($widget){
			if(empty($widget->meta['hour-format'])) $widget->meta['hour-format'] = 'H:i:s';
			?>
			<label>Format de l'heure : </label>
			<input class="form-control" type="text" id="hour-format" placeholder="H:i:s" value="<?php echo $widget->meta['hour-format']; ?>">
			<?php
		};

		$model->save = function($widget,$form){
			$widget->meta['hour-format'] = $form['hour-format'];
			$widget->save();
		};

		$models[$model->model] = $model;
});



//Déclation des assets
Plugin::addCss("/css/main.css");
Plugin::addCss("/css/component.css?v=2");
Plugin::addJs("/js/main.js");
Plugin::addJs("/js/dashboard.js?v=2");
Plugin::addJs("/js/component.js?v=2");

//Mapping hook / fonctions
Plugin::addHook("install", "dashboard_install");
Plugin::addHook("uninstall", "dashboard_uninstall");
Plugin::addHook("menu_main", "dashboard_menu");
Plugin::addHook("page", "dashboard_page");
Plugin::addHook("menu_setting", "dashboard_menu_setting");
Plugin::addHook("content_setting", "dashboard_content_setting");
Plugin::addHook("application_bottom", "dashboard_application_bottom");