t/ConnectionOnTheMoveWebinterface
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Vue barely set up

Browse Source
This commit is contained in:
Ano-sys
2025-04-30 22:42:53 +02:00
parent dc9b88c085
commit e35e7817b9
8 changed files with 35 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cotmw/index.html
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<title>Webinterface</title>
</head>
<body>
<div id="app"></div>
cotmw/package-lock.json
Generated
+1 -1
View File
@@ -13,7 +13,7 @@
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.3",
"vite": "^6.2.4",
"vite": "^6.3.4",
"vite-plugin-vue-devtools": "^7.7.2"
}
},
cotmw/package.json
+1 -1
View File
@@ -14,7 +14,7 @@
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.3",
"vite": "^6.2.4",
"vite": "^6.3.4",
"vite-plugin-vue-devtools": "^7.7.2"
}
}
cotmw/src/App.vue
+6 -5
View File
@@ -1,18 +1,19 @@
<script setup>
import 'bootstrap/js/dist/modal.js'
import HUD from './components/HUD.vue'
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
<meta charset="utf-8">
</header>
<main>
<TheWelcome />
<div>
<HUD></HUD>
</div>
</main>
</template>
cotmw/src/components/Camera.vue
+11
View File
@@ -0,0 +1,11 @@
<script setup>
</script>
<template>
</template>
<style scoped>
</style>
cotmw/src/components/HUD.vue
+3 -34
View File
@@ -8,7 +8,7 @@
function button_switch(e){
log("Pressed Button: " + e.id);
buttonString = e.id == "LocationButton" ? "CameraButton" : "LocationButton";
let buttonString = e.id == "LocationButton" ? "CameraButton" : "LocationButton";
let btn = document.getElementById(buttonString);
btn.classList.remove("btn-success");
@@ -25,12 +25,6 @@
</script>
<template>
<head>
<title>Webinterface</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="container hud" id="Control">
<div class="hud-header">Auto HUD</div>
@@ -43,13 +37,11 @@
<div class="important">Mobile</div>
</div>
<div class="hud-row">
<button class="btn btn-sm btn-success" id="LocationButton" style="width: 100px;" onclick="handleButtonPress(this)">Location</button>
<button class="btn btn-sm btn-outline-secondary" id="CameraButton" style="width: 100px;" onclick="handleButtonPress(this)">Camera</button>
<button class="btn btn-sm btn-success" id="LocationButton" style="width: 100px;" @click="handleButtonPress($event.target)">Location</button>
<button class="btn btn-sm btn-outline-secondary" id="CameraButton" style="width: 100px;" @click="handleButtonPress($event.target)">Camera</button>
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</body>
</template>
<style scoped>
@@ -103,27 +95,4 @@
.info2 {
color: #8cf;
}
html, body {
height: 100%;
margin: 0;
}
body {
background-color: #fff;
background-image: repeating-linear-gradient(
to bottom,
#ccc,
#ccc 1px,
transparent 1px,
transparent 20px
),
/* vertikale Linien */ repeating-linear-gradient(
to right,
#ccc,
#ccc 1px,
transparent 1px,
transparent 20px
);
}
</style>
cotmw/src/components/Location.vue
+11
View File
@@ -0,0 +1,11 @@
<script setup>
</script>
<template>
</template>
<style scoped>
</style>
cotmw/src/main.js
+1
View File
@@ -2,5 +2,6 @@ import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.min.css'
createApp(App).mount('#app')