Merge pull request #3 from maling-it/base/dev

Buat Komponen dan model untk peta openlayer

app/Http/Controllers/DeviceController.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Http;
+
+class DeviceController extends Controller
+{
+    public function show($id)
+    {
+        $apiUrl = env('API_URL') . "/api/v1/device/{$id}";
+        $response = Http::get($apiUrl);
+
+        $device = $response->json();
+
+        return view('device.show', compact('device'));
+    }
+}

app/View/Components/AppLayout.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class AppLayout extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('layouts.app');
+    }
+}

app/View/Components/MapTanahku.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+use Illuminate\Support\Facades\Http;
+
+class MapTanahku extends Component
+{
+    public $devices;
+
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        $apiUrl = env('API_URL') . "/api/v1/device/all";
+        $response = Http::get($apiUrl);
+
+        $this->devices = $response->json()['data'];
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.map-tanahku');
+    }
+}

config/app.php

@@ -18,6 +18,19 @@
 
     'name' => env('APP_NAME', 'Laravel'),
 
+    /*
+    |--------------------------------------------------------------------------
+    | Application API URL
+    |--------------------------------------------------------------------------
+    |
+    | This URL is used by the application to generate URLs for the API. You
+    | should set this to the root of your application so that it is used
+    | when running API requests.
+    |
+    */
+
+    'api_url' => env('API_URL', 'https://api.tanahku.online'),
+
     /*
     |--------------------------------------------------------------------------
     | Application Environment

package.json

@@ -1,13 +1,18 @@
 {
-    "private": true,
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build"
-    },
-    "devDependencies": {
-        "axios": "^1.6.4",
-        "laravel-vite-plugin": "^1.0.0",
-        "vite": "^5.0.0"
-    }
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "axios": "^1.6.4",
+    "laravel-vite-plugin": "^1.0.0",
+    "vite": "^5.0.0",
+    "ol": "^8.2.0"
+  },
+  "dependencies": {
+    "bootstrap": "5.3.2",
+    "halfmoon": "2.0.1"
+  }
 }

resources/css/app.css

@@ -0,0 +1,14 @@
+@import "../../node_modules/ol/ol.css";
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+}
+
+#map {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+}

resources/js/app.js

@@ -1 +1,13 @@
-import './bootstrap';
+// Import Halfmoon CSS
+import "halfmoon/css/cores/halfmoon.cores.css";
+import "halfmoon/css/halfmoon.min.css";
+
+import './olmain';
+
+// some script here
+const popoverTriggerList = document.querySelectorAll(
+    "[data-bs-toggle='popover']"
+);
+const popoverList = [...popoverTriggerList].map(
+    popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl)
+);