Skip to content

Commit 45d3dd2

Browse files
mia-miaawmia-miaaw
committed
update
1 parent f46b055 commit 45d3dd2

File tree

5 files changed

+178
-21
lines changed

5 files changed

+178
-21
lines changed

‎_includes/head.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,5 @@
1515
<script type="module" src="{{ '/assets/frameworks/ionicons/dist/ionicons/ionicons.esm.js' | relative_url }}"></script>
1616
<script nomodule src="{{ '/assets/frameworks/ionicons/dist/ionicons/ionicons.js' | relative_url }}"></script>
1717
{% include sdk.html %}
18+
<script src="{{ '/assets/js/jquery/jquery.min.js?v=3.6.0' | relative_url }}"></script>
1819
</head>

‎assets/js/jquery/jquery.min.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/jquery/jquery.min.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎product/add/index.html

Lines changed: 123 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<div class="content">
99
<ion-card>
1010
<ion-card-content>
11+
<div id="loginForm">
1112
<ion-text><h2>Login Admin Product</h2></ion-text>
1213
<ion-list>
1314
<ion-item lines="full">
@@ -22,8 +23,7 @@
2223
</ion-item>
2324
</ion-list>
2425
<ion-button expand="block" fill="outline" id="loginBtn">Sign in</ion-button>
25-
<ion-button expand="block" fill="outline" id="logoutBtn" style="display: none;">Logout</ion-button>
26-
26+
</div>
2727
<form id="productForm" style="display: none;">
2828
<h2>Tambah Produk</h2>
2929
<p/>
@@ -33,10 +33,11 @@ <h2>Tambah Produk</h2>
3333
<input type="text" id="categories" placeholder="Kategori" required><br>
3434
<input type="text" id="tags" placeholder="Tag" required><br>
3535
<input type="number" id="rating" placeholder="Rating (1-5)" required><br>
36-
<textarea id="images" placeholder="Masukkan URL gambar, pisahkan dengan koma" required></textarea><br>
36+
<textarea id="image" placeholder="Masukkan URL gambar, pisahkan dengan koma" required></textarea><br>
3737
<textarea id="deskripsi" placeholder="Deskripsi Produk" required></textarea><br>
3838
<button type="submit">Tambah Produk</button>
3939
</form>
40+
<ion-button expand="block" fill="outline" id="logoutBtn" style="display: none;">Logout</ion-button>
4041
</ion-card-content>
4142
</ion-card>
4243
<div id="productList"></div>
@@ -55,15 +56,19 @@ <h2>Tambah Produk</h2>
5556
appId: "1:489703180131:web:4383f5ef04c1d414ce3556",
5657
measurementId: "G-ZWW4K4NVQ6"
5758
};
59+
60+
firebase.initializeApp(firebaseConfig);
61+
5862
// Initialize Firebase
59-
const app = firebase.initializeApp(firebaseConfig);
6063
const auth = firebase.auth();
6164
const db = firebase.firestore();
65+
6266
// DOM Content Loaded
6367
document.addEventListener("DOMContentLoaded", function () {
6468
const loginBtn = document.getElementById("loginBtn");
6569
const logoutBtn = document.getElementById("logoutBtn");
6670
const productForm = document.getElementById("productForm");
71+
const loginForm = document.getElementById("loginForm");
6772

6873
// 🔹 Cek apakah elemen ada sebelum menambahkan event listener
6974
if (loginBtn && logoutBtn && productForm) {
@@ -75,10 +80,10 @@ <h2>Tambah Produk</h2>
7580
const userCredential = await auth.signInWithEmailAndPassword(email, password);
7681
const user = userCredential.user;
7782

78-
// Cek apakah user adalah admin
79-
const idTokenResult = await user.getIdTokenResult();
80-
if (idTokenResult.claims.admin) {
81-
showAlert("Login berhasil sebagai admin");
83+
// Cek apakah user adalah admin di Firestore
84+
const adminDoc = await db.collection("admins").doc(user.uid).get();
85+
if (adminDoc.exists) {
86+
showAlert("Login sebagai admin berhasil");
8287
updateUI(true);
8388
} else {
8489
showAlert("Anda bukan admin product!");
@@ -100,10 +105,12 @@ <h2>Tambah Produk</h2>
100105
function updateUI(isAdmin) {
101106
if (isAdmin) {
102107
productForm.style.display = "block";
108+
loginForm.style.display = "none";
103109
loginBtn.style.display = "none";
104110
logoutBtn.style.display = "block";
105111
} else {
106112
productForm.style.display = "none";
113+
loginForm.style.display = "block";
107114
loginBtn.style.display = "block";
108115
logoutBtn.style.display = "none";
109116
}
@@ -120,6 +127,114 @@ <h2>Tambah Produk</h2>
120127
});
121128
}
122129
});
130+
131+
document.addEventListener("DOMContentLoaded", function () {
132+
const form = document.getElementById("productForm");
133+
const productList = document.getElementById("productList");
134+
135+
if (!form) {
136+
console.error("Form dengan ID 'productForm' tidak ditemukan!");
137+
return;
138+
}
139+
140+
form.addEventListener("submit", async function (e) {
141+
e.preventDefault();
142+
143+
// Pastikan semua elemen input ada
144+
const titleInput = document.getElementById("title");
145+
const hargaInput = document.getElementById("harga");
146+
const stokInput = document.getElementById("stok");
147+
const categoriesInput = document.getElementById("categories");
148+
const tagsInput = document.getElementById("tags");
149+
const ratingInput = document.getElementById("rating");
150+
const imageInput = document.getElementById("image");
151+
const deskripsiInput = document.getElementById("deskripsi");
152+
153+
if (!titleInput || !hargaInput || !stokInput || !categoriesInput || !tagsInput || !ratingInput || !imageInput || !deskripsiInput) {
154+
console.error("Satu atau lebih elemen input tidak ditemukan!");
155+
return;
156+
}
157+
158+
const images = imageInput.value.split(",").map(img => img.trim()).filter(img => img !== "");
159+
160+
const product = {
161+
title: titleInput.value,
162+
harga: hargaInput.value,
163+
stok: stokInput.value,
164+
categories: categoriesInput.value,
165+
tags: tagsInput.value,
166+
rating: parseFloat(ratingInput.value) || 0,
167+
images: images,
168+
deskripsi: deskripsiInput.value
169+
};
170+
171+
try {
172+
const user = auth.currentUser;
173+
if (!user) {
174+
showAlert("Anda harus login sebagai admin!");
175+
return;
176+
}
177+
178+
// Refresh token untuk memastikan claims terbaru
179+
await user.getIdToken(true);
180+
const idTokenResult = await user.getIdTokenResult();
181+
182+
console.log("User claims:", idTokenResult.claims);
183+
184+
if (!idTokenResult.claims.admin) {
185+
showAlert("Anda bukan admin!");
186+
return;
187+
}
188+
189+
await db.collection("products").add(product);
190+
showAlert("Produk berhasil ditambahkan!", "success");
191+
form.reset();
192+
loadProducts();
193+
} catch (error) {
194+
console.error("Error:", error);
195+
showAlert("Gagal menambahkan produk.");
196+
}
197+
});
198+
199+
async function loadProducts() {
200+
if (!productList) {
201+
console.error("Elemen 'productList' tidak ditemukan!");
202+
return;
203+
}
204+
205+
productList.innerHTML = "";
206+
207+
try {
208+
const querySnapshot = await db.collection("products").get();
209+
querySnapshot.forEach((doc) => {
210+
const data = doc.data();
211+
const productElement = document.createElement("div");
212+
213+
let imageSlides = data.images.map((img, index) => `
214+
<div class="slide" ${index === 0 ? 'style="display:block;"' : 'style="display:none;"'}>
215+
<img src="${img}" alt="Product Image">
216+
</div>
217+
`).join("");
218+
219+
productElement.innerHTML = `
220+
<div class="carousel">
221+
${imageSlides}
222+
<button class="prev" onclick="prevSlide(this)">&#10094;</button>
223+
<button class="next" onclick="nextSlide(this)">&#10095;</button>
224+
</div>
225+
<h3>${data.title}</h3>
226+
<p>Harga: ${data.harga}</p>
227+
<p>${data.deskripsi}</p>
228+
`;
229+
productList.appendChild(productElement);
230+
});
231+
} catch (error) {
232+
console.error("Error:", error);
233+
}
234+
}
235+
236+
loadProducts();
237+
});
123238

124239
function showAlert(message) {
125240
// Buat elemen ion-toast
@@ -134,7 +249,6 @@ <h2>Tambah Produk</h2>
134249
toast.present();
135250
}
136251
</script>
137-
<script type="module" src="{{site.baseurl}}/product/add/product.js"></script>
138252

139253
<style>
140254
.carousel {

‎product/add/product.js

Lines changed: 51 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,50 @@
1+
// Pastikan Firebase sudah diinisialisasi
2+
if (!firebase.apps.length) {
3+
firebase.initializeApp(firebaseConfig);
4+
}
5+
6+
// Initialize Firebase Auth dan Firestore
7+
const auth = firebase.auth();
8+
const db = firebase.firestore();
9+
110
document.addEventListener("DOMContentLoaded", function () {
211
const form = document.getElementById("productForm");
312
const productList = document.getElementById("productList");
413

14+
if (!form) {
15+
console.error("Form dengan ID 'productForm' tidak ditemukan!");
16+
return;
17+
}
18+
519
form.addEventListener("submit", async function (e) {
620
e.preventDefault();
721

8-
const images = document.getElementById("image").value.split(",").map(img => img.trim()).filter(img => img !== "");
22+
// Pastikan semua elemen input ada
23+
const titleInput = document.getElementById("title");
24+
const hargaInput = document.getElementById("harga");
25+
const stokInput = document.getElementById("stok");
26+
const categoriesInput = document.getElementById("categories");
27+
const tagsInput = document.getElementById("tags");
28+
const ratingInput = document.getElementById("rating");
29+
const imageInput = document.getElementById("image");
30+
const deskripsiInput = document.getElementById("deskripsi");
31+
32+
if (!titleInput || !hargaInput || !stokInput || !categoriesInput || !tagsInput || !ratingInput || !imageInput || !deskripsiInput) {
33+
console.error("Satu atau lebih elemen input tidak ditemukan!");
34+
return;
35+
}
36+
37+
const images = imageInput.value.split(",").map(img => img.trim()).filter(img => img !== "");
938

1039
const product = {
11-
title: document.getElementById("title").value,
12-
harga: document.getElementById("harga").value,
13-
stok: document.getElementById("stok").value,
14-
categories: document.getElementById("categories").value,
15-
tags: document.getElementById("tags").value,
16-
rating: parseFloat(document.getElementById("rating").value),
40+
title: titleInput.value,
41+
harga: hargaInput.value,
42+
stok: stokInput.value,
43+
categories: categoriesInput.value,
44+
tags: tagsInput.value,
45+
rating: parseFloat(ratingInput.value) || 0,
1746
images: images,
18-
deskripsi: document.getElementById("deskripsi").value
47+
deskripsi: deskripsiInput.value
1948
};
2049

2150
try {
@@ -25,14 +54,19 @@ document.addEventListener("DOMContentLoaded", function () {
2554
return;
2655
}
2756

57+
// Refresh token untuk memastikan claims terbaru
58+
await user.getIdToken(true);
2859
const idTokenResult = await user.getIdTokenResult();
60+
61+
console.log("User claims:", idTokenResult.claims);
62+
2963
if (!idTokenResult.claims.admin) {
3064
showAlert("Anda bukan admin!");
3165
return;
3266
}
3367

3468
await db.collection("products").add(product);
35-
showAlert("Produk berhasil ditambahkan!");
69+
showAlert("Produk berhasil ditambahkan!", "success");
3670
form.reset();
3771
loadProducts();
3872
} catch (error) {
@@ -42,6 +76,11 @@ document.addEventListener("DOMContentLoaded", function () {
4276
});
4377

4478
async function loadProducts() {
79+
if (!productList) {
80+
console.error("Elemen 'productList' tidak ditemukan!");
81+
return;
82+
}
83+
4584
productList.innerHTML = "";
4685

4786
try {
@@ -76,15 +115,15 @@ document.addEventListener("DOMContentLoaded", function () {
76115
loadProducts();
77116
});
78117

79-
function showAlert(message) {
118+
function showAlert(message, type = "danger") {
80119
// Buat elemen ion-toast
81120
const toast = document.createElement("ion-toast");
82121
toast.message = message;
83122
toast.duration = 5000;
84-
toast.color = "danger"; // Bisa diubah sesuai kebutuhan
123+
toast.color = type; // Bisa "danger" atau "success"
85124
toast.position = "top"; // Posisi toast
86125

87126
// Tambahkan ke dalam body dan tampilkan
88127
document.body.appendChild(toast);
89128
toast.present();
90-
}
129+
}

0 commit comments

Comments
 (0)