Release 6 (#62)

* Refactor styles in show cards

* Add responsive navbar

* Add pictures for clubs in owner home

* Refactor ui (#61)

Refactor UI

Author: cristianbgp

README.md

@@ -1 +1,40 @@
-# kampu
+# Kampu
+
+<div align="center">
+  <h2>An app to book your favorite sports fields</h2>
+  <img src="./__docs__/screenshot.png">
+</div>
+
+## Setup
+
+The stack in this project is Rails + React.
+
+We have `api` and `client`.
+
+<hr/>
+
+To setup the api:
+
+First use `bundle` to install all the gems for the rails project
+
+    bundle install
+
+Then you should setup the database with
+
+    rails db:setup
+
+And finally, you should run it on a specific port. e.g. `4000`
+
+    rails s -p 4000
+
+<hr/>
+
+To setup the client:
+
+First use `yarn` to install all the package dependencies for the react project
+
+    yarn install
+
+And finally, you should run it, and by default it starts on the port `3000`
+
+    yarn start

__docs__/screenshot.png

@@ -1,7 +1,7 @@
 class ClubSerializer < ActiveModel::Serializer
   include Rails.application.routes.url_helpers
 
-  attributes :id, :name, :address, :image, :schedule, :favorited, :favorited_count, :district, :latitude, :longitude, :sport_fields
+  attributes :id, :name, :price, :address, :image, :schedule, :favorited, :favorited_count, :district, :latitude, :longitude, :sport_fields
 
   def image
     # rails_blob_path(object.image, only_path: true) if object.image.attached?
@@ -12,6 +12,10 @@ def image
     end
   end
 
+  def price
+    self.object.sport_fields.minimum(:price_day)
+  end
+
   def favorited
     current_user ? current_user.favorited?(object) : false
   end

api/app/serializers/club_serializer.rb

@@ -78,31 +78,27 @@ def get_image(file_name)
   }
 }
 
-regular_user = User.create(name: 'Lian Nivin', email: 'liam@kampu.pe', role: "regular", password: '123456')
-owner_user = User.create(name: 'Cristian Berly', email: 'berli@kampu.pe', role: "owner", password: '123456')
+owner_user = User.create(name: 'Frank Conde', email: 'frank@kampu.app', role: "owner", password: '123456')
+regular_user = User.create(name: 'Cristian Berly', email: 'cristian@kampu.app', role: "regular", password: '123456')
 
 clubs.each do |club|
   image = club[:num_img].times.map { |i| get_image("#{club[:name]}/gallery_#{i + 1}.jpg") }
   club.delete(:num_img)
   Club.create(club.merge({image: image, schedule: schedule}))
 end
 
-sportfield1 = SportField.create(name: "SportField #1", description: "Soccer 5vs5", price_day: 20, price_night: 40, club_id: 1)
-sportfield2 = SportField.create(name: "SportField #2", club_id: 2);	
-SportField.create(name: "SportField #2", description: "Soccer 6vs6", price_day: 30, price_night: 60, club_id: 2)
-sportfield3 = SportField.create(name: "SportField #3", club_id: 1);	SportField.create(name: "SportField #3", description: "Soccer 5vs5", price_day: 20, price_night: 40, club_id: 1)
+Club.all.each do |club|
+  SportField.create(name: "SportField #1", description: "Soccer 5vs5", price_day: 20, price_night: 40, club_id: club.id)
+  SportField.create(name: "SportField #2", description: "Soccer 6vs6", price_day: 30, price_night: 60, club_id: club.id)
+  SportField.create(name: "SportField #3", description: "Soccer 5vs5", price_day: 20, price_night: 40, club_id: club.id)
+end
 
-# favorites
 regular_user.favorite(Club.first)
 regular_user.favorite(Club.last)
-regular_user.bookings.create(date: Time.now, start_hour: 14, end_hour: 15, amount: 100, sport_field_id: sportfield1.id );
-
-regular_user.bookings.create(date: Time.now, start_hour: 15, end_hour: 16, amount: 100, sport_field_id: sportfield1.id );
-
-regular_user.bookings.create(date: Time.now, start_hour: 16, end_hour: 17, amount: 100, sport_field_id: sportfield1.id );
-
-regular_user.bookings.create(date: Time.now, start_hour: 17, end_hour: 18, amount: 100, sport_field_id: sportfield1.id );
-
-regular_user.bookings.create(date: Time.now, start_hour: 15, end_hour: 16, amount: 200, sport_field_id: sportfield2.id );
 
-regular_user.bookings.create(date: Time.now, start_hour: 16, end_hour: 17, amount: 300, sport_field_id: sportfield3.id );
+regular_user.bookings.create(date: Time.now, start_hour: 14, end_hour: 15, amount: 100, sport_field_id: rand(SportField.all.size))
+regular_user.bookings.create(date: Time.now, start_hour: 15, end_hour: 16, amount: 100, sport_field_id: rand(SportField.all.size))
+regular_user.bookings.create(date: Time.now, start_hour: 16, end_hour: 17, amount: 100, sport_field_id: rand(SportField.all.size))
+regular_user.bookings.create(date: Time.now, start_hour: 17, end_hour: 18, amount: 100, sport_field_id: rand(SportField.all.size))
+regular_user.bookings.create(date: Time.now, start_hour: 15, end_hour: 16, amount: 200, sport_field_id: rand(SportField.all.size))
+regular_user.bookings.create(date: Time.now, start_hour: 16, end_hour: 17, amount: 300, sport_field_id: rand(SportField.all.size))

api/db/seeds.rb

@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <!--
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#fafafa" />
+    <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -20,17 +19,20 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <meta name="language" content="en">
-  <meta name="author" content="Team Codeable">
-  <title>Kampu</title>
-  <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
-  <script src="https://js.stripe.com/v3/"></script>
-</head>
+    <meta name="language" content="en" />
+    <meta name="author" content="Team Codeable" />
+    <title>Kampu</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Rubik&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://js.stripe.com/v3/"></script>
+  </head>
 
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-  <!--
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -40,6 +42,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
+  </body>
 </html>

client/public/favicon.ico

@@ -1,15 +1,36 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "name": "Kampu",
+  "short_name": "Kampu",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#fafafa",
+  "description": "An app to book your favorite sports fields",
+  "lang": "en-US",
+  "orientation": "portrait-primary",
+  "theme_color": "#663399",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "[email protected]",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "[email protected]",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "[email protected]",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "logo.png",
+      "sizes": "128x128 96x96 72x72 64x64 32x32 24x24 16x16",
+      "type": "image/png"
     }
   ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "related_applications": [],
+  "prefer_related_applications": false,
+  "categories": ["sports", "productivity"]
 }