Coder Social home page Coder Social logo

jfoclpf / autocosts Goto Github PK

View Code? Open in Web Editor NEW
36.0 2.0 7.0 106.55 MB

The monorepo for the fully free and open source full-stack Car Costs Calculator for more than 30 countries

Home Page: https://autocosts.info

License: GNU General Public License v3.0

CSS 7.05% JavaScript 75.85% Handlebars 17.11%
calculator calculator-application automobile automobile-costs android-application website fuel-efficiency uber car-costs car

autocosts's Introduction

Node.js CI Node.js CI Node.js CI Node.js CI CodeQL Security Check js-standard-style
Donate with librepay Donate with librepay

autocosts

The fully free and open source full-stack Car Costs Calculator for more than 30 countries

This calculator gives users a good estimate of what they really need to spend on car ownership. As car payments and expenses come due throughout the year, it's often difficult to really get a good understanding of total spending on a car.

This calculator also provides to the user, optionally, the car's full Financial Effort considering the user's income, further providing also optionally the equivalent public transport costs (bus, train, UBER, etc.), considering the user doesn't own a car.

screenshot

Run it on your machine

  1. Clone the project
    git clone https://github.com/jfoclpf/autocosts.git
  2. Enter in the newly created directory and install dependencies
    cd autocosts && npm i --production
  3. Start the server
    npm start

it will open a http local server which you can access through http://localhost:3028

Website

https://autocosts.info

Playground

https://autocosts.info/XX

The list of available countries

https://autocosts.info/list

The translations are in corresponding json files, namely in the folder src/countries/.
The list of available countries is from the file src/countries/list.json

World statistics of Car Costs

https://autocosts.info/worldstats

How does it work?

Autocosts uses nodejs, expressjs and handlebarsjs to supply a server application that renders a car costs calculator as a webpage loaded by any common browser.

The project is optimized for a web-based version, and for an APP developped in Apache Cordova. The 2 last letters on the URI stands for the 2-letter ISO country code, and not for the language, since for example United Kingdom and Australia have the same language but different realities concerning the taxes, the terms applied to automobile costs and the units for fuel efficiency. The translations/language files apply therefore only to the selected country.

The project already considers all the units and fuel efficiency cases, different in many countries. The variations for fuel efficiency are L/100km, km/L, mpg(US), mpg(imp) and for distance are km, miles and mil (Nordic mile=10km). More information can be found in the directory src/countries/.

For more information regarding how the costs are calculated, you can check the src/client/core/ which is based on the 12 items that form the car costs for any given country. Namely they are:

  • Standing costs
    • Depreciation
    • Car taxes
    • Insurance
    • Inspection
    • Car finance
  • Running costs
    • Fuel
    • Maintenance
    • Repairs and Improvements
    • Parking
    • Tolls
    • Fines
    • Car washes

For more information see contributing.md

Aditional services

Autocosts supports the following additional services, which can be enabled or disabled (default). After building with node build.js, run node bin/server.js -h for more information.

Database

Autocosts also supports code such that the user inputs might be stored into a mysql database. With the data from said database, it is also possible to make several statisitcal analysis, namely the average costs for each country, said statistical analysis having outlier removal techniques, such that such outliers do not distort the average.

Uber

Autocosts may use the UBER API, such that at the final repport, the user calculations can be compared with the equivalents costs if the user would use just UBER or combined with public transports.

PDF

Autocosts also allows the final report to be printed into a PDF report. It makes use of pdfmake npm package.

Credentials file

The credentials for the above services are in the JSON files stored in credentials/

API

The API works normally as any other npm API without the need to install any extra software.

Just install the API

npm i autocosts

Now use the autocosts API

const autocosts = require('autocosts')

// see https://github.com/jfoclpf/autocosts/blob/master/contributing.md#standards
// for standard units and time periods

var userData = {
  countryCode: 'US',
  currency: 'USD',
  depreciation: {
    dateOfAcquisition: {
      month: 5,
      year: 2001,
      valueOfTheVehicle: 25000
    },
    dateOfUserInput: {
      month: 2,
      year: 2020,
      valueOfTheVehicle: 5000
    }
  },
  insurance: {
    amountPerPeriod: 200,
    period: 'month'
  },
  credit: {
    creditBool: true,
    yesCredit: {
      borrowedAmount: 15000,
      numberInstallments: 48,
      amountInstallment: 350,
      residualValue: 0
    }
  },
  inspection: {
    averageInspectionCost: 120,
    numberOfInspections: 15
  },
  roadTaxes: {
    amountPerYear: 120
  },
  // Form Part 2
  fuel: {
    typeOfCalculation: 'distance', // type string: "money" or "distance"
    currencyBased: {
      amountPerPeriod: null,
      period: null // type string: "month", "twoMonths",  "trimester", "semester", "year"
    },
    distanceBased: {
      considerCarToJob: true, // boolean
      carToJob: {
        daysPerWeek: 5,
        distanceBetweenHomeAndJob: 15,
        distanceDuringWeekends: 30,
        distanceStandardUnit: 'mi' // standard distance for current country: "km", "mil" or "mil(10km)"
      },
      noCarToJob: {
        distancePerPeriod: null,
        period: null, // type string: "month", "twoMonths",  "trimester", "semester", "year"
        distanceStandardUnit: null // type string: "km", "mil" or "mil(10km)"
      },
      fuelEfficiency: 25, // fuel efficiency of the vehicle
      fuelEfficiencyStandard: 'mpg(US)', // type string; "L/100km", "mpg(US)", etc.
      fuelPrice: 2.5, // type number; currency per unit of volume standard. Ex: 1.4, that is 1.4 EUR / L
      fuelPriceVolumeStandard: 'gal(US)' // type string: 'L', 'gal(imp)', 'gal(US)'
    }
  },
  maintenance: {
    amountPerYear: 700
  },
  repairsImprovements: {
    amountPerYear: 200
  },
  parking: {
    amountPerMonth: 14
  },
  tolls: {
    calculationBasedOnDay: true, // true or false
    yesBasedOnDay: {
      amountPerDay: 2.5,
      daysPerMonth: 22
    },
    noBasedOnDay: {
      amountPerPeriod: null,
      period: null // type string: "month", "twoMonths",  "trimester", "semester", "year"
    }
  },
  fines: {
    amountPerPeriod: 40,
    period: 'year' // type string: "month", "twoMonths",  "trimester", "semester", "year"
  },
  washing: {
    amountPerPeriod: 110,
    period: 'year' // type string: "month", "twoMonths",  "trimester", "semester", "year"
  }
}

var results = autocosts.calculate(userData)
console.log(results)

The object results will be the following:

{
  "countryCode": "US",
  "currency": "USD",
  "costs": {
    "totalPerYear": 6595.880952380952,
    "totalEver": 123672.76785714286,
    "perMonth": {
      "items": {
        "depreciation": 88.88888888888889,
        "insurance": 200,
        "credit": 8,
        "inspection": 8,
        "roadTaxes": 10,
        "fuel": 78.26785714285715,
        "maintenance": 58.333333333333336,
        "repairsImprovements": 16.666666666666668,
        "parking": 14,
        "tolls": 55,
        "fines": 3.3333333333333335,
        "washing": 9.166666666666666
      },
      "standingCosts": 344.0555555555556,
      "runningCosts": 205.60119047619048,
      "total": 549.656746031746
    },
    "perUnitDistance": {}
  },
  "standardUnits": {
    "speed": "mi/h",
    "distance": "mi",
    "fuelEfficiency": "mpg(US)",
    "fuelPriceVolume": "gal(US)"
  }
}

The financial effort of the user and alternative costs considering public transports, uber and taxis included, are also optionally calculated. See the standard userData object for more information.

Development

Extra SW requirements

To development and fully build the app one further needs:

  • ImageMagick (to compress images) and
  • Webdriver Manager npm package to emulate Chrome and Firefox in the test suite

On Ubuntu/Debian one can run to install and configure them:

sudo apt install imagemagick -y
sudo npm i -g webdriver-manager
sudo webdriver-manager update --out_dir /usr/local/bin
sudo rm /usr/local/bin/*.zip /usr/local/bin/*.tar.gz
sudo mv /usr/local/bin/chromedriver* /usr/local/bin/chromedriver
sudo mv /usr/local/bin/geckodriver* /usr/local/bin/geckodriver

Build

To custom build the app resources into the bin/ directory, use the build.js node script at the root of the project. For more information run node build.js --help. You have already standard configurations accessible in package.json which you can list by executing npm run.

Running

After having built the app, to custom run it use the bin/server.js node script. For more information run node bin/server.js --help. See also standard server configurations by executing npm run.

Android APP

The Android APP can be found in Play Store. It uses Apache Cordova to convert JavaScript built code into APP built files (for example APK files in Android)

About

Contributing, data structure, flowcharts and coding rules

See contributing and the wiki pages

License

GNU GPLv3

Privacy

This calculator is and shall always be completely anonymous, as it doesn't request nor permanently store, any name, email, cookies, IP address nor any other personal information.

autocosts's People

Contributors

airnomad avatar andriybardakov avatar dependabot[bot] avatar jfoclpf avatar mcristaldo avatar pergon avatar piva1839 avatar sergio102472 avatar snyk-bot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

autocosts's Issues

Transitions in the form amongst sections

  1. The "Next" button shouldn't be seen until the user complete the field/s needed
    Not completed field
    https://www.dropbox.com/s/yi8dwh6dakp48dn/Captura%20de%20pantalla%202018-06-12%2015.08.59.png?dl=0
    Field completed ("Next" button appears)
    https://www.dropbox.com/s/4ozpkybm5a0ugzc/Captura%20de%20pantalla%202018-06-12%2015.08.43.png?dl=0--

  2. Once the field/s are completed, the user would be able to go to the next question by clicking on "Next" or pressing Enter/Tab
    https://www.dropbox.com/s/l7ja2c1r09pjgap/Captura%20de%20pantalla%202018-06-12%2015.10.04.png?dl=0

  3. Once the user click on "Next" or pres Enter/Tab and go to next question, the question should scroll up and and fade, so the next question should come from the bottom to be the main focus on the screen.
    https://www.dropbox.com/s/8gf6077ym62rkkk/Captura%20de%20pantalla%202018-06-12%2015.10.47.png?dl=0

  4. The steps need to be synchronized with the form. These are the 3 possible states:
    Active: https://www.dropbox.com/s/8nvr1vygsqg5887/Captura%20de%20pantalla%202018-06-12%2015.13.31.png?dl=0
    Completed: https://www.dropbox.com/s/poouj15ypuz7l6x/Captura%20de%20pantalla%202018-06-12%2015.15.14.png?dl=0
    Next steps: https://www.dropbox.com/s/8sfwmxbfvf3ztmt/Captura%20de%20pantalla%202018-06-12%2015.15.45.png?dl=0

  5. Once the user complete step 1 and 2, the "Calculate Cost" button should appear.
    https://www.dropbox.com/s/ay0o8utl1y8jmvv/Captura%20de%20pantalla%202018-06-12%2015.22.30.png?dl=0

  6. When the site loads the first thing seen are the modals opened, it loads first. The home page should loads first

  7. When a modal opens it has a weird effect that doesn't look good. It should work as this.
    https://www.dropbox.com/s/ot2cbz3m4wdpo2e/modal_animation.gif?dl=0

Home text translation

When you select a country on the home page, the titile "Automobile costs calculator" change depending on the language, but the text below it remains in english always.
I know it would need a lot of new strings for every language, so in that case I think the title should be in english always so we're consistent, otherwise it looks a bit weird seeing the title in the language/country selected but the text below will be in english always.
What do you t
captura de pantalla 2018-07-25 17 48 31
captura de pantalla 2018-07-25 17 48 21

hink?

Next button animation

The animation/effect when the Next button appears is a bit weird. Is it possible to remove it? so the button appears just instantly with no effect?

Thanks.

#2 and #3 circles active mode

Once the user reaches to step 2 or 3 the big circle with the number should in active mode as the #1 circle
The class is already created, the big circles (#2, #3) need the "active" class once the user get there only

Add url /domains with PHP script

Write a small script in PHP for /domains,
adapting .htaccess accordingly,
that lists all diferent domains, with different countries
so that you can focus on importanto domains to pay for (renew, and SSL certificates)

Example of table


autocustos.info | pt br |

etc.

Check on web version the slider issue into DB

the slider issue into DB
this line it's already in the webversion in js/dbFunctions.js, and slider information shall go into DB also

objectToDb.form_part3_slide1 = $('#slider1').prop('checked');

Show number of submitted forms

In the right bottom corner of the website (visitor statistics), it shall also show the number of unique users who correctly submitted the form!

Year error message

On the first field MM/YYYY, the error message displayed is "Enter a value between 1910 and 3000", shouldn't it be between "1910 and current year"?
captura de pantalla 2018-07-25 17 58 16

User input verification on particular number field

@mcristaldo said

Also, I think we can prevent some errors by letting the user enter only what's needed. For example in the first question Car acquisition date I'm able to enter whatever I want, but then after completing the next 2 questions the button Next doesn't appear. I think we should let the user know what the error is OR even better imo just let them put valid year.

autocosts_fields

Organize "business logic", the core function!

The core function in "business logic" shall be organized to simply become a "black box"!

This method, is according with the circles/structures/hierarchy organization of code and functions!

Later on this will be very useful to obtain data from the main DB for automatic statistical analysis!

Allow user to define standard units

Regarding Fuel efficiency, Standard distance and Fuel volume the use may not change the standard units. This standard units should be able to be changed according to user preference, using a dropdown menu. The default unit shall be the unit already on file for each country.
https://autocosts.info/list

image

PHP issue

Find all php that only starts with <? and replace by <?php

Text issues

There are some phrases starting with lowercase. like this one "if new, the price you paid...."
image

I'm not able to fix it using CSS only, would you tell me where can I fix those?

Step 1 | Vehicle Inspection

If the field value for "How many times have you taken your car for vehicle inspection?" is 0 the "Average cost per each vehicle inspection" should remain disabled, BUT if it's 1 or more the user should be able to enter the average cost per each vehicle inspection, it means the field shouldn't be disabled anymore. For some reason it's not working. Would you review it please?

Error messages

I know it might be too much effort but just asking. Is it possible to have more accurate error messages?
On this one for example:
captura de pantalla 2018-07-25 18 03 10
On this one it wouldn't makes sense if the user enter 0. So I'm wondering if the message could be something like: "Please enter the most accurate value as possible for better results"

Thoughts?

add https and hsts to autocosts.info

Https is already added to autocosts.info

1- first of all, make sure chrome declares it as a safe site

2- delete all cookies
https://stackoverflow.com/questions/179355/clearing-all-cookies-with-javascript
_ga etc. from Google Analytics

2 - then, make that transition into Google
https://support.google.com/webmasters/answer/6073543?hl=en
https://webmasters.stackexchange.com/questions/68435/moving-from-http-to-https-google-search-console
namely add header of Strict-Transport-Security so that http redirects to https

Bug on fuel section

On fuel section -> miles -> no ; in the last user input field

image

I think it has to do with padding-left

Add chart for alternative transports

Add google chart for topic
EQUIVALENT TRANSPORT COSTS, CONSIDERING YOU DON'T OWN A CAR

add charts, whose bars have all the same height, that compare costs between public transports and automobile costs

Transition between tabs

When changing from one tab to other the animation on the fields below the tabs is too distracting, I don't think we need it.
Would it be possible to remove it?
tabs-effect

Thank you.

Statistical analysis

Create a new page with statistical analysis for different countries, with currency converted accordingly.

Vertical bars chart

It shall show a vertical bar chart, each vertical bar representing a country. Each vertical bar shall be vertically divided by different partial costs. For the charts http://www.chartjs.org/ shall be used.

Asynchronous script for populating overall costs

This shall be done using an asynchronous script that will populate a specific DB (such as the current costs tables for each country).

Asynchronous script for currency conversion and Currency DB

It shall be created a new Currency DB with weekly values since 01-01-2014
image

Considering there is a limited number of free queries for currency conversion, it shall be built a DB with daily currency currency conversion to EUR, since the first day of submission into the costs DB. After building this DB, the script shall be run once every month to update this DB. The free plan allows 1000 requests per month. There are 45 different currencies.

To optimise the process and considering that currencies do not vary sharply amongst themselves within the time, one sample every week is sufficient. Therefore to cover an entire year 52*45=2340 requests will be needed. The weekly samples shall start in 01-01-2014. In that DB linear interpolations may be used to fill in the blanks.

Step 2 | Fuel

The fields change base on options selected ($ / Kms and Yes / No)
Are all the options showing the correct fields. You know the form much better than me of course, would you double check if everything is accurate?

Develop an APP

You'll use PhoneGap to convert the javascript, HTML, CSS to a smartphone APP
all the app files will be stored in folder /app

you can use the alredy created project in PhoneGap
https://build.phonegap.com/apps/359804/builds

  1. In PHP a folder for language files is created.
  2. Each language will have only one html file, which is the merge of the three html files of layouts. A for loop in php is done where the files are created
  3. In i.php on the zone of the layout, html divs are added
    <div class="form_part" id="form_part1">
    <div class="form_part" id="form_part2">
    <div class="form_part" id="form_part3">
  4. When user changes language, the jQuery method is used to load the languages accordingly
    http://api.jquery.com/load/
    $( "#form_part1" ).load( "/lang/PT.html" )

Step 3 | Income

On the "What's your net income?" currently the user has the option to choose per: year, month, week and hour, and then base on the selection the user gets different fields. I was wondering if it would be possible to make it simpler, like this:

image

Download PDF report button

We'd like to have at the end a button (like "Rerun" or "Print") with the option to download the print-out report in PDF. I suppose we might use the already existent function which prints the report, but now we shall print to PDF. We'd like to have the PDF API in our site and less dependant from external sites.

This one shall be good:
http://parall.ax/products/jspdf#

Step 1 | Car acquisition date

Old input:
image

New input:
image

Since in the new design we do have a field to enter a completed date (DD/MM/AAAA) I changed the input type to "date" instead of having 2 fields for Month and Year. So because of that I also changed the id and name to make these more accurate.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.