Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 | 4x 4x 1x | <template>
<div class="container text-center">
<div class="card mx-auto">
<div class="card-header">
<span contenteditable="true">{{ currentLocation.locationName }}</span>
</div>
<img
v-bind:src="currentLocation.photo"
style="height: 300px; width: 26rem"
alt="Location Image"
/>
<div class="detail" style="margin-top: 1rem">
Address: {{ currentLocation.address }}
</div>
<div class="detail">Hours: {{ currentLocation.hours }}</div>
<div class="detail">Phone: {{ currentLocation.phoneNumber }}</div>
<button class="btn ml-auto" @click="likeButton()">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="red"
class="bi bi-heart"
viewBox="0 0 16 16"
>
<path
d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"
/>
</svg>
{{ this.currentLocation.likeCount }}
</button>
</div>
<router-link to="/allLocations" tag="button">
<button class="button">View All</button>
</router-link>
</div>
</template>
<script>
import LocationService from "../LocationService";
export default {
name: "LocationCard",
data() {
return {
currentLocation: {
locationName: "",
photo: "",
address: "",
phoneNumber: "",
hours: "",
likeCount: 0,
_id: "",
},
locations: [],
};
` `;
},
/**
* @vuese
* Gets all the information about the user selected location from the list and displays dynamically, if not selected by the user, the location is displayed randomly.
*/
async mounted() {
this.currentLocation = await JSON.parse(
sessionStorage.getItem("currentLocation")
);
if (this.currentLocation === null) {
let titles = null;
try {
titles = await LocationService.getLocations();
titles = titles.data;
console.log("array", titles);
} catch (err) {
console.log(err);
}
for (let i = 0; i < titles.length; i++) {
this.locations.push(titles[i]);
}
const random = Math.floor(Math.random() * titles.length);
this.currentLocation = this.locations[random];
sessionStorage.setItem(
"currentLocation",
JSON.stringify(this.currentLocation)
);
console.log("here --", this.currentLocation);
this.currentLocation._id = this.currentLocation._id;
}
},
async onactivated() {
this.mounted();
},
/**
* @vuese
* Increases the like count of current Location.
*/
methods: {
async likeButton() {
this.currentLocation.likeCount += 1;
await LocationService.likeIncrease(this.currentLocation);
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.card {
width: 26rem;
height: 35rem;
font-weight: bold;
font-size: 0.9rem;
margin-bottom: 0.5rem;
border: none;
outline: none;
border-radius: 22px;
background-color: #e0e5ec;
box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6),
-9px -9px 16px rgba(255, 255, 255, 0.5);
}
.card-header {
font-weight: bold;
font-size: 1.4rem;
border: none;
outline: none;
border-top-left-radius: 22px;
border-top-right-radius: 22px;
background-color: #e0e5ec;
box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6),
-9px -9px 16px rgba(255, 255, 255, 0.5);
}
.detail {
margin: 0.5rem 0rem;
}
.btn {
height: 4.2rem;
width: 4.2rem;
font-weight: bold;
font-size: 0.9rem;
border: none;
outline: none;
margin-right: 1rem;
border-radius: 2rem;
background-color: #e0e5ec;
box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6),
-9px -9px 16px rgba(255, 255, 255, 0.5);
}
.btn:hover {
box-shadow: inset 9px 9px 16px rgb(163, 177, 198, 0.6),
inset -9px -9px 16px rgba(255, 255, 255, 0.5);
}
span {
color: #363233;
font-size: 1.5rem;
font-family: Luminari, fantasy;
font-weight: 100;
text-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6),
-9px -9px 16px rgba(255, 255, 255, 0.5);
outline: none;
border: none;
}
.button {
width: 26rem;
font-weight: bold;
padding: 1rem;
font-size: 1.1rem;
margin-top: 1rem;
margin-bottom: 2rem;
border: none;
outline: none;
color: #007bff;
border-radius: 22px;
background-color: #e0e5ec;
box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6),
-9px -9px 16px rgba(255, 255, 255, 0.5);
transition: box-shadow 500ms;
}
.button:hover {
box-shadow: inset 9px 9px 16px rgb(163, 177, 198, 0.6),
inset -9px -9px 16px rgba(255, 255, 255, 0.5);
}
</style>
|