started work on image manager

api/functions/organizr-functions.php

@@ -226,3 +226,16 @@ function logoOrText(){
         return '<img style="max-width: 350px;" src="'.$GLOBALS['logo'].'" alt="Home" />';
     }
 }
+function getImages(){
+    $dirname = dirname(__DIR__,2).DIRECTORY_SEPARATOR.'plugins'.DIRECTORY_SEPARATOR.'images'.DIRECTORY_SEPARATOR.'tabs'.DIRECTORY_SEPARATOR;
+    $path = 'plugins/images/tabs/';
+    $images = scandir($dirname);
+    $ignore = Array(".", "..", "._.DS_Store", ".DS_Store");
+    $allIcons = array();
+    foreach($images as $image){
+        if(!in_array($image, $ignore)) {
+            $allIcons[] = $path.$image;
+        }
+    }
+    return $allIcons;
+}

api/index.php

@@ -210,6 +210,66 @@ switch ($function) {
                 break;
         }
         break;
+    case 'v1_settings_image_manager_view':
+        switch ($method) {
+            case 'GET':
+                if(qualifyRequest(1)){
+                    $result['status'] = 'success';
+                    $result['statusText'] = 'success';
+                    $result['data'] = $pageSettingsImageManagerView;
+                }else{
+                    $result['status'] = 'error';
+                    $result['statusText'] = 'API/Token invalid or not set';
+                    $result['data'] = null;
+                }
+                break;
+            case 'POST':
+                if(qualifyRequest(1)){
+                    $result['status'] = 'success';
+                    $result['statusText'] = 'success';
+                    $result['data'] = adminEditGroup($_POST);
+                }else{
+                    $result['status'] = 'error';
+                    $result['statusText'] = 'API/Token invalid or not set';
+                    $result['data'] = null;
+                }
+                break;
+            default:
+                $result['status'] = 'error';
+                $result['statusText'] = 'The function requested is not defined for method: '.$method;
+                break;
+        }
+        break;
+    case 'v1_settings_image_manager_upload':
+        switch ($method) {
+            case 'GET':
+                if(qualifyRequest(1)){
+                    $result['status'] = 'success';
+                    $result['statusText'] = 'success';
+                    $result['data'] = $pageSettingsImageManagerUpload;
+                }else{
+                    $result['status'] = 'error';
+                    $result['statusText'] = 'API/Token invalid or not set';
+                    $result['data'] = null;
+                }
+                break;
+            case 'POST':
+                if(qualifyRequest(1)){
+                    $result['status'] = 'success';
+                    $result['statusText'] = 'success';
+                    $result['data'] = adminEditGroup($_POST);
+                }else{
+                    $result['status'] = 'error';
+                    $result['statusText'] = 'API/Token invalid or not set';
+                    $result['data'] = null;
+                }
+                break;
+            default:
+                $result['status'] = 'error';
+                $result['statusText'] = 'The function requested is not defined for method: '.$method;
+                break;
+        }
+        break;
     case 'v1_wizard_page':
         switch ($method) {
             case 'GET':
@@ -410,6 +470,25 @@ switch ($function) {
                 break;
         }
         break;
+    case 'v1_image_list':
+        switch ($method) {
+            case 'GET':
+                if(qualifyRequest(1)){
+                    $result['status'] = 'success';
+                    $result['statusText'] = 'success';
+                    $result['data'] = getImages();
+                }else{
+                    $result['status'] = 'error';
+                    $result['statusText'] = 'API/Token invalid or not set';
+                    $result['data'] = null;
+                }
+                break;
+            default:
+                $result['status'] = 'error';
+                $result['statusText'] = 'The function requested is not defined for method: '.$method;
+                break;
+        }
+        break;
     case 'v1_customize_appearance':
         switch ($method) {
             case 'GET':

api/pages/settings-image-manager-upload.php

@@ -0,0 +1,15 @@
+<?php
+
+$pageSettingsImageManagerUpload = '
+<script>
+</script>
+<div class="panel bg-theme-dark panel-info">
+    <div class="panel-heading">
+		<span lang="en">View Images</span>
+	</div>
+    <div class="panel-wrapper collapse in" aria-expanded="true">
+        <div class="panel-body bg-theme-dark">
+        </div>
+    </div>
+</div>
+';

api/pages/settings-image-manager-view.php

@@ -0,0 +1,17 @@
+<?php
+
+$pageSettingsImageManagerView = '
+<script>
+	buildImageManagerView();
+</script>
+<div class="panel bg-theme-dark panel-info">
+    <div class="panel-heading">
+		<span lang="en">View Images</span>
+	</div>
+    <div class="panel-wrapper collapse in" aria-expanded="true">
+        <div class="panel-body bg-theme-dark" >
+        <div class="row el-element-overlay m-b-40" id="settings-image-manager-list"></div>
+        </div>
+    </div>
+</div>
+';

api/pages/settings-template.php

@@ -0,0 +1,16 @@
+<?php
+
+$pageSettingsTemplate = '
+<script>
+	//buildCustomizeAppearance();
+</script>
+<div class="panel bg-theme-dark panel-info">
+    <div class="panel-heading">
+		<span lang="en">Template</span>
+	</div>
+    <div class="panel-wrapper collapse in" aria-expanded="true">
+        <div class="panel-body bg-theme-dark">
+        </div>
+    </div>
+</div>
+';

api/pages/settings.php

@@ -33,6 +33,7 @@ $pageSettings = '
                         <li onclick="changeSettingsMenu(\'Settings::Tab Editor\')"><a href="#settings-main-tab-editor" class="sticon ti-layout-tab-v"><span lang="en">Tab Editor</span></a></li>
                         <li onclick="changeSettingsMenu(\'Settings::Customize\')"><a href="#settings-main-customize" class="sticon ti-paint-bucket"><span lang="en">Customize</span></a></li>
                         <li onclick="changeSettingsMenu(\'Settings::User Management\')"><a href="#settings-main-user-management" class="sticon ti-user"><span lang="en">User Management</span></a></li>
+                        <li onclick="changeSettingsMenu(\'Settings::Image Manager\')"><a href="#settings-main-image-manager" class="sticon ti-image"><span lang="en">Image Manager</span></a></li>
     					<li onclick="changeSettingsMenu(\'Settings::Plugins\')"><a href="#settings-main-plugins" class="sticon ti-plug"><span lang="en">Plugins</span></a></li>
                         <li onclick="changeSettingsMenu(\'Settings::System Settings\')"><a href="#settings-main-system-settings" class="sticon ti-settings"><span lang="en">System Settings</span></a></li>
                     </ul>
@@ -91,6 +92,22 @@ $pageSettings = '
                             </div>
                         </div>
                     </section>
+                    <! -- IMAGE MANAGER -->
+                    <section id="settings-main-image-manager">
+                        <ul class="nav customtab2 nav-tabs" role="tablist">
+                            <li onclick="changeSettingsMenu(\'Settings::Image Manager::View\');loadSettingsPage(\'api/?v1/settings/image/manager/view\',\'#settings-image-manager-view\',\'Image Viewer\');" role="presentation"><a href="#settings-image-manager-view" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true"><span class="visible-xs"><i class="ti-image"></i></span><span class="hidden-xs" lang="en"> View</span></a>
+                            </li>
+                            <li onclick="changeSettingsMenu(\'Settings::Image Manager::Upload\')" role="presentation"><a href="#settings-image-manager-upload" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true"><span class="visible-xs"><i class="ti-upload"></i></span><span class="hidden-xs" lang="en"> Upload</span></a>
+                            </li>
+                        </ul>
+                        <!-- Tab panes -->
+                        <div class="tab-content">
+                            <div role="tabpanel" class="tab-pane fade" id="settings-image-manager-view">
+                                <h2 lang="en">Loading...</h2>
+                                <div class="clearfix"></div>
+                            </div>
+                        </div>
+                    </section>
                     <! -- PLUGINS -->
                     <section id="settings-main-plugins">
                         <h2 lang="en">Plugins</h2>

css/colors/blue-dark.css

@@ -403,6 +403,16 @@ body.stop-scrolling {
   float: left;
   border-right: transparent;
 }
+.tabs-style-flip {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+.elip{
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: block;
+}
 .table-hover>tbody>tr:hover, .table-striped>tbody>tr:nth-of-type(odd), .table>tbody>tr.active>td, .table>tbody>tr.active>th, .table>tbody>tr>td.active, .table>tbody>tr>th.active, .table>tfoot>tr.active>td, .table>tfoot>tr.active>th, .table>tfoot>tr>td.active, .table>tfoot>tr>th.active, .table>thead>tr.active>td, .table>thead>tr.active>th, .table>thead>tr>td.active, .table>thead>tr>th.active {
   background-color: #1f1f1f!important;
 }

index.php

@@ -113,6 +113,7 @@
 	<script src="js/jquery-lang.js"></script>
 	<script src="js/jquery-ui.min.js"></script>
 	<script src="js/jquery.serializeToJSON.js"></script>
+	<script src="js/lazyload.min.js"></script>
 	<script src="plugins/bower_components/blockUI/jquery.blockUI.js"></script>
 	<script src="plugins/bower_components/datatables/jquery.dataTables.min.js"></script>
 	<script src="plugins\bower_components\datatables-plugins\sorting\datetime-moment.js"></script>

js/cbpFWTabs.js

@@ -40,7 +40,7 @@
 		// current index
 		this.current = -1;
 		// show current content item
-		this._show(4);
+		this._show(5);
 		// init events
 		this._initEvents();
 	};

js/custom.js

@@ -71,6 +71,7 @@ function pageLoad(){
     //Start Organizr
     $(function () {
         $('#side-menu').metisMenu();
+        lazyload();
     });
     $(".colorpicker").asColorPicker({
         mode: 'complex',

js/functions.js

@@ -472,25 +472,6 @@ function buildFormItem(item){
 	}
 }
 function buildCustomizeAppearanceItem(array){
-	/*
-	<!-- FORM GROUP -->
-	<h3 class="box-title">Person Info</h3>
-	<hr class="m-t-0 m-b-40">
-	<div class="row">
-
-		<!-- INPUT BOX -->
-		<div class="col-md-6">
-			<div class="form-group">
-				<label class="control-label col-md-3" lang="en">First Name</label>
-				<div class="col-md-9">
-					<input type="text" class="form-control" placeholder="John doe"></div>
-			</div>
-		</div>
-		<!--/ INPUT BOX -->
-
-	</div>
-	<!--/ FORM GROUP -->
-	*/
 	if (Array.isArray(array.config)) {
 		var preRowConfig = `
 			<!-- FORM GROUP -->
@@ -518,6 +499,47 @@ function buildCustomizeAppearanceItem(array){
 
 	return customizeItems;
 }
+function buildImageManagerViewItem(array){
+	var imageListing = '';
+	if (Array.isArray(array)) {
+		$.each(array, function(i,v) {
+			var filepath = v.split("/");
+			var name = filepath[3].split(".");
+			imageListing += `
+			<div class="col-lg-2 col-md-3 col-sm-4 col-xs-4">
+				<div class="white-box">
+					<div class="el-card-item p-0">
+						<div class="el-card-avatar el-overlay-1"> <img class="lazyload" data-src="`+v+`">
+							<div class="el-overlay">
+								<ul class="el-info">
+									<li><a class="btn default btn-outline" href="javascript:void(0);"><i class="ti-clipboard"></i></a></li>
+									<li><a class="btn default btn-outline" href="javascript:void(0);"><i class="icon-trash"></i></a></li>
+								</ul>
+							</div>
+						</div>
+						<div class="el-card-content">
+							<small class="elip text-uppercase">`+name[0]+`</small>
+							<br> </div>
+					</div>
+				</div>
+			</div>
+			`;
+		});
+	}
+	return imageListing;
+}
+function buildImageManagerView(){
+	ajaxloader(".content-wrap","in");
+	organizrAPI('GET','api/?v1/image/list').success(function(data) {
+		var response = JSON.parse(data);
+		console.log(response);
+		$('#settings-image-manager-list').html(buildImageManagerViewItem(response.data));
+		;
+	}).fail(function(xhr) {
+		console.error("Organizr Function: API Connection Failed");
+	});
+	ajaxloader();
+}
 function buildCustomizeAppearance(){
 	ajaxloader(".content-wrap","in");
 	organizrAPI('GET','api/?v1/customize/appearance').success(function(data) {