Javascript 喜爱的按钮
Html:Javascript 喜爱的按钮,javascript,html,ionic-framework,Javascript,Html,Ionic Framework,Html: 列表 地点 添加位置 开始菜单 名额表 添加位置 关于 // ----------------------------------------------------------------------------------------------- //当用户在离子项目上滑动时，当用户单击垃圾箱图标时触发 函数deleteOne（）{ 展示场所（）； var loadSaved=JSON.parse（localStorage.getItem（“allPlaces”）； log（
列表
地点
添加位置
开始菜单
名额表
添加位置
关于
// -----------------------------------------------------------------------------------------------
//当用户在离子项目上滑动时，当用户单击垃圾箱图标时触发
函数deleteOne（）{
展示场所（）；
var loadSaved=JSON.parse（localStorage.getItem（“allPlaces”）；
log（本地存储）；
console.log（loadSaved）；
//尝试实现相同的函数，但要避免使用while循环
//在找到正确的电子邮件后搜索剩余阵列位置
对于（变量i=0；i{
deleteAll（）；
展示场所（）；
}
}
]
//3.将其附加到html中
document.body.appendChild（警报）；
//4.展示它
返回alert.present（）；
}
//加载页面时，该函数应在后台运行，以便显示注释
var list=document.getElementById（“位置列表”）；
document.getElementById（“全部删除”）.addEventListener（“单击”，确认删除警报）；
//删除所有注释和键“allPlaces”
函数deleteAll（）{
localStorage.removietem（“所有位置”）；
展示场所（）；
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
<link rel="stylesheet" href="css/style.css" />
<title>List</title>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar id="header" color="secondary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title id="inbox">Places</ion-title>
<ion-buttons slot="end">
<ion-button id="delete-all">
<ion-icon name="trash-outline"></ion-icon>
</ion-button>
<ion-button href="add.html">
<ion-icon name="add-outline"></ion-icon>
<ion-label>Add Place</ion-label>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list id="place-list">
</ion-list>
<template id="place-template">
<ion-item-sliding>
<ion-item lines="full">
<ion-label id="label" data="0">
<h2></h2>
<ion-icon size="large" id="ion-icon" slot="end"></ion-icon>
</ion-label>
<ion-buttons>
<ion-button id="star-button">
<ion-icon id="star" name="star-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
<ion-item-options side="end">
<ion-item-option>
<ion-buttons>
<ion-button id="delete_one" onclick="deleteOne()">
<ion-icon size="large" name="trash-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</template>
</ion-content>
<ion-menu side="start" menu-id="first" content-id="main">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-buttons>
<ion-button href="index.html">
<ion-label>List of places</ion-label>
<ion-icon slot="end" name="list-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
<ion-item>
<ion-buttons>
<ion-button href="add.html">
<ion-label>Adding places</ion-label>
<ion-icon slot="end" name="add-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
<ion-item>
<ion-buttons>
<ion-button href="about.html">
<ion-label>About</ion-label>
<ion-icon slot="end" name="information-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<div id="main"></div>
</ion-app>
</body>
<script>
</script>
<script>
// -----------------------------------------------------------------------------------------------
//Triggered when the user clicks on the trash icon when the user swipes on the ion-item
function deleteOne() {
showPlaces();
var loadSaved = JSON.parse(localStorage.getItem("allPlaces"));
console.log(localStorage);
console.log(loadSaved);
//Try to implement the same function but with a while loop to avoid
//searching the remaining array position after the correct email has been found
for (var i = 0; i < loadSaved.length; i++) {
console.log(i);
console.log(this);
//remove one item at the position
loadSaved.splice(i, 1);
}
if (loadSaved.length == 0) {
localStorage.removeItem("allPlaces");
} else {
localStorage.setItem("allPlaces", JSON.stringify(loadSaved));
}
list.innerHTML = "";
console.log(loadSaved);
}
// -----------------------------------------------------------------------------------------------
function confirmDeleteAlert() {
//1. Create it
var alert = document.createElement("ion-alert");
//2. Set it
alert.header = "Places";
alert.message = "Are you sure you want to delete all Places?";
alert.buttons = [
{
text: 'NO'
},
{
text: 'YES',
handler: () => {
deleteAll();
showPlaces();
}
}
]
//3. Append it to the html
document.body.appendChild(alert);
//4. Display it
return alert.present();
}
//When the page loads up, the function should run in the background so notes can be shown
var list = document.getElementById("place-list");
document.getElementById("delete-all").addEventListener("click", confirmDeleteAlert);
// To delete all the notes and the key "allPlaces"
function deleteAll() {
localStorage.removeItem("allPlaces");
showPlaces();
}
</script>
<script src="cordova.js"></script>
<script src="js/script_pass_data.js"></script>
<script src="js/index2.js"></script>
</html>
window.addEventListener（“加载”，展示场所）；
var star=document.getElementById（“star”）；
//----------------------------------------------------------------------------------------------------//
函数showPlaces（）{
var template=document.getElementById（“放置模板”）；
var loadSavedPlaces=JSON.parse（localStorage.getItem（“allPlaces”）；
//log（本地存储）；
var template=document.getElementById（“放置模板”）；
//控制台日志（模板）；
//如果loadSavedPlaces为空，则说“尚未保存任何位置”，否则复制模板
if（loadSavedPlaces==null）{
list.innerHTML=“尚未保存任何位置。”；
loadSavedPlaces.forEach（列表）；
var label=document.getElementById（“放置模板”）；
label.textContent=“尚未保存任何位置”；
列表。追加子项（标签）；
}
否则{
对于（变量i=0；iwindow.addEventListener("load", showPlaces);
var star = document.getElementById("star");
//----------------------------------------------------------------------------------------------------//
function showPlaces() {
var template = document.getElementById("place-template");
var loadSavedPlaces = JSON.parse(localStorage.getItem("allPlaces"));
// console.log(localStorage);
var template = document.getElementById("place-template");
// console.log(template);
// if loadSavedPlaces is null then say "No places saved yet.", else make a copy of the template
if (loadSavedPlaces == null) {
list.innerHTML = "No places saved yet.";
loadSavedPlaces.forEach(list);
var label = document.getElementById("place-template");
label.textContent = "No places saved yet";
list.appendChild(label);
}
else {
for (var i = 0; i < loadSavedPlaces.length; i++) {
// console.log(i);
//We are copying what is inside the template. We are using firstElementChild so
//we do not copy the template tag - we just get ion-item
var templateCOPY = template.content.firstElementChild.cloneNode(true);
// console.log(templateCOPY);
var label = templateCOPY.children[0].children[0];
var starButton = templateCOPY.children[0].children[1];
console.log(loadSavedPlaces[i]);
starButton.addEventListener("click", favorite);
label.addEventListener("click", openModal);
// label.addEventListener("click", getPosition);
label.children[0].textContent = loadSavedPlaces[i].address;
label.children[1].name = loadSavedPlaces[i].placetype;
// console.log(label);
list.appendChild(templateCOPY);
}
}
}
function checkTime(i) {
if (i < 10) { i = "0" + i }; // add zero in front of numbers < 10
return i;
}
var today = new Date();
var loadSavedPlaces = JSON.parse(localStorage.getItem("allPlaces"));
for (var i = 0; i < loadSavedPlaces.length; i++) {
var places = [
{
'Address': loadSavedPlaces[i].address,
'Description': loadSavedPlaces[i].description,
'IconName': loadSavedPlaces[i].placetype,
'DateAndTimeCreation': today.getFullYear() + '-' + checkTime((today.getMonth() + 1)) + '-' + checkTime(today.getDate()) + ' ' + checkTime(today.getHours()) + ':' + checkTime(today.getMinutes()),
}
]
}
window.addEventListener("load", showPlaces);
function favorite() {
// console.log(this.children[0].children[0]);
var list = document.getElementById("place-list");
var template = document.getElementById("place-template");
var templateCOPY = template.content.firstElementChild.cloneNode(true);
var label = templateCOPY.children[0].children[0];
// var starButton = templateCOPY.children[0].children[1];
var loadSavedPlaces = JSON.parse(localStorage.getItem("allPlaces"));
var x = document.querySelector("#star-button");
var starButton = this.children[0];
var icon = starButton.children[0];
for (var i = 0; i < loadSavedPlaces.length; i++)
{
if(loadSavedPlaces[i].favorites == "false"){
loadSavedPlaces[i].favorites = "true";
icon.setAttribute("name", "star");
icon.color = "warning";
}
else{
loadSavedPlaces[i].favorites = "false";
icon.setAttribute("name", "star-outline");
icon.color = "dark";
}
}
localStorage.setItem("allPlaces", JSON.stringify(loadSavedPlaces));
}
customElements.define('modal-page', class extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<body>
<ion-app>
<ion-header>
<ion-toolbar color="warning">
<ion-title>I am a modal</ion-title>
<ion-buttons slot="end">
<ion-button onclick="dismissModal()">
<ion-icon name="close-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-item>
<ion-label">
<h2>Title: ${modalElement.componentProps.placeInfo.Address}</h2>
<h4>Description: ${modalElement.componentProps.placeInfo.Description}</h4>
Category: <ion-icon slot="end" name="${modalElement.componentProps.placeInfo.IconName}"></ion-icon><br>
Date and time created: <p>${modalElement.componentProps.placeInfo.DateAndTimeCreation}</p>
<div id="map">
<iframe id="google_map" width="425" height="350" frameboarder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</ion-label>
</ion-item>
</ion-content>
</ion-app>
</body>
`;
}
})
const modalElement = document.createElement("ion-modal");
function openModal() {
modalElement.component = "modal-page";
var c = function (pos) {
var lat = pos.coords.latitude;
var long = pos.coords.longitude;
var cords = lat + ", " + long;
document.getElementById("google_map").setAttribute("src", "https://www.google.com/maps/embed/v1/place?key=AIzaSyCdrL38QxWO88FYNGgl1mq1lEXJBg4U6uA&q=" + cords);
onDeviceReady();
}
navigator.geolocation.getCurrentPosition(c);
modalElement.componentProps = {
'placeInfo': places[this.getAttribute("data")]
}
document.body.appendChild(modalElement);
return modalElement.present();
}
function dismissModal() {
modalElement.dismiss();
}