Feature/33 specific site header

canopeum_backend/canopeum_backend/serializers.py

@@ -17,6 +17,7 @@
     Mulchlayertype,
     Post,
     Site,
+    Siteadmin,
     Sitetreespecies,
     Sitetype,
     Treetype,
@@ -296,25 +297,47 @@ def get_species(self, obj):
         return BatchSpeciesSerializer(obj.batchspecies_set.all(), many=True).data
 
 
+class SiteAdminSerializer(serializers.ModelSerializer):
+    user_id = serializers.SerializerMethodField()
+    username = serializers.SerializerMethodField()
+
+    class Meta:
+        model = Siteadmin
+        fields = ("id", "user_id", "username")
+
+    @extend_schema_field(str)  # pyright: ignore[reportArgumentType]
+    def get_user_id(self, obj):
+        return AuthUserSerializer().get_attribute("id")
+
+    @extend_schema_field(str)  # pyright: ignore[reportArgumentType]
+    def get_username(self, obj):
+        return AuthUserSerializer().get_attribute("username")
+
+
 class SiteSummarySerializer(serializers.ModelSerializer):
     site_type = SiteTypeSerializer()
+    coordinate = CoordinatesSerializer()
     plant_count = serializers.SerializerMethodField()
     survived_count = serializers.SerializerMethodField()
     propagation_count = serializers.SerializerMethodField()
     progress = serializers.SerializerMethodField()
-    sponsor = serializers.SerializerMethodField()
+    sponsors = serializers.SerializerMethodField()
+    admins = SiteAdminSerializer(many=True)
 
     class Meta:
         model = Site
         fields = (
+            "id",
             "name",
+            "coordinate",
             "site_type",
             "plant_count",
             "survived_count",
             "propagation_count",
             "visitor_count",
-            "sponsor",
+            "sponsors",
             "progress",
+            "admins",
         )
 
     @extend_schema_field(int)  # pyright: ignore[reportArgumentType]
@@ -333,9 +356,14 @@ def get_propagation_count(self, obj):
     def get_progress(self, obj):
         return self.context.get("progress")
 
-    @extend_schema_field(BatchSerializer(many=True))
-    def get_sponsor(self, obj):
-        return BatchSerializer(obj).data.get("sponsor", None)
+    @extend_schema_field(list[str])  # pyright: ignore[reportArgumentType]
+    def get_sponsors(self, obj):
+        return BatchSerializer(obj, many=True).get_attribute("sponsor")
+
+    def get_admins(self, obj):
+        admins = obj.siteadmin_set.all()
+        serializer = SiteAdminSerializer(admins, many=True)
+        return serializer.data
 
 
 class CoordinatesMapSerializer(serializers.ModelSerializer):

canopeum_frontend/canopeum-mockoon.json

@@ -588,7 +588,7 @@
       "responses": [
         {
           "uuid": "e2a65576-e324-4689-9d73-45df19729b05",
-          "body": "{\n  \"name\": \"{{lorem (int 1 3)}}\",\n  \"siteType\": {\n    \"id\": {{int 0 6}},\n    \"en\": \"{{lorem (int 1 2)}}\",\n    \"fr\": \"{{lorem (int 1 2)}}\"\n  },\n  \"plantCount\": {{int 0 5000}},\n  \"survivedCount\": {{int 0 5000}},\n  \"propagationCount\": {{int 0 500}},\n  \"visitorCount\": {{int 0 500}},\n  \"sponsors\": {{{someOf (array (lorem 2) (lorem 2) (lorem 2) (lorem 2) (lorem 2)) 0 5 true}}},\n  \"progress\": {{float 0 100}},\n  \"image\": \"\"\n}",
+          "body": "{\n    \"id\": \"{{int (int 1 9999)}}\",\n    \"name\": \"{{lorem (int 1 3)}}\",\n    \"siteType\": {\n      \"id\": {{int 0 6}},\n      \"en\": \"{{lorem (int 1 2)}}\",\n      \"fr\": \"{{lorem (int 1 2)}}\"\n    },\n    \"coordinate\": {\n      \"id\": {{int 1 9999}},\n      \"dmsLatitude\": \"{{int 50 60}} {{int 15 30}} {{int 30 60}} {{int 1000 9999}} N\",\n      \"dmsLongitude\": \"{{int 50 80}} {{int 20 45}} {{int 10 55}} {{int 1000 9999}} W\",\n      \"address\": \"{{faker 'location.city'}}\"\n    },\n    \"plantCount\": {{int 0 5000}},\n    \"survivedCount\": {{int 0 5000}},\n    \"propagationCount\": {{int 0 500}},\n    \"visitorCount\": {{int 0 500}},\n    \"sponsors\": {{{someOf (array (faker 'company.name') (faker 'company.name') (faker 'company.name') (faker 'company.name') (faker 'company.name')) 0 5 true}}},\n    \"progress\": {{float 0 100}},\n    \"admins\": [\n      {{#repeat 1 (int 1 3) comma=true}}\n      {\n        \"id\": {{int 1 9999}},\n        \"userId\": \"{{int 1 9999}}\",\n        \"username\": \"{{faker 'person.fullName'}}\"\n      }\n      {{/repeat}}\n    ]\n  }",
           "latency": 0,
           "statusCode": 200,
           "label": "",
@@ -656,7 +656,7 @@
       "responses": [
         {
           "uuid": "ac5b893d-b30e-43c9-8988-4c13a7e0c819",
-          "body": "[\n  {{#repeat 1 1 comma=true}}\n  {\n    \"id\": 0,\n    \"name\": \"{{lorem (int 1 3)}}\",\n    \"siteType\": {\n      \"id\": {{int 0 6}},\n      \"en\": \"{{lorem (int 1 2)}}\",\n      \"fr\": \"{{lorem (int 1 2)}}\"\n    },\n    \"plantCount\": {{int 0 5000}},\n    \"survivedCount\": {{int 0 5000}},\n    \"propagationCount\": {{int 0 500}},\n    \"visitorCount\": {{int 0 500}},\n    \"sponsors\": {{{someOf (array (lorem 2) (lorem 2) (lorem 2) (lorem 2) (lorem 2)) 0 5 true}}},\n    \"progress\": {{float 0 100}}\n  }\n  {{/repeat}}\n]",
+          "body": "[\n  {{#repeat 1 (int 1 14) comma=true}}\n  {\n    \"id\": \"{{int (int 1 9999)}}\",\n    \"name\": \"{{lorem (int 1 3)}}\",\n    \"siteType\": {\n      \"id\": {{int 0 6}},\n      \"en\": \"{{lorem (int 1 2)}}\",\n      \"fr\": \"{{lorem (int 1 2)}}\"\n    },\n    \"coordinate\": {\n      \"id\": {{int 1 9999}},\n      \"dmsLatitude\": \"{{int 50 60}} {{int 15 30}} {{int 30 60}} {{int 1000 9999}} N\",\n      \"dmsLongitude\": \"{{int 50 80}} {{int 20 45}} {{int 10 55}} {{int 1000 9999}} W\",\n      \"address\": \"{{faker 'location.city'}}\"\n    },\n    \"plantCount\": {{int 0 5000}},\n    \"survivedCount\": {{int 0 5000}},\n    \"propagationCount\": {{int 0 500}},\n    \"visitorCount\": {{int 0 500}},\n    \"sponsors\": {{{someOf (array (faker 'company.name') (faker 'company.name') (faker 'company.name') (faker 'company.name') (faker 'company.name')) 0 5 true}}},\n    \"progress\": {{float 0 100}},\n    \"admins\": [\n      {{#repeat 1 (int 1 3) comma=true}}\n      {\n        \"id\": {{int 1 9999}},\n        \"userId\": \"{{int 1 9999}}\",\n        \"username\": \"{{faker 'person.fullName'}}\"\n      }\n      {{/repeat}}\n    ]\n  }\n  {{/repeat}}\n]",
           "latency": 0,
           "statusCode": 200,
           "label": "",

canopeum_frontend/src/App.scss

@@ -23,9 +23,105 @@ body {
   background-image: url('@assets/images/TreeBackground.png');
 }
 
-.material-symbols-outlined {
+.material-symbols-outlined,
+.custom-icon {
   color: inherit;
-  font-size: inherit;
+  font-size: 24px;
+
+  &.custom-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  &.icon-2xs {
+    font-size: 12px;
+
+    &.custom-icon {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  &.icon-xs {
+    font-size: 16px;
+
+    &.custom-icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &.icon-sm {
+    font-size: 20px;
+
+    &.custom-icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &.icon-lg {
+    font-size: 28px;
+
+    &.custom-icon {
+      width: 28px;
+      height: 28px;
+    }
+  }
+
+  &.icon-xl {
+    font-size: 32px;
+
+    &.custom-icon {
+      width: 32px;
+      height: 32px;
+    }
+  }
+
+  &.icon-2xl {
+    font-size: 36px;
+
+    &.custom-icon {
+      width: 36px;
+      height: 36px;
+    }
+  }
+
+  &.icon-3xl {
+    font-size: 40px;
+
+    &.custom-icon {
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  &.icon-4xl {
+    font-size: 44px;
+
+    &.custom-icon {
+      width: 44px;
+      height: 44px;
+    }
+  }
+
+  &.icon-5xl {
+    font-size: 48px;
+
+    &.custom-icon {
+      width: 48px;
+      height: 48px;
+    }
+  }
+
+  &.icon-6xl {
+    font-size: 52px;
+
+    &.custom-icon {
+      width: 52px;
+      height: 52px;
+    }
+  }
 }
 
 .navbar {
@@ -61,6 +157,20 @@ body {
   text-align: center;
 }
 
+.lightgreen-color {
+  color: #E8F3E9;
+}
+
+.bg-lightgreen {
+  background: #E8F3E9;
+}
+
+.text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .btn-secondary {
   color: #fff;
 }