useragent/front/html/index.html
2023-10-30 15:27:14 +07:00

113 lines
3.6 KiB
HTML

<html ng-app="appMain">
<head>
<title>UserAgent</title>
<script src="angular.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="appController" class="dark-theme">
<button class="theme-switcher" type="button">Theme</button>
<h1>User Agent</h1>
<p class="uuid">UUID: <span id="uuid"></span></p>
<div>
<h3>The Navigator Object</h3>
<dl class="dl-horizontal" >
<dt>appCodeName</dt>
<dd>{{navigator.appCodeName}}</dd>
<dt>appName</dt>
<dd>{{navigator.appName}}</dd>
<!-- <dt>appVersion</dt>
<dd>{{navigator.appVersion}}</dd> -->
<!-- <dt>cookieEnabled</dt>
<dd>{{navigator.cookieEnabled}}</dd> -->
<!-- <dt>geolocation</dt>
<dd>{{navigator.geolocation}}</dd> -->
<dt>language</dt>
<dd>{{navigator.language}}</dd>
<!-- <dt>onLine</dt>
<dd>{{navigator.onLine}}</dd> -->
<dt>platform</dt>
<dd>{{navigator.platform}}</dd>
<dt>product</dt>
<dd>{{navigator.product}}</dd>
<dt>userAgent</dt>
<dd>{{navigator.userAgent}}</dd>
<dt>userAgentData</dt>
<dd>{{navigator.userAgentData}}</dd>
<!-- <dt>javaEnabled</dt>
<dd>{{navigator.javaEnabled()}}</dd> -->
</dl>
</div>
<table class="table table-dark-theme">
<thead>
<tr>
<th>ID</th>
<th>UUID</th>
<th>DeviceInfo</th>
<th>Browser</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
<script type="module">
import { UUID } from "./uuid.js";
const uuid = UUID.genV4().toString();
console.log(uuid)
document.querySelector("#uuid").textContent = uuid;
let data = {
uuid : uuid,
user_agent : navigator.userAgent
}
console.log(data);
console.log(window.location);
// fetch("http://192.168.1.108:8086/ua/user-agents", {
fetch("https://ua.klxhub.com/ua/user-agents", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
})
.then((response) => response.json())
.then((data) => {
console.log(data);
// fetch("http://192.168.1.108:8086/ua/user-agents", {
fetch("https://ua.klxhub.com/ua/user-agents", {
method: "GET",
headers: {
"Content-Type": "application/json",
}
})
.then((response) => response.json())
.then((data) => {
console.log(data);
data.map((v,i) => {
var newRow=document.getElementById('table-body').insertRow();
let user_agent_split=v.user_agent.split(")")
newRow.innerHTML = `<tr>
<td>${i+1}</td>
<td>${v.uuid}</td>
<td>${user_agent_split[0].split("(")[1]}</td>
<td>${user_agent_split[2]===undefined?user_agent_split[1]:user_agent_split[2]}</td>
</tr>`
})
})
.catch((error) => {
console.error(error);
});
})
.catch((error) => {
console.error(error);
});
</script>
<script src="script.js"></script>
</body>
</html>