Material mapping

package.json

@@ -24,6 +24,7 @@
 		"@speckle/viewer": "^2.17.16",
 		"@tailwindcss/forms": "^0.5.6",
 		"@vueuse/core": "^10.7.2",
+		"ci": "^2.3.0",
 		"epdx": "^0.3.0",
 		"firebase": "^10.6.0",
 		"lcax": "^1.3.1",

src/App.vue

@@ -1,6 +1,6 @@
 <template>
 	<div id="app">
-		<!-- <pacman-loader/> -->
+		<pacman-loader/>
 		<router-view />
 	</div>
 </template>
@@ -9,15 +9,15 @@
 	import { defineComponent } from 'vue'
 	import { useRoute } from 'vue-router'
 	import { logMessageToSentry } from './utils/monitoring'
-	// import pacmanLoader from '@/components/Misc/PacmanLoader.vue'
+	import pacmanLoader from '@/components/Misc/PacmanLoader.vue'
 
 	/**
 	 * The main application component.
 	 */
 	export default defineComponent({
 		name: 'SpeckLCA',
 		components: {
-			// pacmanLoader,
+			pacmanLoader,
 		},
 		setup() {
 			const route = useRoute()

src/components/DetailBar/MaterialBar.vue

@@ -1,76 +1,36 @@
 <template>
-	<div class="w-5/6 flex flex-col items-center">
-		<div class="w-full flex">
-			<div
-				class="transition-all ease-out duration-1000 h-10 rounded-sm bg-green-300 justify-center flex items-center opacity-80 right-0 text-gray-600"
-				:style="{ width: percentMapped + '%' }"
-			>
-				<label v-if="percentMapped > 0" class="text-center">
-					{{ percentMapped }}%
-				</label>
-				<label v-else class="text-center pl-8"> {{ percentMapped }}% </label>
-			</div>
-			<div
-				class="transition-all ease-out duration-1000 w-1 h-8 m-1 rounded-full bg-white border-transparent border-r opacity-50"
-			></div>
-			<div
-				class="transition-all ease-out duration-1000 top-0 left-0 h-10 rounded-sm bg-red-300 justify-center flex items-center opacity-80"
-				:style="{ width: 100 - percentMapped + '%' }"
-			></div>
-		</div>
-		<div class="mt-1 flex w-full items-center justify-between text-xs">
-			<div class="text-gray-600 left-0">Mapped</div>
-			<div class="text-gray-600 right-0">Not mapped</div>
-		</div>
-	</div>
+  <div  
+    class="text-center text-bold text-lg"
+  >
+    <label
+      :class="`text-${mappedMaterial.color}0`"
+    >
+      {{ mappedMaterial.name }}
+    </label>
+  </div>
 </template>
 
 <script lang="ts">
-	import { defineComponent, computed } from 'vue'
-	import { useProjectStore } from '@/stores/main'
+import { defineComponent, computed } from 'vue'
+import { useProjectStore } from '@/stores/main'
+import { getMappedMaterial } from '@/utils/projectUtils'
+import { storeToRefs } from 'pinia'
 
-	export default defineComponent({
-		name: 'OverviewBar',
-		components: {},
-		setup() {
-			const projectStore = useProjectStore()
+export default defineComponent({
+  name: 'MaterialGroupCard',
+  components: {
+  },
+  setup() {
+    const { selectedObjects } = storeToRefs(useProjectStore())
+
+    // Get the material mapped to the group and color them accordingly
+    const mappedMaterial = computed(() => {
+      return getMappedMaterial(selectedObjects.value)
+    })
 
-			// Check how many geometry objects has a material mapped to them
-			const percentMapped = computed(() => {
-				if (projectStore.selectedGroup == null) {
-					// If no selection but we have a project get everything
-					if (projectStore.currProject?.geometry != null) {
-						const totalObjects = projectStore.currProject.geometry.length
-						const objectsWithMaterial =
-							projectStore.currProject.geometry.filter(
-								(obj) => obj.material !== undefined && obj.material !== null
-							)
-
-						const percentageWithMaterial =
-							(objectsWithMaterial.length / totalObjects) * 100
-						return parseFloat(percentageWithMaterial.toFixed(1))
-					} else {
-						return 0
-					}
-				} else {
-					// Count the number of objects with and without a material
-					const totalObjects = projectStore.selectedObjects.length
-					const objectsWithMaterial = projectStore.selectedObjects.filter(
-						(obj) => obj.material !== undefined && obj.material !== null
-					)
-
-					const percentageWithMaterial =
-						(objectsWithMaterial.length / totalObjects) * 100
-					// Debug remove for production
-					const randInt = Math.random() * 100
-					return parseFloat(randInt.toFixed(1))
-					//return parseFloat(percentageWithMaterial.toFixed(1))
-				}
-			})
-
-			return {
-				percentMapped
-			}
-		}
-	})
-</script>
+    return {
+      mappedMaterial,
+    }
+  },
+})
+</script>

src/components/DetailBar/OverviewBar.vue

@@ -16,15 +16,15 @@
 			const projectStore = useProjectStore()
 
 			const amountSelected = computed(() => {
-				if (projectStore.selectedGroup == null) {
+				if (projectStore.selectedObjects.length === 0) {
 					return 0
 				} else {
 					return projectStore.selectedObjects.length
 				}
 			})
 
 			const groupArea = computed(() => {
-				if (projectStore.selectedGroup == null) {
+				if (projectStore.selectedObjects.length === 0) {
 					return 0
 				} else {
 					const area = projectStore.selectedObjects.reduce(