Header Component

Create a separate component containing the header, allowing easy changes to be made in the future and to adhere to Atomic Design standards

Tasks:

• Add "Intel Astro" text to component
• Add styling
  • Font size: 64
  • Font weight: Lighter
  • Font family: Roboto

Base Calendar Component

Create a calendar component with the ability to select date ranges.

Functionality:

• Start date/month (default to current date/month)
• OnChange event for when the user selects a date (start/end)
• User can switch month with arrow buttons
• User can switch year by clicking the header date area

Dependencies:

• moment.js

npm i -S moment

Resources:

• Using Moment.js with TypeScript

Autocomplete Component

An autocomplete text field to search cities and get their lat/long for the astro data.

Tasks:

• Add API fetch capability
• Add loading indicator SVG
• Add U.S. state abbreviations
• Clicking/Tapping results item should move to next page after selecting it
• User can use arrow keys to navigate the results
• User can hit enter to select results item

Dependencies:
City Geo-Location Lookup API
Axios

City Page

A page allowing the user to search for a specific city to get astro data from.

Tasks:

• Add autocomplete text field to search for cities
• Change the sub-header to display "What city should I look for astro data in?"

Create Default Layout Template

Create the initial layout template for all pages to use.

Tasks:

• Create main header component at the top displaying "Intel Astro"
• Create sub-header component under main header displaying "Easily get up to date astronomical weather data"
• Create main content area to display each page's content

TypeScript Type Files

TypeScript type files for all the different dependencies and custom types needed for the web app.

Types:

• ApiCity

export interface ApiCity {
  name: string; // Full name (City, State/Country)
  type: string; // City
  c: string; // Country
  zmw: string; // ???
  tz: string; // Timezone
  tzs: string; // Timezone string
  l: string; // ???
  ll: string; // Latitude and Longitude
  lat: string; // Latitude
  lon: string; // Longitude
}

• City

export interface City {
  fullName: string;
  city: string;
  state: string;
  lat: number;
  long: number;
}

• SunCalc

// Type definitions for suncalc 1.8
// Project: https://github.com/mourner/suncalc
// Definitions by: horiuchi <https://github.com/horiuchi>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

interface SunlightTimes {
  sunrise: Date;
  sunriseEnd: Date;
  goldenHourEnd: Date;
  solarNoon: Date;
  goldenHour: Date;
  sunsetStart: Date;
  sunset: Date;
  dusk: Date;
  nauticalDusk: Date;
  night: Date;
  nadir: Date;
  nightEnd: Date;
  nauticalDawn: Date;
  dawn: Date;
}

interface SunPosition {
  altitude: number;
  azimuth: number;
}

interface MoonPosition {
  altitude: number;
  azimuth: number;
  distance: number;
  parallacticAngle: number;
}

interface MoonIllumination {
  fraction: number;
  phase: number;
  angle: number;
}

interface MoonTimes {
  rise: Date;
  set: Date;
  alwaysUp: boolean;
  alwaysDown: boolean;
}

declare module "suncalc" {
  function getTimes(date: Date, latitude: number, longitude: number): SunlightTimes;
  function getPosition(timeAndDate: Date, latitude: number, longitude: number): SunPosition;
  function getMoonPosition(timeAndDate: Date, latitude: number, longitude: number): MoonPosition;
  function getMoonIllumination(timeAndDate: Date): MoonIllumination;
  function getMoonTimes(date: Date, latitude: number, longitude: number, inUTC?: boolean): MoonTimes;
}

SASS Variables File

A centralized SASS variables file containing common classes for the entire web app.

Contains:

• Primary color: rgb(19, 90, 229);
• Secondary color: rgb(184, 193, 106);
• Light grey: rgb(204, 204, 204);
• Dark grey: rgb(153, 153, 153);
• Primary translucent: rgba(19, 90, 229, 0.75);
• Secondary translucent: rgb(184, 193, 106, 0.75);
• Faded black: rgba(0, 0, 0, 0.45);
• Faded black 2: rgba(0, 0, 0, 0.3);
• Main gradient: linear-gradient(128.6deg, $secondary 0%, $primary 100%);
• Default border radius: 5px
• Elevation mixin:

@mixin elevation($depth) {
    @if ($depth == 1) {
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
    } @else if ($depth == 2) {
      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
    } @else if ($depth == 3) {
      box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)
    } @else if ($depth == 4) {
      box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
    } @else if ($depth == 5) {
      box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)
    }
  }

Describe the bug

The state on the /astro-data page is not getting abbreviated if it’s a U.S. state.

Steps To Reproduce

1. Go through the steps to get to the /astro-data page
2. Observed the location just under the header

Expected behavior
If the location is within a U.S. state, the state should be abbreviated.

Is your feature request related to a problem? Please describe.

At work I can’t use my phone everywhere but need to the get the results of the Astro data page onto a computer. The website is not whitelisted so I have to take screen shots to get it to a computer.

Describe the solution you'd like

A simple share button on the Astro data page to share the results in a table format.

Describe alternatives you've considered

Taking screen shots and emailing them separately.

Change the GeoLocation method

It should use the native browser Geo Location services.

The user should be able to get their current location using the devices GPS instead of based on their IP address and IPInfo.io

When the user selects current location as the location, it should display the city name, it should just say current location in the subheader.

Add advanced animations

Add advanced animations and transitions for each page. It should feel like a native app.

Pages:

• Initial welcome page
• Welcome -> city page
• City search results
• City -> dates page
• Selection of start date
• Selection of end date
• Initial astro data page (cards should stagger up)

Add current PWA version

Add the current version of the PWA to the footer so it is displayed on each page.

Welcome Page

The user's first view of the web app. Tells them what Intel Astro is all about.

Tasks:

• Add button displaying "GET STARTED"

Setup Vuex Configuration

Vuex configuration for the entire web app.

State:

• location

Contains the currently selected city name, state/country, latitude, and longitude

• startDate

Contains the user selected start date as a moment.Moment Object

• endDate

Contains the user selected end date as a moment.Moment Object

Mutations:

• UPDATE_LOCATION

Updates the location state

• UPDATE_DATE

Updates either the start date or the end date depending on the parameters it's passed

Actions:

• updateLocation

Given an ApiCity Object, run the mutation UPDATE_LOCATION

• updateDate

Given a moment.Moment Object, run the mutation UPDATE_DATE with either the start or end date.

Astro Data Page

The page that displays the astro data to the user based on their previous selections.

Tasks:

• Display each day within a separate card
• Change sub-header to display:
• User can click/tap on city or either date to change their respective values

City: [Selected City]
Dates: [Selected Start Date] - [Selected End Date]

Describe the bug

When downloading the web app as a PWA, the initial title of the app is intel-astro.

Steps To Reproduce

1. Select Add to Home Screen
2. Observe the incorrect title

Expected behavior
The default title should be Intel Astro

Base Button Component

Create a base button component used throughout the entire web app.

Attributes:

• Text/Value
• .button class styles

Dates Page

A page that displays a calendar and allows the user to pick a date range in which the astro data should be gathered.

Tasks:

• Add calendar with the current month as the starting point
• Change sub-header to display:

City: [Selected City]

What is the date I should start looking for astro data?

Google's Roboto Font Face

Add the Roboto font face to the entire web app.

Tasks:

• Download font face from Google Fonts
• Convert font to @font Face from font-face-generator
• Add to global SASS file

@font-face {
    font-family: 'Sri-TSCRegular';
    src: url('sri-tsc-webfont.eot');
    src: url('sri-tsc-webfont.eot?#iefix') format('embedded-opentype'),
         url('sri-tsc-webfont.woff') format('woff'),
         url('sri-tsc-webfont.ttf') format('truetype'),
         url('sri-tsc-webfont.svg#Sri-TSCRegular') format('svg');
    font-weight: normal;
    font-style: normal;
   }

Describe the bug
When on the /city the text field no longer searches for worldwide cities. It only let’s you use your current location. You can still type into the text field but it doesn’t show any results/suggestions.

Steps To Reproduce

1. Go to the /city page
2. Start typing a city name

Expected behavior
The text field should show suggestions based on the user’s entered search query.

Smartphone (please complete the following information):

• OS: iOS
• Browser Safari

Design The Desktop Layout

Design the layout when a user visits the app on a non-mobile device

Pages:

• Welcome page
• City page
• Dates page
• Astro Data page

These pages should be fit into a centered column, similar to Twitter.com

Sub-Header Component

Create sub-header component to be placed into the default layout template

Tasks:

• Add span element with "Easily get up to date astronomical weather data"
• Add styling
  • Text align: center
  • Font size: 20
  • Text color: rgba(0,0,0,.45);

Describe the bug

When a user has the PWA downloaded to their devices, it will not update when a newer version is deployed to the server. It automatically fetches the content from the cache.

Steps To Reproduce

1. Download the PWA to your home screen/desktop
2. Wait for an update

Expected behavior
The PWA should either automatically update or prompt the user that a new version is available and give them the option to load the newer version.

Resources:

• Tutorial
• Discussion
• Stack Overflow

Is your feature request related to a problem? Please describe.

When visiting the city page, I have to click/tap on the search field

Describe the solution you'd like

When visiting the city page, the search field should autofocus to allow easier searching.

Describe alternatives you've considered

Clicking on the search field manually

Base Card Component

A basic card component to display astro data.

Tasks:

• Create SVG files for each icon
  • Sunrise
  • Sunset
  • Moonrise
  • Moonset
  • BMNT
  • EENT
  • Moon Illumination

Create App Icons for PWA

Create an icon for Intel Astro for each device so the user can download with an app icon.

Register All Vue Router Routes

Register all pages in the Vue Router config file /src/router/

Routes:

• Welcome page
• City page
• Dates page
• Astro data page

Global SASS Styles File

Create a global SASS file with classes used throughout the entire web app.

Contains:

• text-faded: color: $faded
• full-width: width: 100%;
• text-field:

.text-field {
  font-size: 16px
  margin: 0px
  padding: 10px
  outline: 0px
  box-sizing: border-box
  border-radius: 0px
  background: $translucent-white
  color: rgb(0, 0, 0)
  border: none
  width: 100%
}

&::placeholder {
  color: $faded
}

• Button

.button {
  border-radius: 20px
  padding: 10px
  border: none
  box-sizing: border-box
  text-transform: uppercase
  cursor: pointer
  background: $primary
  color: rgb(255, 255, 255)
  width: 100%
}