Skip to content

Commit

Permalink
made frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
@padenaa
padenaa committed Sep 17, 2023
1 parent b4768e3 commit 76e1759
Show file tree
Hide file tree
Showing 15 changed files with 660 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .firebaserc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"projects": {
"default": "ur-giftie"
}
}
19 changes: 19 additions & 0 deletions .github/workflows/firebase-hosting-merge.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
'on':
push:
branches:
- main
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_UR_GIFTIE }}'
channelId: live
projectId: ur-giftie
16 changes: 16 additions & 0 deletions .github/workflows/firebase-hosting-pull-request.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
build_and_preview:
if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_UR_GIFTIE }}'
projectId: ur-giftie
7 changes: 7 additions & 0 deletions database.rules.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
/* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
"rules": {
".read": false,
".write": false
}
}
25 changes: 25 additions & 0 deletions firebase.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"storage": {
"rules": "storage.rules"
},
"emulators": {
"hosting": {
"port": 5000
},
"ui": {
"enabled": true
},
"singleProjectMode": true
}
}
33 changes: 33 additions & 0 deletions public/404.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Not Found</title>

<style media="screen">
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
#message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
@media (max-width: 600px) {
body, #message { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
}
</style>
</head>
<body>
<div id="message">
<h2>404</h2>
<h1>Page Not Found</h1>
<p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
<h3>Why am I seeing this?</h3>
<p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
</div>
</body>
</html>
131 changes: 131 additions & 0 deletions public/add.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<!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">
<title>giftie</title>

<!-- update the version number as needed -->
<script defer src="/__/firebase/10.4.0/firebase-app-compat.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/10.4.0/firebase-auth-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-database-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-firestore-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-functions-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-messaging-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-storage-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-analytics-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-remote-config-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-performance-compat.js"></script>
<!--
initialize the SDK after all desired features are loaded, set useEmulator to false
to avoid connecting the SDK to running emulators.
-->
<script defer src="/__/firebase/init.js?useEmulator=true"></script>

<link href="https://fonts.googleapis.com/css?family=Mooli" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/bulma.min.css" />
</head>
<style type="text/css">
html,
body {
font-family: 'Mooli';
min-height: 100vh;
}

img {
padding: 5px;
border: 1px solid #ccc;
}
</style>

<body style="background-color: #f7bfe8; ">
<!-- HEADER -->
<section class="hero is-small is-primary has-text-centered" style="background-color:rgb(171, 212, 248)">
<div class="hero-body">
<h1 class="title is-1">
giftie
</h1>
</div>
</section>

<div class="container">

<section class="section " style="padding-right: 100px; padding-left: 100px">
<h1 class="title is-4 has-text-centered">Add a new gift recipient</h1>
<!--FORM-->
<div class = "columns">
<div class="column is-one-fifth">
<img src="logo.png" style="border:0" id="profilepic">
</div>
<div class="column ">
<div class="field">
<!--name-->
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" placeholder="Name" id="name">
</div>
</div>

<div class="field">
<!--relationship-->
<label class="label">Relationship</label>
<div class="control">
<div class="select">
<select id="relationship">
<option>family</option>
<option>friend</option>
<option>significant other</option>
<option>colleague/professional</option>
<option>other</option>
</select>
</div>
</div>
</div>

<div class="field">
<!--description-->
<label class="label">Gift Ideas</label>
<div class="control">
<textarea class="textarea" placeholder="Ideas" id="ideas"></textarea>
</div>
</div>

<div class="field">
<label class="label">Upload gift recipient's picture</label>
<div class="file has-name">
<label class="file-label" background-color: rgb(171, 212, 248);>
<input class="file-input" type="file" id="picture">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name" id="filename">
your file will appear here
</span>
</label>
</div>
</div>
<br>
<div class="control">
<button style="background-color: rgb(171, 212, 248);" class="button is-primary" onclick="poster()">Post</button>
</div>

</div>
</div>
</div>
</div>
</section>
</div>

</div>
<script src="js/add.js" type="text/javascript" defer></script>
</body>

</html>
Empty file added public/friend.html
View file
Empty file.
68 changes: 68 additions & 0 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>giftie</title>

<!-- update the version number as needed -->
<script defer src="/__/firebase/10.4.0/firebase-app-compat.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/10.4.0/firebase-auth-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-database-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-firestore-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-functions-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-messaging-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-storage-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-analytics-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-remote-config-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-performance-compat.js"></script>
<!--
initialize the SDK after all desired features are loaded, set useEmulator to false
to avoid connecting the SDK to running emulators.
-->
<script defer src="/__/firebase/init.js?useEmulator=true"></script>

<link href="https://fonts.googleapis.com/css?family=Mooli" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/bulma.min.css" />
<style type="text/css">
html,
body {
font-family: 'Mooli';
}

img {
padding: 5px;
border: 1px solid #ccc;
}
</style>
<script src="js/signIn.js"></script>
</head>
<body style="background-color: #f7bfe8;">
<section class="hero is-fullheight is-default is-bold">
<div class="hero-body">
<div class="container has-text-centered">
<div class="columns is-vcentered">
<div class="column is-6 is-offset-3">
<img src = "logo.png" style="width:200px;height:200px; border:0">
<br>
<h1 class="title is-1" style="color:#ffffff">
giftie
</h1>
<br>
<h2 class="subtitle is-4" style="color:#ffffff">
memorable gift ideas start here
</h2>
<br>
<p class="has-text-centered">
<a class="button is-medium" style="color:rgb(255, 255, 255); background-color: rgb(171, 212, 248);" onclick="signIn()">
Sign In
</a>
</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
55 changes: 55 additions & 0 deletions public/js/add.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
//read the fields for the new post
//add under user
let googleUser;
let googleUserId;

rship_arr = ["family", "friend", "significant other", "colleague/professional", "other"]
const name_in = document.getElementById("name");
const rship_in = document.getElementById("relationship");
const profilefile = document.getElementById("picture");
const ideas_in = document.getElementById("ideas");
const filename = document.getElementById("filename");
var img = document.getElementById("profilepic");

//get the user login info
window.onload = (event) => {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
console.log('Logged in as: ' + user.displayName);
googleUser = user;
googleUserId = user.uid;
} else {
// If not logged in, navigate back to login page.
window.location = 'index.html';
};
});
};

//image uploader
profilefile.addEventListener('change', function() {
console.log("uploading image");
if (this.files && this.files[0]) {
filename.innerHTML = this.files[0].name;
var storageRef = firebase.storage().ref("friends").child(googleUserId+this.files[0].name);
storageRef.put(this.files[0]).then(()=>{
firebase.storage().ref("friends").child(googleUserId+this.files[0].name).getDownloadURL()
.then((downloadURL) => {
img.src = downloadURL;
})
});
}
});


function poster(){
//update listings under general housing listings
firebase.database().ref(`${googleUser.uid}`).push({
//update title, address, length, rent, beds, baths, gender, description, picture
name: name_in.value,
relationship: rship_arr[rship_in.selectedIndex],
pic: img.src,
ideas: ideas_in.value
}).then(()=>{
window.location = "landing.html";
})
}
Loading

0 comments on commit 76e1759

Please sign in to comment.