- added HProgressBar to RiderCardDrawer

- added Spacer class insted of padding & gap

project.xml

@@ -21,6 +21,7 @@
 	<haxelib name="hx-color-trace"/>
 	<haxelib name="svg" />
 	<haxelib name="haxe-strings" />
+	<haxelib name="fuzzaldrin" />
 
 	<icon path="assets/icons/app_icon_1024.svg"/>
 

src/components/RidersListRendererAccessory.hx

@@ -41,11 +41,11 @@ class RidersListRendererAccessory extends LayoutGroup {
 		var iconColor:Int;
 		var fnt:Font = Assets.getFont(Constants.MONTSERRAT_MEDIUM_500);
 
-		if (riderCredit <= 0) {
+		if (riderCredit <= Constants.CREDIT_ULTRA_LOW_LIMIT) {
 			iconColor = Constants.ALARM;
-		} else if (riderCredit <= 2) {
+		} else if (riderCredit <= Constants.CREDIT_LOW_LIMIT) {
 			iconColor = Constants.ALERT;
-		} else if (riderCredit <= 6) {
+		} else if (riderCredit <= Constants.CREDIT_AVERAGE_LIMIT) {
 			iconColor = Constants.WARNING;
 		} else {
 			iconColor = Constants.INFO;

src/components/VSpacer.hx

@@ -0,0 +1,28 @@
+package components;
+
+import feathers.skins.RectangleSkin;
+import feathers.controls.LayoutGroup;
+import t9.util.ColorTraces.*;
+
+class VSpacer extends LayoutGroup {
+
+    private var spacerHeight:Int;
+    private var spacerColor:Int;
+    private var spacerAlpha:Float;
+
+	public function new(pSpacerHeight:Int = 10, pSpacerColor:Int = 0xFFFFFF, pSpacerAlpha:Float = 0) {
+		super();
+
+        spacerHeight = pSpacerHeight;
+        spacerColor = pSpacerColor;
+        spacerAlpha = pSpacerAlpha;
+	}
+
+	override private function initialize():Void {
+		super.initialize();
+
+        var rs:RectangleSkin = new RectangleSkin(SolidColor(spacerColor, spacerAlpha));
+        rs.height = spacerHeight;
+        backgroundSkin = rs;
+    }
+}

src/model/Constants.hx

@@ -57,6 +57,13 @@ class Constants {
     public static final BUTTONS_ICON_SIZE:Int = 32;
     public static final GLOBAL_CORNER_RADIUS:Int = 5;
     public static final GLOBAL_BUTTON_ICON_OFFSET:Int = -10;
+     public static final GLOBAL_PADDING:Int = 10;
+
+    // Credit limits
+    public static final CREDIT_ULTRA_LOW_LIMIT:Int = 1;
+    public static final CREDIT_LOW_LIMIT:Int = 2;
+    public static final CREDIT_AVERAGE_LIMIT:Int = 6;
+    public static final CREDIT_UP_LIMIT:Int = 10;
 
 
 }

src/ui/LPTCTheme.hx

@@ -1,5 +1,6 @@
 package ui;
 
+import feathers.controls.HProgressBar;
 import feathers.controls.TextInputState;
 import feathers.controls.TextInput;
 import openfl.Assets;
@@ -17,6 +18,11 @@ class LPTCTheme extends ClassVariantTheme {
 
     public static final TEXT_INPUT_VARIANT_SEARCH:String = "textInputVariantSearch";
 
+	public static final H_PROGRESS_BAR_VARIANT_INFO:String = "HProgressBarVariantInfo";
+	public static final H_PROGRESS_BAR_VARIANT_WARNING:String = "HProgressBarVariantWarning";
+	public static final H_PROGRESS_BAR_VARIANT_ALERT:String = "HProgressBarVariantAlert";
+	public static final H_PROGRESS_BAR_VARIANT_ALARM:String = "HProgressBarVariantAlarm";
+
 	public function new() {
 		super();
 
@@ -24,11 +30,19 @@ class LPTCTheme extends ClassVariantTheme {
 	}
 
 	private function initialize():Void {
+		// Buttons
         styleProvider.setStyleFunction(Button, null, setButtonStyles);
         styleProvider.setStyleFunction(Button, LPTCTheme.BUTTON_VARIANT_WHITE, setWhiteButtonStyles);
         styleProvider.setStyleFunction(Button, LPTCTheme.BUTTON_VARIANT_ORANGE, setOrangeButtonStyles);
 
-        styleProvider.setStyleFunction(TextInput, null, setSearchTextInputStyles);
+		// TextInput
+        styleProvider.setStyleFunction(TextInput, LPTCTheme.TEXT_INPUT_VARIANT_SEARCH, setSearchTextInputStyles);
+
+		//HProgressBar
+		styleProvider.setStyleFunction(HProgressBar, LPTCTheme.H_PROGRESS_BAR_VARIANT_INFO, setHProgressBarInfoStyles);
+		styleProvider.setStyleFunction(HProgressBar, LPTCTheme.H_PROGRESS_BAR_VARIANT_WARNING, setHProgressBarWarningStyles);
+		styleProvider.setStyleFunction(HProgressBar, LPTCTheme.H_PROGRESS_BAR_VARIANT_ALERT, setHProgressBarAlertStyles);
+		styleProvider.setStyleFunction(HProgressBar, LPTCTheme.H_PROGRESS_BAR_VARIANT_ALARM, setHProgressBarAlarmStyles);
     }
 
     //############################################################### BUTTONS
@@ -104,7 +118,7 @@ class LPTCTheme extends ClassVariantTheme {
         button.iconOffsetX = Constants.GLOBAL_BUTTON_ICON_OFFSET;
     }
 
-    //############################################################### TEXT_INPUTS
+    //############################################################### TEXT INPUT
     private function setSearchTextInputStyles(pTextInput:TextInput):Void {
 
 		var backgroundSkin = new RectangleSkin();
@@ -140,4 +154,73 @@ class LPTCTheme extends ClassVariantTheme {
         pTextInput.embedFonts = true;
         
 	}
+
+	//############################################################### PROGRESS BAR
+	private function setHProgressBarInfoStyles(pHProgrssBar:HProgressBar):Void {
+
+        var backgroundSkin = new RectangleSkin();
+		backgroundSkin.border = null;
+		backgroundSkin.fill = SolidColor(Constants.MAIN_COLOR1, .2);
+		backgroundSkin.height = 10;
+		backgroundSkin.cornerRadius = 4;
+		pHProgrssBar.backgroundSkin = backgroundSkin;
+
+		var fillSkin = new RectangleSkin();
+		fillSkin.border = null;
+		fillSkin.fill = SolidColor(Constants.INFO);
+		backgroundSkin.height = 10;
+		fillSkin.cornerRadius = 4;
+		pHProgrssBar.fillSkin = fillSkin;
+    }
+
+	private function setHProgressBarWarningStyles(pHProgrssBar:HProgressBar):Void {
+
+        var backgroundSkin = new RectangleSkin();
+		backgroundSkin.border = null;
+		backgroundSkin.fill = SolidColor(Constants.MAIN_COLOR1, .2);
+		backgroundSkin.height = 10;
+		backgroundSkin.cornerRadius = 4;
+		pHProgrssBar.backgroundSkin = backgroundSkin;
+
+		var fillSkin = new RectangleSkin();
+		fillSkin.border = null;
+		fillSkin.fill = SolidColor(Constants.WARNING);
+		backgroundSkin.height = 10;
+		fillSkin.cornerRadius = 4;
+		pHProgrssBar.fillSkin = fillSkin;
+    }
+
+	private function setHProgressBarAlertStyles(pHProgrssBar:HProgressBar):Void {
+
+        var backgroundSkin = new RectangleSkin();
+		backgroundSkin.border = null;
+		backgroundSkin.fill = SolidColor(Constants.MAIN_COLOR1, .2);
+		backgroundSkin.height = 10;
+		backgroundSkin.cornerRadius = 4;
+		pHProgrssBar.backgroundSkin = backgroundSkin;
+
+		var fillSkin = new RectangleSkin();
+		fillSkin.border = null;
+		fillSkin.fill = SolidColor(Constants.ALERT);
+		backgroundSkin.height = 10;
+		fillSkin.cornerRadius = 4;
+		pHProgrssBar.fillSkin = fillSkin;
+    }
+
+	private function setHProgressBarAlarmStyles(pHProgrssBar:HProgressBar):Void {
+
+        var backgroundSkin = new RectangleSkin();
+		backgroundSkin.border = null;
+		backgroundSkin.fill = SolidColor(Constants.MAIN_COLOR1, .2);
+		backgroundSkin.height = 10;
+		backgroundSkin.cornerRadius = 4;
+		pHProgrssBar.backgroundSkin = backgroundSkin;
+
+		var fillSkin = new RectangleSkin();
+		fillSkin.border = null;
+		fillSkin.fill = SolidColor(Constants.ALARM);
+		backgroundSkin.height = 10;
+		fillSkin.cornerRadius = 4;
+		pHProgrssBar.fillSkin = fillSkin;
+    }
 }

src/view/RiderCardDrawer.hx

@@ -1,16 +1,14 @@
 package view;
 
-import model.String.Strings;
+import components.VSpacer;
-import feathers.controls.ScrollContainer;
-import ui.SVGIconFactory;
-import feathers.controls.ButtonState;
-import openfl.display.Bitmap;
-import ui.LPTCTheme;
-import feathers.controls.Label;
 import feathers.controls.AssetLoader;
 import feathers.controls.Button;
+import feathers.controls.ButtonState;
 import feathers.controls.Drawer;
+import feathers.controls.HProgressBar;
+import feathers.controls.Label;
 import feathers.controls.LayoutGroup;
+import feathers.controls.ScrollContainer;
 import feathers.controls.TextInput;
 import feathers.events.FeathersEvent;
 import feathers.events.TriggerEvent;
@@ -18,10 +16,13 @@ import feathers.layout.VerticalLayout;
 import feathers.skins.RectangleSkin;
 import model.AppModelLocator;
 import model.Constants;
+import model.String.Strings;
 import openfl.Assets;
 import openfl.events.Event;
 import openfl.text.TextFormat;
 import t9.util.ColorTraces.*;
+import ui.LPTCTheme;
+import ui.SVGIconFactory;
 import vo.RiderVO;
 
 class RiderCardDrawer extends Drawer {
@@ -29,14 +30,14 @@ class RiderCardDrawer extends Drawer {
 	public static final OPEN:String = "open";
 
 	private var model:AppModelLocator;
-	private final spacing:Int = 10;
 
 	// components
 	private var ppal:AssetLoader;
 	private var closeDrawerButton:Button;
-	private var firstNameTextInput:TextInput;
+	private var firstNameLabel:Label;
-	private var nameTextInput:TextInput;
+	private var nameLabel:Label;
-	private var remainingCreditLabel:Label;
+	private var creditLabel:Label;
+	private var creditProgressBar:HProgressBar;
 	private var removeOneCredit:Button;
 
 	public function new() {
@@ -61,12 +62,15 @@ class RiderCardDrawer extends Drawer {
 		mainScrollContainer.autoSizeMode = STAGE;
 
 		var mainVerticalLayout = new VerticalLayout();
-		mainVerticalLayout.setPadding(spacing);
+		mainVerticalLayout.paddingLeft = mainVerticalLayout.paddingRight = Constants.GLOBAL_PADDING;
-		mainVerticalLayout.gap = spacing;
+		//mainVerticalLayout.gap = Constants.GLOBAL_PADDING;
 		mainVerticalLayout.horizontalAlign = JUSTIFY;
 		mainVerticalLayout.verticalAlign = TOP;
 		mainScrollContainer.layout = mainVerticalLayout;
 
+		// ##### SPACER
+		mainScrollContainer.addChild(new VSpacer(10));
+
 		// close button
 		closeDrawerButton = new Button();
 		closeDrawerButton.text = "Close Drawer";
@@ -75,52 +79,76 @@ class RiderCardDrawer extends Drawer {
 		});
 		mainScrollContainer.addChild(closeDrawerButton);
 
+		// ##### SPACER
+		mainScrollContainer.addChild(new VSpacer(10));
+
 		// profile picture
 		ppal = new AssetLoader();
 		ppal.addEventListener(Event.COMPLETE, onPPLoaded);
 		mainScrollContainer.addChild(ppal);
 
-		// ########################################################################## FIRSTNAME & NAME TEXT INPUTS
+		// ##### SPACER
+		mainScrollContainer.addChild(new VSpacer(10));
+
+		// ########################################################################## FIRSTNAME & NAME LABELS
 		// layout
 		var lg1:LayoutGroup = new LayoutGroup();
-		lg1.backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR1, 0.1));
+		lg1.backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR1, 0));
 		var vl1:VerticalLayout = new VerticalLayout();
-		vl1.setPadding(spacing);
-		vl1.gap = -spacing;
 		vl1.horizontalAlign = JUSTIFY;
 		lg1.layout = vl1;
 		mainScrollContainer.addChild(lg1);
 
-		// first name textInput
+		// first name Label
-		firstNameTextInput = new TextInput();
+		firstNameLabel = new Label();
-		firstNameTextInput.backgroundSkin = null;
+		firstNameLabel.setPadding(0);
-		firstNameTextInput.embedFonts = true;
+		firstNameLabel.backgroundSkin = null;
-		firstNameTextInput.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_26, Constants.MAIN_COLOR1);
+		firstNameLabel.embedFonts = true;
-		lg1.addChild(firstNameTextInput);
+		firstNameLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_26, Constants.MAIN_COLOR1);
+		lg1.addChild(firstNameLabel);
 
-		// name textInput
+		// name Label
-		nameTextInput = new TextInput();
+		nameLabel = new Label();
-		nameTextInput.backgroundSkin = null;
+		nameLabel.setPadding(0);
-		nameTextInput.embedFonts = true;
+		nameLabel.backgroundSkin = null;
-		nameTextInput.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_22, Constants.MAIN_COLOR2);
+		nameLabel.embedFonts = true;
-		lg1.addChild(nameTextInput);
+		nameLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_22, Constants.MAIN_COLOR2);
+		lg1.addChild(nameLabel);
+
+		// ##### SPACER
+		mainScrollContainer.addChild(new VSpacer(10));
 
 		// ########################################################################## Remaining credit label
-		remainingCreditLabel = new Label();
+		creditLabel = new Label();
-		remainingCreditLabel.embedFonts = true;
+		creditLabel.embedFonts = true;
-		remainingCreditLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_16, Constants.MAIN_COLOR1);
+		creditLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_16, Constants.MAIN_COLOR1);
-		mainScrollContainer.addChild(remainingCreditLabel);
+		mainScrollContainer.addChild(creditLabel);
+
+		// ##### SPACER
+		mainScrollContainer.addChild(new VSpacer(10));
+
+		// ########################################################################## credit progress bar
+		creditProgressBar = new HProgressBar(0, 0, 10);
+		mainScrollContainer.addChild(creditProgressBar);
+
+		// ##### SPACER
+		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, SVGIconFactory.makeIcon("vector/ticket_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.HERO_COLOR));
+		removeOneCredit.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) -> {
 			traceRed("removeOneCredit()");
 		});
 		mainScrollContainer.addChild(removeOneCredit);
 
+		// ##### SPACER
+		mainScrollContainer.addChild(new VSpacer(10));
+		//mainScrollContainer.addChild(new VSpacer(2, Constants.MAIN_COLOR2, 1));
+
 		drawer = mainScrollContainer;
 	}
 
@@ -130,33 +158,45 @@ class RiderCardDrawer extends Drawer {
 
 	public function populateAndShow() {
 		var rvo:RiderVO = model.selectedRider;
-		
+
 		// profile picture
 		ppal.source = "https://lepetittrot.com/lptcm/assets/profile-pictures/pp512/pp_test_512.jpg";
 		ppal.source = Constants.PROFIL_PICTURES_PATH_512 + rvo.uid + ".jpg";
 
 		// first name text input
-		firstNameTextInput.text = rvo.firstName;
+		firstNameLabel.text = rvo.firstName;
-		if (!firstNameTextInput.hasEventListener(Event.CHANGE)) {
+		if (!firstNameLabel.hasEventListener(Event.CHANGE)) {
-			firstNameTextInput.addEventListener(Event.CHANGE, (e) -> {
+			firstNameLabel.addEventListener(Event.CHANGE, (e) -> {
-				if (firstNameTextInput.text != model.selectedRider.firstName) {
+				if (firstNameLabel.text != model.selectedRider.firstName) {
-					model.updateSelectedRiderProp(RiderVO.FIRST_NAME, firstNameTextInput.text);
+					model.updateSelectedRiderProp(RiderVO.FIRST_NAME, firstNameLabel.text);
 				}
 			});
 		}
-		
+
 		// name text input
-		nameTextInput.text = rvo.name;
+		nameLabel.text = rvo.name;
-		if (!nameTextInput.hasEventListener(Event.CHANGE)) {
+		if (!nameLabel.hasEventListener(Event.CHANGE)) {
-			nameTextInput.addEventListener(Event.CHANGE, (e) -> {
+			nameLabel.addEventListener(Event.CHANGE, (e) -> {
-				if (nameTextInput.text != model.selectedRider.name) {
+				if (nameLabel.text != model.selectedRider.name) {
-					model.updateSelectedRiderProp(RiderVO.NAME, nameTextInput.text);
+					model.updateSelectedRiderProp(RiderVO.NAME, nameLabel.text);
 				}
 			});
 		}
 
 		// remaing credit text
-		remainingCreditLabel.text = Strings.RCD_S1 + Std.string(rvo.credit);
+		creditLabel.text = Strings.RCD_S1 + Std.string(rvo.credit);
+
+		// 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();
 	}

src/view/RidersList.hx

@@ -1,5 +1,6 @@
 package view;
 
+import fuzzaldrin.Fuzzaldrin;
 import com.adobe.cairngorm.control.CairngormEventDispatcher;
 import components.RidersListRendererAccessory;
 import components.RoundAvatar;
@@ -89,6 +90,9 @@ class RidersList extends ListView {
 			return item.firstName;
 		};*/
 		traceGreen(this + " --> onRideListDpChange()");
+
+		//var results = Fuzzaldrin.filter(cast(model.ridersListDP, Array<Dynamic>), 'Test', { key: RiderVO.FIRST_NAME });
+		//traceRed("fuzzy search : " + results);
 	}
 
 	function onRiderSelect(e:ListViewEvent):Void {