From 6d414979695401848ec2fcb96bb978b522a0e47f Mon Sep 17 00:00:00 2001
From: CXM <chenzixin202209@163.com>
Date: Sun, 17 Mar 2024 13:53:23 +0000
Subject: [PATCH] implement the answer about uwe facilities can be design by
admin, and update the map detail
---
Logic/map.js | 48 +------
Logic/responses.php | 8 ++
Presentation/chatbotpage.php | 25 +++-
Presentation/map.php | 269 ++++++++++++++++++-----------------
4 files changed, 171 insertions(+), 179 deletions(-)
create mode 100644 Logic/responses.php
diff --git a/Logic/map.js b/Logic/map.js
index 416ab99..428c62c 100644
--- a/Logic/map.js
+++ b/Logic/map.js
@@ -81,7 +81,7 @@ function initMap() {
map: map,
title: 'Your Location',
icon: {
- url: 'woman.png', // 用户位置的自定义图标
+ url: 'http://localhost/zhushou/Data/woman.png', // 用户位置的自定义图标
scaledSize: new google.maps.Size(20, 20)
}
});
@@ -147,22 +147,16 @@ function initMap() {
map.fitBounds(bounds);
});
- //特定地点信息：
- const placeDetails = {
- "Costa":'',
- "Starbucks":'',
- "Morrisons":'',
- "Shop":'',
- "Greggs":'',
- }//之后做数据库来存储
-
//查找特定地点
document.querySelectorAll('.place-btn').forEach(button => {
button.addEventListener('click', function() {
- const name = this.dataset.name;
+ const name = this.getAttribute('data-name');
const lat = parseFloat(this.dataset.lat);
const lng = parseFloat(this.dataset.lng);
+ const openTime = this.getAttribute('data-opentime');
+ const description = this.getAttribute('data-description');
+
// 清除现有的标记
markers.forEach(marker => marker.setMap(null));
markers = [];
@@ -179,40 +173,10 @@ function initMap() {
map.setCenter(location);
// 更新地点信息
- const infoContent = name + '<br><br>' + placeDetails[name] || `<h4>${name}</h4><p>'There has no more details with this location'</p>`;
+ const infoContent = '<h3>' + name + '</h3><br>' + '<h3>Opening Time:</h3><br>' + '<p>' + openTime + '</p><br>' + '<h3>Details:</h3>' + '<p>' + description + '</p>';;
document.getElementById('place-info').innerHTML = infoContent;
});
});
- //添加地点
- document.getElementById('add-place-btn').addEventListener('click', function() {
- const placeName = prompt("请输入地点名称：");
- const placeLat = prompt("请输入地点纬度：");
- const placeLng = prompt("请输入地点经度：");
-
- if (placeName && placeLat && placeLng) {
- // 创建新的按钮
- const newButton = document.createElement('button');
- newButton.className = 'place-btn';
- newButton.dataset.name = placeName;
- newButton.dataset.lat = placeLat;
- newButton.dataset.lng = placeLng;
- newButton.textContent = placeName;
-
- // 添加到导航栏
- document.getElementById('place-nav').appendChild(newButton);
-
- // 为新按钮添加点击事件，更新地图和信息显示
- newButton.addEventListener('click', function() {
- // 你之前的逻辑来处理地点点击事件
- // 更新地图中心，创建标记等
- });
-
- // 可选：如果你希望立即显示新地点，可以触发新按钮的点击事件
- newButton.click();
- } else {
- alert("地点信息不完整，无法添加。");
- }
- });
}
diff --git a/Logic/responses.php b/Logic/responses.php
new file mode 100644
index 0000000..15aad7e
--- /dev/null
+++ b/Logic/responses.php
@@ -0,0 +1,8 @@
+<?php
+//\b来指定单词边界，确保只匹配整个单词，而不是字符串中的子字符串
+//i修饰符使得匹配不区分大小写
+return [
+ '/\b(体育中心|UWE)\b/i' => 'UWE的体育中心提供了多种体育和健身设施，包括健身房，多功能球场，壁球场，攀岩，并且开设多种课程：瑜伽，篮球，拳击等...',
+ '/\b(bye|farewell|goodbye)\b/i' => 'Goodbye! Looking forward to our next conversation!',
+ // 其他预定义的回答
+];
diff --git a/Presentation/chatbotpage.php b/Presentation/chatbotpage.php
index 625e75d..6d0cd8d 100644
--- a/Presentation/chatbotpage.php
+++ b/Presentation/chatbotpage.php
@@ -1,16 +1,30 @@
<?php
session_start(); // 开启会话
+require_once '../Logic/responses.php'; // 引入含有预定义回答的文件
+require_once "../Logic/ChatbotConfig.php"; // 引入API文件
// 假设这是 index.php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
- // 引入API文件
- require_once "../Logic/ChatbotConfig.php";
-
// 获取用户输入
$userInput = $_POST['userInput'];
+ // 加载预定义的回答
+ $predefinedResponses = include '../Logic/responses.php';
- // 调用API函数
- $response = gpt35Api([['role' => 'user', 'content' => $userInput]]);
+ // 初始化找到的回答为 false
+ $foundResponse = false;
+ $response = '';
+ // 使用正则表达式检查用户输入是否匹配预定义的模式
+ foreach ($predefinedResponses as $pattern => $predefinedResponse) {
+ if (preg_match($pattern, $userInput)) {
+ $foundResponse = true;
+ $response = $predefinedResponse;
+ break; // 找到匹配后退出循环
+ }
+ }
+ // 如果没有找到预定义的回答，调用API函数
+ if (!$foundResponse) {
+ $response = gpt35Api([['role' => 'user', 'content' => $userInput]]);
+ }
// 把用户输入和响应追加到会话历史中
if (!isset($_SESSION['chat_history'])) {
@@ -160,4 +174,5 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
};
</script>
+
</html>
diff --git a/Presentation/map.php b/Presentation/map.php
index 62417fd..cbb9854 100644
--- a/Presentation/map.php
+++ b/Presentation/map.php
@@ -7,153 +7,158 @@ if (!isset($_SESSION['user_id'])) {
header("Location: LoginPage.php");
exit;
}
+
+$stmt = DB->prepare("SELECT * FROM building");
+$stmt->execute();
+$buildings = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html>
<head>
- <style>
- body {
- font-family: 'Roboto', sans-serif;
- margin: 0;
- padding: 0;
- padding-top: 50px;
- background-color: #1E1E2E; /* 调整背景颜色与interface.html一致 */
- color: #EAEAEA; /* 调整文本颜色与interface.html一致 */
- }
-
- #place-search-bar, #place-nav {
- background-color: #232533; /* 调整搜索栏和导航栏背景色 */
- padding: 10px 0;
- text-align: center;
- }
-
- #map {
- /*height: 500px;*/
- /*width: 100%;*/
- height: 500px;
- width: calc(100% - 40px); /* 减去边距的宽度 */
- margin-bottom: 20px;
- border: 2px solid #292A36; /* 边框颜色和宽度 */
- border-radius: 15px; /* 圆角大小 */
- }
-
- #place-search-bar {
- margin-bottom: 20px;
- text-align: center;
-
- background-color: #232533; /* 背景色 */
- padding: 10px 20px; /* 内边距 */
- margin: 0 20px 20px 20px; /* 外边距 */
- border-radius: 15px; /* 圆角大小 */
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
- }
-
- #place-search {
- width: 300px;
- height: 40px;
- padding: 5px 10px;
- margin: 10px;
- font-size: 16px;
- border: 1px solid #292A36; /* 输入框边框 */
- border-radius: 20px; /* 更圆的边框 */
- outline: none; /* 去掉焦点边框 */
- background-color: #292A36; /* 输入框背景色 */
- color: #EAEAEA; /* 输入框文本色 */
-
- }
-
- #place-nav {
- text-align: center;
- background-color: #232533; /* 背景色 */
- padding: 10px 20px; /* 内边距 */
- margin: 0 20px 20px 20px; /* 外边距 */
- border-radius: 15px; /* 圆角大小 */
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
- display: flex;
- flex-wrap: wrap;
- justify-content: center; /* 按钮居中显示 */
- gap: 10px; /* 按钮之间的间隙 */
- }
-
- #place-nav button {
- background-color: #292A36; /* 按钮背景色 */
- color: #EAEAEA; /* 按钮文本色 */
- border: none;
- border-radius: 15px;
- padding: 10px 15px;
- font-size: 14px;
- transition: background-color 0.3s, transform 0.2s;
- }
-
- #place-nav button:hover {
- background-color: #3A3B45; /* 鼠标悬浮背景色 */
- transform: translateY(-2px); /* 点击效果 */
- }
-
- #place-info {
- background-color: #232533; /* 信息区背景色 */
- border-radius: 15px;
- padding: 20px;
- margin: 0 20px; /* 外边距 */
- max-width: calc(100% - 40px); /* 控制最大宽度 */
- color: #EAEAEA; /* 信息区文本颜色 */
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
- }
- /* 其他样式 */
- #return-home-btn {
- position: fixed;
- right: 20px; /* 放置在右下角 */
- bottom: 20px;
- width: 50px; /* 宽度，使其更接近正方形 */
- height: 50px; /* 高度 */
- background-color: #333; /* 按钮背景色 */
- color: white; /* 图标颜色 */
- border-radius: 10px; /* 轻微的圆角 */
- text-align: center;
- line-height: 50px; /* 与按钮高度相同，使图标垂直居中 */
- text-decoration: none;
- border: none;
- cursor: pointer;
- transition: background-color 0.3s; /* 平滑的背景色变化效果 */
- }
-
- #return-home-btn:hover {
- background-color: #555; /* 鼠标悬停时的背景色 */
- }
-
- #return-home-btn i {
- font-size: 20px; /* 图标大小 */
- vertical-align: middle;
- }
- </style>
-
- <meta charset="UTF-8">
-
- <title>School Map Overlay</title>
-
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-
- <script src="<?php echo MAP_API_URL ?>" async defer></script>
-
+
+ <style>
+ body {
+ font-family: 'Roboto', sans-serif;
+ margin: 0;
+ padding: 0;
+ padding-top: 50px;
+ background-color: #1E1E2E; /* 调整背景颜色与interface.html一致 */
+ color: #EAEAEA; /* 调整文本颜色与interface.html一致 */
+ }
+
+ #place-search-bar, #place-nav {
+ background-color: #232533; /* 调整搜索栏和导航栏背景色 */
+ padding: 10px 0;
+ text-align: center;
+ }
+
+ #map {
+ /*height: 500px;*/
+ /*width: 100%;*/
+ height: 500px;
+ width: calc(100% - 40px); /* 减去边距的宽度 */
+ margin-bottom: 20px;
+ border: 2px solid #292A36; /* 边框颜色和宽度 */
+ border-radius: 15px; /* 圆角大小 */
+ }
+
+ #place-search-bar {
+ margin-bottom: 20px;
+ text-align: center;
+
+ background-color: #232533; /* 背景色 */
+ padding: 10px 20px; /* 内边距 */
+ margin: 0 20px 20px 20px; /* 外边距 */
+ border-radius: 15px; /* 圆角大小 */
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
+ }
+
+ #place-search {
+ width: 300px;
+ height: 40px;
+ padding: 5px 10px;
+ margin: 10px;
+ font-size: 16px;
+ border: 1px solid #292A36; /* 输入框边框 */
+ border-radius: 20px; /* 更圆的边框 */
+ outline: none; /* 去掉焦点边框 */
+ background-color: #292A36; /* 输入框背景色 */
+ color: #EAEAEA; /* 输入框文本色 */
+
+ }
+
+ #place-nav {
+ text-align: center;
+ background-color: #232533; /* 背景色 */
+ padding: 10px 20px; /* 内边距 */
+ margin: 0 20px 20px 20px; /* 外边距 */
+ border-radius: 15px; /* 圆角大小 */
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center; /* 按钮居中显示 */
+ gap: 10px; /* 按钮之间的间隙 */
+ }
+
+ #place-nav button {
+ background-color: #292A36; /* 按钮背景色 */
+ color: #EAEAEA; /* 按钮文本色 */
+ border: none;
+ border-radius: 15px;
+ padding: 10px 15px;
+ font-size: 14px;
+ transition: background-color 0.3s, transform 0.2s;
+ }
+
+ #place-nav button:hover {
+ background-color: #3A3B45; /* 鼠标悬浮背景色 */
+ transform: translateY(-2px); /* 点击效果 */
+ }
+
+ #place-info {
+ background-color: #232533; /* 信息区背景色 */
+ border-radius: 15px;
+ padding: 20px;
+ margin: 0 20px; /* 外边距 */
+ max-width: calc(100% - 40px); /* 控制最大宽度 */
+ color: #EAEAEA; /* 信息区文本颜色 */
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
+ }
+
+ /* 其他样式 */
+ #return-home-btn {
+ position: fixed;
+ right: 20px; /* 放置在右下角 */
+ bottom: 20px;
+ width: 50px; /* 宽度，使其更接近正方形 */
+ height: 50px; /* 高度 */
+ background-color: #333; /* 按钮背景色 */
+ color: white; /* 图标颜色 */
+ border-radius: 10px; /* 轻微的圆角 */
+ text-align: center;
+ line-height: 50px; /* 与按钮高度相同，使图标垂直居中 */
+ text-decoration: none;
+ border: none;
+ cursor: pointer;
+ transition: background-color 0.3s; /* 平滑的背景色变化效果 */
+ }
+
+ #return-home-btn:hover {
+ background-color: #555; /* 鼠标悬停时的背景色 */
+ }
+
+ #return-home-btn i {
+ font-size: 20px; /* 图标大小 */
+ vertical-align: middle;
+ }
+ </style>
+ <meta charset="UTF-8">
+ <title>School Map Overlay</title>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div id="map" style="height: 500px; width: 100%;"></div>
<div id="place-search-bar">
- <input id="place-search" type="text" placeholder="Search for places..." />
+ <input id="place-search" type="text" placeholder="Search for places..."/>
</div>
<nav id="place-nav">
- <button class="place-btn" data-name="Costa" data-lat="51.50038247666361" data-lng="-2.549955685215771">Costa</button>
- <button class="place-btn" data-name="Starbucks" data-lat="51.50016700964835" data-lng="-2.5480026932888418">Starbucks</button>
- <button class="place-btn" data-name="Morrisons" data-lat="51.5003948658256" data-lng="-2.5472881744839513">Morrisons</button>
- <button class="place-btn" data-name="Shop" data-lat="51.50098521382158" data-lng="-2.5509268290224445">Shop</button>
- <button class="place-btn" data-name="Greegs" data-lat="51.50009060466141" data-lng="-2.548083168970886">Greegs</button>
- <button id="add-place-btn">+</button>
+ <?php foreach ($buildings as $building): ?>
+ <button class="place-btn" data-name="<?php echo htmlspecialchars($building['name']); ?>"
+ data-lat="<?php echo htmlspecialchars($building['data-lat']); ?>"
+ data-lng="<?php echo htmlspecialchars($building['data-lng']); ?>"
+ data-opentime="<?php echo htmlspecialchars($building['openTime']); ?>"
+ data-description="<?php echo htmlspecialchars($building['description']); ?>">
+ <?php echo htmlspecialchars($building['name']); ?>
+ </button>
+ <?php endforeach; ?>
</nav>
-<div id="place-info"></div>
+<div id="place-info">
+
+</div>
<a href="interface.php" id="return-home-btn"><i class="fas fa-arrow-left"></i></a>
--
GitLab