Dso browser

front/components/Content/FilterList.vue

@@ -22,7 +22,7 @@
             variant="outlined"
             :placeholder="placeholder"
             rounded
-            @input=" $emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+            @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
           />
         </v-col>
       </v-row>

front/components/Content/btnMoreItems.vue

@@ -7,34 +7,29 @@
     class="text-white mr-5"
     color="grey"
     :aria-label="label"
-    @click="clickEvent"
+    @click="$emit('click-event', ($event.target as HTMLInputElement).value)"
   >
     <span>{{ label }}</span>
   </v-btn>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { toRefs } from "vue";
 
-const props = defineProps({
-  label: {
-    type: String,
-    default: ''
-  },
-  icon: {
-    type: String,
-    default: 'mdi-plus'
-  },
-  btnLoading: {
-    type: Boolean,
-    default: false
-  }
-});
-const { label, icon} = toRefs(props);
-const emit = defineEmits(['click-event']);
-const clickEvent = () => {
-  emit('click-event');
+interface Props {
+  label?: string,
+  icon?: string,
+  btnLoading?: boolean
 }
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  icon: 'mdi-plus',
+  btnLoading: false
+})
+
+const { label, icon} = toRefs(props);
+
+defineEmits(['click-event'])
 </script>
 
 <style scoped>

front/composables/useGeoJsonServices.ts

@@ -0,0 +1,61 @@
+interface Properties {
+  name?: string | null,
+  type?: string | null,
+  mag?: number | null
+}
+interface Feature {
+  type: string,
+  geometry: Geometry,
+  id: string
+  properties: Properties
+}
+
+interface FeatureCollection {
+  type?: string,
+  features?: Feature[]
+}
+
+const geoJsonConstellation = (constellation: Constellation): FeatureCollection => {
+  const feature: Feature = {
+    id: constellation.id,
+    type: "Feature",
+    geometry: constellation.geometryLine,
+    properties: {
+      name: constellation.alt
+    }
+  }
+
+  return {
+    'type': 'FeatureCollection',
+    'features': [
+      feature
+    ]
+  }
+}
+
+const geoJsonDso = (dsos: Dso[]): FeatureCollection => {
+  const features: Feature[] = dsos.map((dso: Dso): Feature => {
+    return {
+      type: 'feature',
+      id: dso.id,
+      geometry: dso.geometry,
+      properties: {
+        name: dso?.fullNameAlt,
+        type: dso?.type,
+        mag: dso?.magnitude
+      }
+    }
+  });
+
+  return {
+    'type': 'FeatureCollection',
+    'features': features
+  }
+}
+
+export const useGeoJsonServices = () => {
+  return {
+    geoJsonConstellation,
+    geoJsonDso
+  }
+}

front/i18n/locales/en.json

@@ -81,6 +81,7 @@
     }
   },
   "catalogs": {
+    "load": "Please wait while loading data…",
     "title": "Catalogs",
     "description": "Browse all catalogs, seek amazing deep space objects and explore wonders of the universe",
     "count": "Results: {nbItems} / {total}"

front/pages/catalogs.vue

@@ -12,8 +12,15 @@ const TitlePage = defineAsyncComponent(() => import('@/components/Content/TitleP
 
 <template>
   <TitlePage :title="t('catalogs.title')" />
-
-  <dso-browser />
+  <v-sheet
+    elevation="0"
+    class="landing-warpper"
+    color="transparent"
+  >
+    <v-container class="text-left">
+      <DsoBrowser />
+    </v-container>
+  </v-sheet>
 </template>
 
 <style scoped>

front/pages/constellation/[[id]]/[[urlName]].vue

@@ -55,7 +55,7 @@ function getCoverUrl(): string {
           :url-image="getCoverUrl()"
         />
         <v-container class="text-left">
-          <v-row>
+          <v-row v-if="data?.description">
             <v-col
               cols="12"
               md="12"

front/types/index.d.ts

@@ -106,11 +106,17 @@ declare global {
     label: string
   }
   interface Filters {
-    constellation?: ValueFilter[],
-    catalog?: ValueFilter[],
-    magnitude?: ValueFilter[],
-    type?: ValueFilter[]
+    constellation: ValueFilter[],
+    catalog: ValueFilter[],
+    magnitude: ValueFilter[],
+    type: ValueFilter[]
+  }
+
+  interface BrowserResponse {
+    items?: Dso[],
+    filters: {[type: string ]: Filters[] },
+    total?: number
   }
 }
 
-export { Constellation, Dso, SearchConstellationItem, SearchDsoItem, Filters }
+export { Constellation, Dso, SearchConstellationItem, SearchDsoItem, BrowserResponse, Filters }