RidersListRendererAccessory UI

assets/data/riders.json

@@ -120,7 +120,7 @@
     "age": 7,
     "lastLessonDate": 1704441600,
     "level": 0,
-    "credit": 18,
+    "credit": 0,
     "address": "9 impasse des Roses, 31000 Toulouse",
     "notes": "Très gentille, se sent à l'aise avec les équidés.",
     "ffeLicence": false,
@@ -177,7 +177,7 @@
     "age": 5,
     "lastLessonDate": 1704182400,
     "level": 0,
-    "credit": 25,
+    "credit": -10,
     "address": "2 rue des Peupliers, 59000 Lille",
     "notes": "Très attachée au poney, sociable.",
     "ffeLicence": false,

project.xml

@@ -25,10 +25,10 @@
 	<icon path="assets/icons/icon.svg"/>
 
 	<assets path="assets">
-		<font path="fonts/Montserrat/MontserratLight300.ttf" id="MontserratLight300" />	
+		<font path="fonts/Montserrat/MontserratLight300.ttf" id="MontserratLight300" embed="true"/>	
-		<font path="fonts/Montserrat/MontserratRegular400.ttf" id="MontserratRegular400" />	
+		<font path="fonts/Montserrat/MontserratRegular400.ttf" id="MontserratRegular400" embed="true"/>	
-    	<font path="fonts/Montserrat/MontserratMedium500.ttf" id="MontserratMedium500" />
+    	<font path="fonts/Montserrat/MontserratMedium500.ttf" id="MontserratMedium500" embed="true"/>
-		<font path="fonts/Montserrat/MontserratBold700.ttf" id="MontserratBold700" />
+		<font path="fonts/Montserrat/MontserratBold700.ttf" id="MontserratBold700" embed="true"/>
 	</assets>
 
 	<!-- copies data/Employees.xml to output -->

src/LPTCManager2026.hx

@@ -1,3 +1,4 @@
+import openfl.system.Security;
 import business.Services;
 import com.adobe.cairngorm.control.CairngormEventDispatcher;
 import control.AppController;
@@ -21,6 +22,10 @@ class LPTCManager2026 extends Application {
 
 	public function new() {
 		super();
+
+		Security.allowDomain("*");
+		Security.loadPolicyFile("https://lepetittrot.com/crossdomain.xml");
+
 		model = AppModelLocator.getInstance();
 		services = new Services();
 		appController = new AppController();

src/components/RidersListRendererAccessory.hx

@@ -0,0 +1,67 @@
+package components;
+
+import haxe.macro.Expr.Case;
+import feathers.text.TextFormat;
+import openfl.Assets;
+import openfl.text.Font;
+import feathers.controls.Label;
+import feathers.layout.HorizontalLayout;
+import openfl.display.Shape;
+import model.Constants;
+import feathers.skins.RectangleSkin;
+import feathers.controls.LayoutGroup;
+
+class RidersListRendererAccessory extends LayoutGroup {
+	private var elementSize:Int;
+	private var riderCredit:Int;
+
+	public function new(pElementSize:Int = 14, pRiderCredit:Int = 0) {
+		super();
+
+		elementSize = pElementSize;
+		riderCredit = pRiderCredit;
+	}
+
+	override private function initialize():Void {
+		super.initialize();
+
+		var l:HorizontalLayout = new HorizontalLayout();
+		// l.setPadding(Std.int(headerHeight * .1));
+		l.verticalAlign = MIDDLE;
+		l.gap = Std.int(elementSize * .3);
+		layout = l;
+
+		backgroundSkin = new RectangleSkin(SolidColor(Constants.PURE_WHITE, 0));
+
+		// Title label
+		var lbl1 = new Label();
+
+		// lbl1.layoutData = ld1;
+		// lb1.backgroundSkin = new RectangleSkin(SolidColor(Constants.ACCENT_COLOR2, 1));
+		// lb1.verticalAlign = VerticalAlign.TOP;
+
+		var iconColor:Int;
+		var fnt:Font = Assets.getFont(Constants.MONTSERRAT_MEDIUM_500);
+
+		if (riderCredit <= 0) {
+			iconColor = Constants.ALARM;
+		} else if (riderCredit <= 2) {
+			iconColor = Constants.ALERT;
+		} else if (riderCredit <= 6) {
+			iconColor = Constants.WARNING;
+		} else {
+			iconColor = Constants.INFO;
+		}
+
+		lbl1.text = Constants.RIDERS_LIST_CREDIT_TEXT + Std.string(riderCredit);
+		lbl1.embedFonts = true;
+		lbl1.textFormat = new TextFormat(fnt.fontName, 14, Constants.MAIN_COLOR1);
+		addChild(lbl1);
+
+		var s:Shape = new Shape();
+		s.graphics.beginFill(iconColor, 1);
+		s.graphics.drawCircle(10, 10, 10);
+		s.graphics.endFill();
+		addChild(s);
+	}
+}

src/components/RidersListRendererDecoration.hx

@@ -1,53 +0,0 @@
-package components;
-
-import feathers.text.TextFormat;
-import openfl.Assets;
-import openfl.text.Font;
-import feathers.controls.Label;
-import feathers.layout.HorizontalLayout;
-import openfl.display.Shape;
-import model.Constants;
-import feathers.skins.RectangleSkin;
-import feathers.controls.LayoutGroup;
-
-class RidersListRendererDecoration extends LayoutGroup {
-	public function new() {
-		super();
-	}
-
-	override private function initialize():Void {
-		super.initialize();
-
-        var l:HorizontalLayout = new HorizontalLayout();
-		//l.setPadding(Std.int(headerHeight * .1));
-		l.verticalAlign = MIDDLE;
-        l.setPadding(10);
-        l.gap = 10;
-        layout = l;
-
-		backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR2, 1));
-
-         // Title label
-        var lbl1 = new Label();
-		
-		//lbl1.layoutData = ld1;
-        //lb1.backgroundSkin = new RectangleSkin(SolidColor(Constants.ACCENT_COLOR2, 1));
-
-		//lb1.verticalAlign = VerticalAlign.TOP;
-
-
-        var s:Shape = new Shape();
-		s.graphics.beginFill(0x228B42, 1);
-		s.graphics.drawCircle(10, 10, 10);
-		s.graphics.endFill();
-        addChild(s);
-
-		var fnt:Font = Assets.getFont(Constants.MONTSERRAT_MEDIUM_500);
-		lbl1.text = "CREDIT : 09 ";
-		lbl1.embedFonts = true;
-		lbl1.textFormat = new TextFormat(fnt.fontName, 14, Constants.MAIN_COLOR1);
-		addChild(lbl1);
-
-		
-	}
-}

src/components/RoundAvatar.hx

@@ -1,5 +1,7 @@
 package components;
 
+import openfl.system.ApplicationDomain;
+import openfl.system.LoaderContext;
 import openfl.display.LoaderInfo;
 import openfl.net.URLRequest;
 import openfl.display.Loader;
@@ -30,11 +32,14 @@ class RoundAvatar extends LayoutGroup {
 	override private function initialize():Void {
 		super.initialize();
 
-		var hl:HorizontalLayout = new HorizontalLayout();
+		/*var hl:HorizontalLayout = new HorizontalLayout();
 		hl.horizontalAlign = LEFT;
-		layout = hl;
+		layout = hl;*/
 
-		//backgroundSkin = new RectangleSkin(SolidColor(0xFF0000, 1));
+		var bkgs = new RectangleSkin(SolidColor(0xFFFFFF, 0));
+		bkgs.width = Std.int(avatarSize * 1.2);
+		bkgs.height = avatarSize;
+		backgroundSkin = bkgs;
 
 		/*var al:AssetLoader = new AssetLoader();
         al.addEventListener(Event.COMPLETE, onLoadComplete);
@@ -42,33 +47,27 @@ class RoundAvatar extends LayoutGroup {
 		al.source = "https://ui-avatars.com/api/?background=random&size=128";
         addChild(al);*/
 
-		var bkg:Shape = new Shape();
+		var m:Shape = new Shape();
-		bkg.graphics.beginFill(Std.int(Math.random() * 0xFFFFFF), 1);
+		m.graphics.beginFill(Std.int(Math.random() * 0xFFFFFF), 1);
-		bkg.graphics.drawCircle(avatarSize / 2, avatarSize / 2, avatarSize / 2);
+		m.graphics.drawCircle(avatarSize / 2, avatarSize / 2, avatarSize / 2);
-		bkg.graphics.endFill();
+		m.graphics.endFill();
-		backgroundSkin = bkg;
+		addChild(m);
-
+		mask = m;
-		var spacer:Shape = new Shape();
-		spacer.graphics.beginFill(Std.int(0x933EA7), 1);
-		spacer.graphics.drawRect(bkg.x + bkg.width, bkg.y, avatarSize / 2, bkg.height);
-		spacer.graphics.endFill();
-		addChild(spacer);
 
         var l:Loader = new Loader();
+		var lc:LoaderContext = new LoaderContext(true, null);
        	// l.load(new URLRequest("https://ui-avatars.com/api/?background=random&size=64"));
-		l.load(new URLRequest("https://api.dicebear.com/9.x/pixel-art/png?size=32"));
+		//l.load(new URLRequest("https://api.dicebear.com/9.x/pixel-art/png?size=32"));
+		l.load(new URLRequest("https://lepetittrot.com/lptcm/assets/profile-pictures/pp256/pp_malo.jpeg"), lc);
         l.contentLoaderInfo.addEventListener (Event.COMPLETE, onLoadComplete);
+		addChild(l);
 		
 	}
 
     private function onLoadComplete(e:Event) {
-       
+
-        //var loader = cast(e.currentTarget, AssetLoader);
-        //trace("asset loaded: " + loader.source);
         var l:Loader = cast(e.currentTarget, LoaderInfo).loader;
-		l.content.width = l.content.height = avatarSize;
+		l.content.width = l.content.height = avatarSize;	
-		if(!contains(l)) addChild(l);
+
-        traceMagenta(l.width + " / " + l.height);
-		
     }
 }

src/model/Constants.hx

@@ -9,6 +9,12 @@ class Constants {
     public static final MAIN_COLOR1:Int = 0x323D42;
     public static final MAIN_COLOR2:Int = 0x69808A;
     public static final MAIN_COLOR3:Int = 0xECEFF0;
+    public static final PURE_WHITE:Int = 0xFFFFFF;
+
+    public static final ALARM:Int = 0x5E2075;
+    public static final ALERT:Int = 0xE65555;
+    public static final WARNING:Int = 0xE3DF62;
+    public static final INFO:Int = 0x6BE692;
 
     public static final BUTTON_UP_COLOR:Int = 0x050EB7;
     public static final BUTTON_HOVER_COLOR:Int = 0xFF5F0F;
@@ -33,6 +39,7 @@ class Constants {
     // Strings
     public static final MENU_ITEM_0_STRING:String = "Cavalier·e·s";
     public static final MENU_ITEM_1_STRING:String = "Licences FFE";
+    public static final RIDERS_LIST_CREDIT_TEXT:String = "Crédit: ";
 
     // UI
     // number of rows in RidersList

src/view/RidersList.hx

@@ -1,27 +1,24 @@
 package view;
 
+import components.RidersListRendererAccessory;
 import components.RoundAvatar;
-import components.RidersListRendererDecoration;
+import feathers.controls.ListView;
-import openfl.display.Shape;
+import feathers.controls.dataRenderers.ItemRenderer;
+import feathers.data.ListViewItemState;
+import feathers.events.FeathersEvent;
+import feathers.text.TextFormat;
+import feathers.utils.DisplayObjectRecycler;
+import model.AppModelLocator;
 import model.Constants;
 import openfl.Assets;
-import openfl.text.Font;
-import feathers.text.TextFormat;
-import vo.RiderVO;
-import uuid.Uuid;
-import feathers.controls.AssetLoader;
-import feathers.data.ListViewItemState;
-import feathers.controls.dataRenderers.ItemRenderer;
-import feathers.utils.DisplayObjectRecycler;
-import feathers.layout.AutoSizeMode;
-import feathers.controls.ListView;
-import feathers.events.FeathersEvent;
-import model.AppModelLocator;
 import openfl.events.Event;
+import openfl.text.Font;
 import t9.util.ColorTraces.*;
+import vo.RiderVO;
 
 class RidersList extends ListView {
 	private var model = AppModelLocator.getInstance();
+	private var rowHeight:Int;
 
 	public function new() {
 		super();
@@ -33,10 +30,12 @@ class RidersList extends ListView {
 
 		// set common properties for all renderers in the same container here
 		var recycler = DisplayObjectRecycler.withFunction(() -> {
+
 			final fnt1:Font = Assets.getFont(Constants.MONTSERRAT_MEDIUM_500);
 			final fnt2:Font = Assets.getFont(Constants.MONTSERRAT_BOLD_700);
 
-			var rowHeight:Int = Std.int(height / Constants.RIDERS_LIST_ROWS_COUNT);
+			rowHeight = Std.int(height / Constants.RIDERS_LIST_ROWS_COUNT);
+
 			var itemRenderer = new ItemRenderer();
 			itemRenderer.height = rowHeight;
 			itemRenderer.icon = new RoundAvatar(Std.int(rowHeight * 0.9));
@@ -44,6 +43,7 @@ class RidersList extends ListView {
 			itemRenderer.secondaryTextFormat = new TextFormat(fnt2.fontName, Std.int(rowHeight * 0.2), Constants.MAIN_COLOR2);
 
 			return itemRenderer;
+
 		});
 
 		itemRendererRecycler = recycler;
@@ -53,14 +53,13 @@ class RidersList extends ListView {
 			itemRenderer.text = rider.firstName;
 			itemRenderer.secondaryText = rider.name;
 
-			var ra:RoundAvatar = cast(itemRenderer.icon, RoundAvatar);
+			var rlra:RidersListRendererAccessory = new RidersListRendererAccessory(Std.int(rowHeight * 0.8), rider.credit);
+			itemRenderer.accessoryView = rlra;
 
 			// TODO change this to real iamge path
 			// loader.source = "https://lepetittrot.com/path/to/pp_pictures" + state.data.id + ".jpg";
 			// loader.source = "https://testingbot.com/free-online-tools/random-avatar/50?u=" + Uuid.nanoId();
 
-			var rlrd:RidersListRendererDecoration = new RidersListRendererDecoration();
-			itemRenderer.accessoryView = rlrd;
 		};
 
 		recycler.reset = (itemRenderer:ItemRenderer, state:ListViewItemState) -> {