user_datas from index/+Page.vueclear-code

frontend/src/assets/user_data.json

@@ -328,5 +328,59 @@
         "longitude": 315,
         "latitude": 0,
         "magnitude": 1
+      },
+      {
+        "id": 56,
+        "longitude": 0,
+        "latitude": 0,
+        "magnitude": 1
+      },
+      {
+        "id": 57,
+        "longitude": 45,
+        "latitude": 0,
+        "magnitude": 1
+      },
+      {
+        "id": 58,
+        "longitude": 90,
+        "latitude": 0,
+        "magnitude": 1
+      },
+      {
+        "id": 59,
+        "longitude": 135,
+        "latitude": 0,
+        "magnitude": 1
+      },
+      {
+        "id": 60,
+        "longitude": 180,
+        "latitude": 0,
+        "magnitude": 1
+      },
+      {
+        "id": 61,
+        "longitude": 225,
+        "latitude": 0,
+        "magnitude": 1
+      },
+      {
+        "id": 62,
+        "longitude": 270,
+        "latitude": 0,
+        "magnitude": 1
+      },
+      {
+        "id": 63,
+        "longitude": 315,
+        "latitude": 0,
+        "magnitude": 1
+      },
+      {
+        "id": 64,
+        "longitude": 360,
+        "latitude": 0,
+        "magnitude": 1
       }
 ]  

frontend/src/components/ClusterGalaxy/ClusterGalaxy2D.vue

@@ -1,56 +1,181 @@
 <template>
-  <div v-if="show" class="modal-overlay" @click.self="close">
-    <div class="modal-content">
-      <h3>Star Details</h3>
-      <p><strong>ID:</strong> {{ starData.id }}</p>
-      <p><strong>Longitude:</strong> {{ starData.longitude }}</p>
-      <p><strong>Latitude:</strong> {{ starData.latitude }}</p>
-      <p><strong>Magnitude:</strong> {{ starData.magnitude }}</p>
-      <button @click="close">Close</button>
+  <div class="hemisphere-container">
+    <div ref="northernHemisphere" class="hemisphere"></div>
+    <div ref="southernHemisphere" class="hemisphere"></div>
+
+    <!-- Modal -->
+    <div v-if="showModal" class="modal">
+      <div class="modal-content">
+        <span class="close" @click="closeModal">&times;</span>
+        <p>Längengrad: {{ selectedStar.longitude.toFixed(6) }}°</p>
+        <p>Breitengrad: {{ selectedStar.latitude.toFixed(6) }}°</p>
+        <p>Quadrant: {{ selectedStar.quadrant }}</p>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref, onMounted } from 'vue';
+import * as d3 from 'd3';
 
 export default defineComponent({
   props: {
-    show: {
-      type: Boolean,
-      required: true
-    },
     starData: {
-      type: Object,
-      required: true
-    }
+      type: Array,
+      required: true,
+    },
+  },
+  setup(props) {
+    const northernHemisphere = ref<HTMLElement | null>(null);
+    const southernHemisphere = ref<HTMLElement | null>(null);
+    const showModal = ref(false);
+    const selectedStar = ref({ longitude: 0, latitude: 0, quadrant: '' });
+
+    const width = 800;
+    const height = 800;
+
+    const projection = d3.geoStereographic()
+      .reflectY(true)
+      .scale((width - 120) * 0.5)
+      .rotate([0, -90])
+      .translate([width / 2, height / 2])
+      .precision(0.1);
+
+    const path = d3.geoPath(projection);
+
+    const calculateQuadrant = (longitude: number, latitude: number): string => {
+      const latIndex = Math.floor((latitude / 180) * 32);
+      const longIndex = Math.floor((longitude / 360) * 16);
+
+      const latitudeLabel = `B${latIndex}`;
+      const longitudeLabel = `L${String.fromCharCode(65 + longIndex)}`;
+
+      return `${latitudeLabel}${longitudeLabel}`;
+    };
+
+    const drawHemisphere = (element: HTMLElement | null, data: any[], filterCondition: (d: any) => boolean) => {
+      if (!element) return;
+
+      const svg = d3.select(element)
+        .append('svg')
+        .attr('width', width)
+        .attr('height', height)
+        .style('background', '#081b3f');
+
+      const graticule = d3.geoGraticule().step([15, 10])();
+      const outline = d3.geoCircle().radius(90).center([0, 90])();
+
+      svg.append("path")
+        .attr("d", path(graticule))
+        .attr("fill", "none")
+        .attr("stroke", "#6c757d")
+        .attr("stroke-opacity", 0.2);
+
+      svg.append("path")
+        .attr("d", path(outline))
+        .attr("fill", "none")
+        .attr("stroke", "#6c757d");
+
+      svg.append("g")
+        .selectAll("text")
+        .data(d3.range(0, 1440, 60)) // Jede Stunde
+        .join("text")
+        .attr("dy", "0.35em")
+        .text(d => `${d / 60}h`)
+        .attr("font-size", d => d % 360 ? 10 : 14)
+        .attr("font-weight", d => d % 360 ? null : "bold")
+        .attr("fill", "#e0e0e0")
+        .datum(d => projection([d / 4, -4]))
+        .attr("x", d => d ? d[0] : 0)
+        .attr("y", d => d ? d[1] : 0);
+
+      svg.selectAll('circle')
+        .data(data.filter(filterCondition))
+        .enter()
+        .append('circle')
+        .attr('cx', d => {
+          const point = projection([d.longitude, d.latitude]);
+          return point ? point[0] : 0;
+        })
+        .attr('cy', d => {
+          const point = projection([d.longitude, d.latitude]);
+          return point ? point[1] : 0;
+        })
+        .attr('r', d => d.magnitude ? (8 - d.magnitude) / 2 : 3)
+        .attr('fill', 'white')
+        .attr('stroke', 'none')
+        .attr('opacity', 0.8)
+        .on('mouseover', function() {
+          d3.select(this).attr('r', 6);
+        })
+        .on('mouseout', function(event, d) {
+          d3.select(this).attr('r', d.magnitude ? (8 - d.magnitude) / 2 : 3);
+        })
+        .on('click', (event, d) => {
+          const quadrant = calculateQuadrant(d.longitude, d.latitude);
+          selectedStar.value = { ...d, quadrant };
+          showModal.value = true;
+        });
+    };
+
+    const closeModal = () => {
+      showModal.value = false;
+    };
+
+    onMounted(() => {
+      drawHemisphere(northernHemisphere.value, props.starData, d => d.latitude > 0);
+      drawHemisphere(southernHemisphere.value, props.starData, d => d.latitude <= 0);
+    });
+
+    return {
+      northernHemisphere,
+      southernHemisphere,
+      showModal,
+      selectedStar,
+      closeModal
+    };
   },
-  methods: {
-    close() {
-      this.$emit('close');
-    }
-  }
 });
 </script>
 
 <style scoped>
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+.hemisphere-container {
   display: flex;
-  justify-content: center;
-  align-items: center;
+  justify-content: space-around;
 }
 
-.modal-content {
-  background: white;
+.hemisphere {
+  width: 800px;
+  height: 800px;
+  border: 1px solid #6c757d;
+}
+
+.modal {
+  position: absolute;
+  top: 10%;
+  left: 50%;
+  transform: translate(-50%, -10%);
+  background-color: #333;
+  color: white;
   padding: 20px;
   border-radius: 8px;
-  width: 300px;
-  max-width: 90%;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.close {
+  align-self: flex-end;
+  font-size: 1.5rem;
+  cursor: pointer;
+}
+
+.modal p {
+  margin: 5px 0;
 }
 </style>

frontend/src/components/ClusterGalaxy/ClusterGalaxy3D.vue

@@ -19,10 +19,15 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
 import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
 import TWEEN from '@tweenjs/tween.js';
-import userData from '#src/assets/user_data.json'; 
 
 export default defineComponent({
-  setup() {
+  props: {
+    starData: {
+      type: Array,
+      required: true,
+    },
+  },
+  setup(props) {
     const canvas = ref<HTMLCanvasElement | null>(null);
     const modalVisible = ref(false);
     const selectedStar = ref({ longitude: 0, latitude: 0, quadrant: '' });
@@ -60,7 +65,7 @@ export default defineComponent({
       drawEquator();
       drawHighlightedMeridiansAndParallels();
       createColoredFieldsWithNumbers();
-      createStars(userData);
+      createStars(props.starData);
 
       const animate = () => {
         requestAnimationFrame(animate);
@@ -176,13 +181,13 @@ export default defineComponent({
 
       const startLatitudeIndex = 8;
       const endLatitudeIndex = 23;
-      const latStep = Math.PI / 32;  // Schrittweite für die Breitengrade (32 Schritte insgesamt)
+      const latStep = Math.PI / 32;
 
       for (let i = startLatitudeIndex; i <= endLatitudeIndex; i++) {
-        const theta = (i / 32) * Math.PI;  // Winkel für den Breitengrad
+        const theta = (i / 32) * Math.PI;
 
         for (let j = 0; j < 16; j++) {
-          const phi = (j / 16) * Math.PI * 2;  // Winkel für den Längengrad
+          const phi = (j / 16) * Math.PI * 2;
           const vertices = [];
 
           vertices.push(
@@ -266,8 +271,8 @@ export default defineComponent({
         star.position.set(x, y, z);
         star.userData = { longitude: starData.longitude, latitude: starData.latitude, id: starData.id };
 
-        stars.push(star);
         scene.add(star);
+        stars.push(star);
       });
     };
 
@@ -437,4 +442,3 @@ canvas {
   margin: 5px 0;
 }
 </style>
-