MXHX try

project.xml

@@ -22,6 +22,9 @@
 	<haxelib name="svg" />
 	<haxelib name="haxe-strings" />
 	<haxelib name="fuzzaldrin" />
+	<haxelib name="bindx2" />
+	<haxelib name="mxhx-feathersui" />
+	<haxelib name="mxhx-component" />
 
 	<icon path="assets/icons/app_icon.svg"/>
 
@@ -43,6 +46,8 @@
 	<config:android permission="android.permission.INTERNET" />
 	<config:android permission="android.permission.ACCESS_NETWORK_STATE" />
 
+	<define name="mxhx_disable_experimental_warning"/>
+
 
 
 </project>

src/model/AppModelLocator.hx

@@ -10,26 +10,25 @@ import openfl.events.EventDispatcher;
 import t9.util.ColorTraces.*;
 
 class AppModelLocator extends EventDispatcher implements IModelLocator {
-
-    // events constants
-    public static final VIEWING_CHANGE:String = "viewingChange";
-    public static final RIDERS_LIST_DP_CHANGE:String = "ridersListDPChange";
+	// events constants
+	public static final VIEWING_CHANGE:String = "viewingChange";
+	public static final RIDERS_LIST_DP_CHANGE:String = "ridersListDPChange";
 	public static final DRAWER_STATE_CHANGE:String = "drawerStateChange";
 	public static final RIDER_SELECT_CHANGE:String = "riderSelectChange";
 
-    // this instance stores a static reference to itself
+	// this instance stores a static reference to itself
 	private static var model:AppModelLocator;
 
-    // available values for the main viewstack defined as constants to help uncover errors at compile time instead of run time
+	// available values for the main viewstack defined as constants to help uncover errors at compile time instead of run time
 	// Navigator
 	public static final ADMIN_LOGIN = 0;
 	public static final RIDERS_LIST = 1;
 	public static final RIDER_DETAIL = 2;
 
-    // viewstack starts out on the admin login screen
+	// viewstack starts out on the admin login screen
 	public var viewing(default, set):Int = ADMIN_LOGIN;
 
-    private function set_viewing(value:Int):Int {
+	private function set_viewing(value:Int):Int {
 		viewing = value;
 		dispatchEvent(new Event(VIEWING_CHANGE));
 		return viewing;
@@ -38,7 +37,7 @@ class AppModelLocator extends EventDispatcher implements IModelLocator {
 	// at startup, the drawer is closed
 	public var drawerIsOpen(default, set):Bool = false;
 
-    private function set_drawerIsOpen(pIsOpen:Bool):Bool {
+	private function set_drawerIsOpen(pIsOpen:Bool):Bool {
 		drawerIsOpen = pIsOpen;
 		dispatchEvent(new Event(AppModelLocator.DRAWER_STATE_CHANGE));
 		return drawerIsOpen;
@@ -48,7 +47,7 @@ class AppModelLocator extends EventDispatcher implements IModelLocator {
 	// this gets copied into or added onto the main rider list
 	public var selectedRider(default, set):RiderVO = null;
 
-    private function set_selectedRider(pRider:RiderVO):RiderVO {
+	private function set_selectedRider(pRider:RiderVO):RiderVO {
 		selectedRider = pRider;
 		dispatchEvent(new Event(AppModelLocator.RIDER_SELECT_CHANGE));
 		return selectedRider;
@@ -61,23 +60,30 @@ class AppModelLocator extends EventDispatcher implements IModelLocator {
 		traceYellow(Reflect.field(selectedRider, pProperty));
 	}
 
-    // contains the main riders list which is populated on startup
+	// contains the main riders list which is populated on startup
 	// mx:application's creationComplete event is mutated into a cairngorm event
 	// that calls the httpservice for the data
 	public var ridersListDP(default, set):ArrayCollection<RiderVO>;
 
-    private function set_ridersListDP(value:ArrayCollection<RiderVO>):ArrayCollection<RiderVO> {
+	private function set_ridersListDP(value:ArrayCollection<RiderVO>):ArrayCollection<RiderVO> {
 		ridersListDP = value;
 		dispatchEvent(new Event(AppModelLocator.RIDERS_LIST_DP_CHANGE));
 		return ridersListDP;
 	}
 
-    // variable to store error messages from the httpservice 
-    // nothinng currently binds to it, but an Alert or the login box could to show startup errors
+	public function filterRiderListDP(pTestValue:String) {
+		ridersListDP.filterFunction = function(rider:RiderVO):Bool {
+			return StringTools.contains(rider.firstName.toLowerCase(), pTestValue.toLowerCase());
+		};
+		//ridersListDP.refresh();
+		dispatchEvent(new Event(AppModelLocator.RIDERS_LIST_DP_CHANGE));
+	}
+
+	// variable to store error messages from the httpservice
+	// nothinng currently binds to it, but an Alert or the login box could to show startup errors
 	public var errorStatus:String;
 
-
-    // singleton: constructor only allows one model locator
+	// singleton: constructor only allows one model locator
 	public function new() {
 		super();
 		if (AppModelLocator.model != null) {
@@ -95,5 +101,4 @@ class AppModelLocator extends EventDispatcher implements IModelLocator {
 	public function addRider(pRider:RiderVO) {
 		ridersListDP.add(pRider);
 	}
-
 }

src/view/ConfirmationPanel.hx

@@ -102,6 +102,7 @@ class ConfirmationPanel extends Panel {
         b2.setIconForState(ButtonState.DOWN, SVGIconFactory.makeIcon("vector/check_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.HERO_COLOR));
         b2.addEventListener(TriggerEvent.TRIGGER, (e) -> {
 			confirmFunction();
+            PopUpManager.removePopUp(this);
 		});
 
         // footer

src/view/MainDrawer.hx

@@ -17,7 +17,6 @@ class MainDrawer extends Drawer {
 
     private var openDrawerButton:Button;
     private var closeDrawerButton:Button;
-	private var coucou:Bool;
 
 	public function new() {
 		super();

src/view/MainPanel.hx

@@ -1,5 +1,6 @@
 package view;
 
+import openfl.events.Event;
 import feathers.controls.Panel;
 import feathers.controls.navigators.StackItem;
 import feathers.controls.navigators.StackNavigator;

src/view/MyMXHXComp.mxhx

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<f:LayoutGroup xmlns:mx="https://ns.mxhx.dev/2024/mxhx" xmlns:f="https://ns.feathersui.com/mxhx">
+  <!-- <f:Button text="{Date.now().toString()}" width="150" height="40" click="{trace('Hi!');}"/>-->
+  <f:Button text="{Date.now().toString()}" width="150" height="40" click="{trace('Hi!');}"/>
+</f:LayoutGroup>

src/view/RiderCardDrawer.hx

@@ -1,7 +1,6 @@
 package view;
 
-import openfl.utils.Function;
-import feathers.core.PopUpManager;
+import bindx.Bind;
 import components.VSpacer;
 import feathers.controls.AssetLoader;
 import feathers.controls.Button;
@@ -11,7 +10,7 @@ import feathers.controls.HProgressBar;
 import feathers.controls.Label;
 import feathers.controls.LayoutGroup;
 import feathers.controls.ScrollContainer;
-import feathers.controls.TextInput;
+import feathers.core.PopUpManager;
 import feathers.events.FeathersEvent;
 import feathers.events.TriggerEvent;
 import feathers.layout.VerticalLayout;
@@ -19,9 +18,11 @@ import feathers.skins.RectangleSkin;
 import model.AppModelLocator;
 import model.Constants;
 import model.String.Strings;
+import mxhx.macros.MXHXComponent;
 import openfl.Assets;
 import openfl.events.Event;
 import openfl.text.TextFormat;
+import openfl.utils.Function;
 import t9.util.ColorTraces.*;
 import ui.LPTCTheme;
 import ui.SVGIconFactory;
@@ -40,7 +41,9 @@ class RiderCardDrawer extends Drawer {
 	private var nameLabel:Label;
 	private var creditLabel:Label;
 	private var creditProgressBar:HProgressBar;
-	private var removeOneCredit:Button;
+	private var removeOneCreditButton:Button;
+	private var lastLessonDateTextLabel:Label;
+	private var lastLessonDateValueLabel:Label;
 
 	public function new() {
 		super();
@@ -65,7 +68,7 @@ class RiderCardDrawer extends Drawer {
 
 		var mainVerticalLayout = new VerticalLayout();
 		mainVerticalLayout.paddingLeft = mainVerticalLayout.paddingRight = Constants.GLOBAL_PADDING;
-		//mainVerticalLayout.gap = Constants.GLOBAL_PADDING;
+		// mainVerticalLayout.gap = Constants.GLOBAL_PADDING;
 		mainVerticalLayout.horizontalAlign = JUSTIFY;
 		mainVerticalLayout.verticalAlign = TOP;
 		mainScrollContainer.layout = mainVerticalLayout;
@@ -86,13 +89,13 @@ class RiderCardDrawer extends Drawer {
 
 		// profile picture
 		ppal = new AssetLoader();
-		ppal.addEventListener(Event.COMPLETE, onPPLoaded);
+		// ppal.addEventListener(Event.COMPLETE, (e:Event) -> cast(e.currentTarget, AssetLoader).validateNow());
 		mainScrollContainer.addChild(ppal);
 
 		// ##### SPACER
 		mainScrollContainer.addChild(new VSpacer(10));
 
-		// ########################################################################## FIRSTNAME & NAME LABELS
+		// ########################################################################## firstname & name labels group
 		// layout
 		var lg1:LayoutGroup = new LayoutGroup();
 		lg1.backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR1, 0));
@@ -137,41 +140,79 @@ class RiderCardDrawer extends Drawer {
 		mainScrollContainer.addChild(new VSpacer(10));
 
 		// ########################################################################## Remove 1 credit button
-		removeOneCredit = new Button();
-		removeOneCredit.icon = SVGIconFactory.makeIcon("vector/ticket_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.MAIN_COLOR3);
-		removeOneCredit.setIconForState(ButtonState.DOWN,
+		removeOneCreditButton = new Button();
+		removeOneCreditButton.icon = SVGIconFactory.makeIcon("vector/ticket_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.MAIN_COLOR3);
+		removeOneCreditButton.setIconForState(ButtonState.DOWN,
 			SVGIconFactory.makeIcon("vector/ticket_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.HERO_COLOR));
-		removeOneCredit.text = Strings.RCD_S2;
-		removeOneCredit.addEventListener(TriggerEvent.TRIGGER, (e) -> {
+		removeOneCreditButton.text = Strings.RCD_S2;
+		removeOneCreditButton.addEventListener(TriggerEvent.TRIGGER, (e) -> {
 			traceRed("removeOneCredit()");
 			// this function will be exectuted when the user will click on the ConfirmationPanel's "confirm" button
-			var f:Function = function () {
+			var f:Function = function() {
 				trace("remove 1 credit to selected rider in model");
-				// TODO remove 1 credit to selected rider in model
+				model.selectedRider.credit--;
 			}
 			PopUpManager.addPopUp(new ConfirmationPanel(Strings.CP_S2, Strings.CP_S3, f), parent, true, true);
 		});
-		mainScrollContainer.addChild(removeOneCredit);
+		mainScrollContainer.addChild(removeOneCreditButton);
 
 		// ##### SPACER
 		mainScrollContainer.addChild(new VSpacer(10));
-		//mainScrollContainer.addChild(new VSpacer(2, Constants.MAIN_COLOR2, 1));
+		// mainScrollContainer.addChild(new VSpacer(2, Constants.MAIN_COLOR2, 1));
+
+		// ########################################################################## rider basic infos group (lastLessonDate, age, level)
+		/*var lg2:LayoutGroup = new LayoutGroup();
+		lg2.backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR3, 1));
+		var vl2:VerticalLayout = new VerticalLayout();
+		vl2.horizontalAlign = JUSTIFY;
+		lg2.layout = vl2;
+		mainScrollContainer.addChild(lg2);
+		
+		lastLessonDateTextLabel = new Label();
+		lastLessonDateTextLabel.embedFonts = true;
+		lastLessonDateTextLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_12, Constants.MAIN_COLOR1);
+		lastLessonDateTextLabel.text = "Dernier cours";
+		lg2.addChild(lastLessonDateTextLabel);*/
+
+		/*var m = MXHXComponent.withMarkup('
+		<f:LayoutGroup xmlns:mx="https://ns.mxhx.dev/2024/basic" xmlns:f="https://ns.feathersui.com/mxhx">
+        	<f:layout>
+            	<f:HorizontalLayout gap="10" horizontalAlign="RIGHT"/>
+        	</f:layout>
+        	<f:Button id="okButton" text="OK"/>
+        	<f:Button id="cancelButton" text="Cancel"/>
+		</f:LayoutGroup>
+		');*/
+
+		var m = MXHXComponent.withFile('MyMXHXcomp.mxhx');
+		mainScrollContainer.addChild(m);
+
+		
+		//mainScrollContainer.addChild(m);
 
 		drawer = mainScrollContainer;
 	}
 
+
+
+
+	
 	private function onCreationComplete(e:FeathersEvent):Void {
 		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height);
 	}
 
+
+
+
+
 	public function populateAndShow() {
-		var rvo:RiderVO = model.selectedRider;
+		// var rvo:RiderVO = model.selectedRider;
 
 		// profile picture
-		ppal.source = Constants.PROFIL_PICTURES_PATH_512 + rvo.uid + ".jpg";
+		ppal.source = Constants.PROFIL_PICTURES_PATH_512 + model.selectedRider.uid + ".jpg";
 
 		// first name text input
-		firstNameLabel.text = rvo.firstName;
+		firstNameLabel.text = model.selectedRider.firstName;
 		if (!firstNameLabel.hasEventListener(Event.CHANGE)) {
 			firstNameLabel.addEventListener(Event.CHANGE, (e) -> {
 				if (firstNameLabel.text != model.selectedRider.firstName) {
@@ -181,7 +222,7 @@ class RiderCardDrawer extends Drawer {
 		}
 
 		// name text input
-		nameLabel.text = rvo.name;
+		nameLabel.text = model.selectedRider.name;
 		if (!nameLabel.hasEventListener(Event.CHANGE)) {
 			nameLabel.addEventListener(Event.CHANGE, (e) -> {
 				if (nameLabel.text != model.selectedRider.name) {
@@ -190,27 +231,29 @@ class RiderCardDrawer extends Drawer {
 			});
 		}
 
-		// remaing credit text
-		creditLabel.text = Strings.RCD_S1 + Std.string(rvo.credit);
+		// remaining credit label & progress bar
+		updateCreditUIElments(null, model.selectedRider.credit);
+		Bind.bind(model.selectedRider.credit, updateCreditUIElments);
+
 		
-		// remaining credit progress bar
-		if (rvo.credit <= Constants.CREDIT_ULTRA_LOW_LIMIT) {
-			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_ALARM;
-		} else if (rvo.credit <= Constants.CREDIT_LOW_LIMIT) {
-			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_ALERT;
-		} else if (rvo.credit <= Constants.CREDIT_AVERAGE_LIMIT) {
-			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_WARNING;
-		} else {
-			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_INFO;
-		}
-		creditProgressBar.value = rvo.credit;
 
 		openDrawer();
 	}
 
-	private function onPPLoaded(e:Event):Void {
-		var rvo:RiderVO = model.selectedRider;
-		var al:AssetLoader = cast(e.currentTarget, AssetLoader);
-		al.validateNow();
+	// update remaining credit label and progress bar
+	private function updateCreditUIElments(pFromValue:Dynamic, pToValue:Dynamic) {
+
+		creditLabel.text = Strings.RCD_S1 + Std.string(pToValue);
+
+		if (pToValue <= Constants.CREDIT_ULTRA_LOW_LIMIT) {
+			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_ALARM;
+		} else if (pToValue <= Constants.CREDIT_LOW_LIMIT) {
+			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_ALERT;
+		} else if (pToValue <= Constants.CREDIT_AVERAGE_LIMIT) {
+			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_WARNING;
+		} else {
+			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_INFO;
+		}
+		creditProgressBar.value = pToValue;
 	}
 }

src/view/RidersList.hx

@@ -1,5 +1,6 @@
 package view;
 
+import feathers.data.ArrayCollection;
 import fuzzaldrin.Fuzzaldrin;
 import com.adobe.cairngorm.control.CairngormEventDispatcher;
 import components.RidersListRendererAccessory;
@@ -21,11 +22,12 @@ import t9.util.ColorTraces.*;
 import vo.RiderVO;
 
 class RidersList extends ListView {
-	private var model = AppModelLocator.getInstance();
 	private var rowHeight:Int;
+	private var localRidersListDP:ArrayCollection<RiderVO>;
 
 	public function new() {
 		super();
+		localRidersListDP = new ArrayCollection();
 		addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
 		//addEventListener(Event.CHANGE, onRiderSelect);
 		addEventListener(ListViewEvent.ITEM_TRIGGER, onRiderSelect);
@@ -76,7 +78,7 @@ class RidersList extends ListView {
 				loader.source = null; */
 		};
 
-		model.addEventListener(AppModelLocator.RIDERS_LIST_DP_CHANGE, onRiderListDpChange);
+		AppModelLocator.getInstance().addEventListener(AppModelLocator.RIDERS_LIST_DP_CHANGE, onRiderListDpChange);
 	}
 
 	private function onCreationComplete(event:FeathersEvent):Void {
@@ -84,7 +86,11 @@ class RidersList extends ListView {
 	}
 
 	private function onRiderListDpChange(e:Event):Void {
-		dataProvider = model.ridersListDP;
+		
+		if(localRidersListDP.length > 0) localRidersListDP.removeAll();
+		localRidersListDP.addAll(AppModelLocator.getInstance().ridersListDP);
+		dataProvider = localRidersListDP;
+		//dataProvider = model.ridersListDP;
 
 		/*itemToText = function(item:Dynamic):String {
 			return item.firstName;

src/view/RidersScreen.hx

@@ -1,5 +1,6 @@
 package view;
 
+import lime.app.Event;
 import model.Constants;
 import feathers.skins.RectangleSkin;
 import feathers.layout.VerticalLayoutData;
@@ -9,6 +10,7 @@ import feathers.events.FeathersEvent;
 import feathers.layout.VerticalLayout;
 import feathers.controls.ScrollContainer;
 import t9.util.ColorTraces.*;
+import openfl.events.Event;
 
 class RidersScreen extends ScrollContainer {
 
@@ -33,6 +35,8 @@ class RidersScreen extends ScrollContainer {
         var vld1 = new VerticalLayoutData();
         vld1.percentHeight = 10.0;
         tb.layoutData = vld1;
+        // TODO implémenter le fuzzy search
+        //addEventListener("ToolbarEvent",  (e:Event) -> {traceRed(e);});
         addChild(tb);
     
         rl = new RidersList();

src/view/ToolBar.hx

@@ -1,5 +1,7 @@
 package view;
 
+import model.AppModelLocator;
+import openfl.events.Event;
 import model.String.Strings;
 import ui.SVGIconFactory;
 import ui.LPTCTheme;
@@ -51,6 +53,8 @@ class ToolBar extends LayoutGroup {
 		searchTextInput.variant = LPTCTheme.TEXT_INPUT_VARIANT_SEARCH;
 		searchTextInput.leftView = SVGIconFactory.makeIcon("vector/magnifier_icon_black.svg", Constants.FONT_SIZE_22, Constants.MAIN_COLOR3);
 		searchTextInput.prompt = Strings.TB_S1;
+		searchTextInput.addEventListener(Event.CHANGE, onTextInputChange);
+
 		addChild(searchTextInput);
 		
 		//lbl1.layoutData = ld1;
@@ -61,4 +65,9 @@ class ToolBar extends LayoutGroup {
 		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height );
 	}
 
+	private function onTextInputChange(e:Event) {
+		var ti:TextInput = cast(e.currentTarget, TextInput);
+		AppModelLocator.getInstance().filterRiderListDP(ti.text);
+	}
+
 }

src/vo/RiderVO.hx

@@ -1,6 +1,8 @@
 package vo;
+import bindx.IBindable;
 
-class RiderVO {
+@:bindable
+class RiderVO implements IBindable {
 
     // constants for use with Reflect api when updating SelectedRider VO
     public static final ID:String = "id";