voidf1sh/gas-calc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MVP

Browse Source
This commit is contained in:
Skylar Grant 2024-08-10 16:40:36 -04:00
parent 22b1b3e150
commit c11a135c8d
17 changed files with 11168 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -7,6 +7,7 @@ yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
.webpack
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

63
forge.config.js Normal file
View File

@ -0,0 +1,63 @@
const { FusesPlugin } = require('@electron-forge/plugin-fuses');
const { FuseV1Options, FuseVersion } = require('@electron/fuses');
module.exports = {
packagerConfig: {
asar: true,
},
rebuildConfig: {},
makers: [
{
name: '@electron-forge/maker-squirrel',
config: {},
},
{
name: '@electron-forge/maker-zip',
platforms: ['darwin'],
},
{
name: '@electron-forge/maker-deb',
config: {},
},
{
name: '@electron-forge/maker-rpm',
config: {},
},
],
plugins: [
{
name: '@electron-forge/plugin-auto-unpack-natives',
config: {},
},
{
name: '@electron-forge/plugin-webpack',
config: {
mainConfig: './webpack.main.config.js',
renderer: {
config: './webpack.renderer.config.js',
entryPoints: [
{
html: './src/index.html',
js: './src/renderer.js',
name: 'main_window',
preload: {
js: './src/preload.js',
},
},
],
},
},
},
// Fuses are used to enable/disable various Electron functionality
// at package time, before code signing the application
new FusesPlugin({
version: FuseVersion.V1,
[FuseV1Options.RunAsNode]: false,
[FuseV1Options.EnableCookieEncryption]: true,
[FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
[FuseV1Options.EnableNodeCliInspectArguments]: false,
[FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
[FuseV1Options.OnlyLoadAppFromAsar]: true,
}),
],
};

10
index.html
View File

@ -1,10 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>My First Electron App</title>
</head>
<body>
<h1>Hello from Electron!</h1>
<p>Welcome to your first Electron app.</p>
</body>
</html>

33
index.js
View File

@ -1,33 +0,0 @@
const { app, BrowserWindow } = require('electron');
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
}
});
mainWindow.loadFile('index.html');
mainWindow.on('closed', function () {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', function () {
if (mainWindow === null) {
createWindow();
}
});

10789
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

48
package.json
View File

@ -1,16 +1,48 @@
{
"name": "gas-calc",
"name": "tempelectron",
"productName": "tempelectron",
"version": "1.0.0",
"description": "Simple Electron project to calculate gas costs, inspired by a spreadsheet I made ages ago.",
"main": "index.js",
"description": "My Electron application description",
"main": ".webpack/main",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "echo \"No linting configured\""
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-react": "^7.24.7",
"@electron-forge/cli": "^7.4.0",
"@electron-forge/maker-deb": "^7.4.0",
"@electron-forge/maker-rpm": "^7.4.0",
"@electron-forge/maker-squirrel": "^7.4.0",
"@electron-forge/maker-zip": "^7.4.0",
"@electron-forge/plugin-auto-unpack-natives": "^7.4.0",
"@electron-forge/plugin-fuses": "^7.4.0",
"@electron-forge/plugin-webpack": "^7.4.0",
"@electron/fuses": "^1.8.0",
"@vercel/webpack-asset-relocator-loader": "^1.7.3",
"autoprefixer": "^10.4.20",
"babel-loader": "^9.1.3",
"css-loader": "^6.11.0",
"electron": "31.3.1",
"node-loader": "^2.0.0",
"postcss": "^8.4.41",
"postcss-loader": "^8.1.1",
"style-loader": "^3.3.4",
"tailwindcss": "^3.4.9"
},
"keywords": [],
"author": "",
"author": {
"name": "Skylar Grant",
"email": "sky@vfsh.dev"
},
"license": "MIT",
"devDependencies": {
"electron": "^31.3.1"
"dependencies": {
"electron-squirrel-startup": "^1.0.1",
"react": "^18.3.1",
"react-dom": "^18.3.1"
}
}

128
src/App.jsx Normal file
View File

@ -0,0 +1,128 @@
import React, { useState } from "react";
export default function App() {
// State for inputs
const [milesTraveled, setMilesTraveled] = useState(0);
const [mpg, setMpg] = useState(0);
const [pricePerGallon, setPricePerGallon] = useState(0);
const [daysPerWeek, setDaysPerWeek] = useState(0);
const [isRoundTrip, setIsRoundTrip] = useState(false);
// State for results
const [singleTripCost, setSingleTripCost] = useState(0);
const [weeklyCost, setWeeklyCost] = useState(0);
const [monthlyCost, setMonthlyCost] = useState(0);
const [yearlyCost, setYearlyCost] = useState(0);
const calculateCosts = () => {
const milesPerDay = isRoundTrip ? milesTraveled * 2 : milesTraveled;
const costPerMile = pricePerGallon / mpg;
const tripCost = milesPerDay * costPerMile;
setSingleTripCost(tripCost.toFixed(2));
setWeeklyCost((tripCost * daysPerWeek).toFixed(2));
setMonthlyCost((tripCost * daysPerWeek * (52/12)).toFixed(2));
setYearlyCost((tripCost * daysPerWeek * 52).toFixed(2));
};
return (
<div className="max-w-2xl mx-auto p-6 bg-white shadow-lg rounded-lg mt-10">
<div className="space-y-4">
<div>
<label htmlFor="milesTraveled" className="block text-sm font-medium text-gray-700">
Number of Miles Traveled
</label>
<input
type="number"
id="milesTraveled"
value={milesTraveled}
onChange={(e) => setMilesTraveled(e.target.value)}
className="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
/>
</div>
<div>
<label htmlFor="mpg" className="block text-sm font-medium text-gray-700">
Miles per Gallon
</label>
<input
type="number"
id="mpg"
value={mpg}
onChange={(e) => setMpg(e.target.value)}
className="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
/>
</div>
<div>
<label htmlFor="pricePerGallon" className="block text-sm font-medium text-gray-700">
Price per Gallon of Gas
</label>
<input
type="number"
step="0.01"
id="pricePerGallon"
value={pricePerGallon}
onChange={(e) => setPricePerGallon(e.target.value)}
className="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
/>
</div>
<div>
<label htmlFor="daysPerWeek" className="block text-sm font-medium text-gray-700">
Number of Days per Week Traveled
</label>
<input
type="number"
id="daysPerWeek"
value={daysPerWeek}
onChange={(e) => setDaysPerWeek(e.target.value)}
className="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
/>
</div>
<div className="flex items-center">
<input
type="checkbox"
id="roundTrip"
checked={isRoundTrip}
onChange={(e) => setIsRoundTrip(e.target.checked)}
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
/>
<label htmlFor="roundTrip" className="ml-2 block text-sm font-medium text-gray-700">
Double numbers for round-trips
</label>
</div>
</div>
<div className="mt-8 space-y-4">
<div className="flex justify-between">
<span className="text-sm font-medium text-gray-700">Single Trip Cost:</span>
<span id="singleTripCost" className="text-sm text-gray-900">${singleTripCost}</span>
</div>
<div className="flex justify-between">
<span className="text-sm font-medium text-gray-700">Weekly Cost:</span>
<span id="weeklyCost" className="text-sm text-gray-900">${weeklyCost}</span>
</div>
<div className="flex justify-between">
<span className="text-sm font-medium text-gray-700">Monthly Cost:</span>
<span id="monthlyCost" className="text-sm text-gray-900">${monthlyCost}</span>
</div>
<div className="flex justify-between">
<span className="text-sm font-medium text-gray-700">Yearly Cost:</span>
<span id="yearlyCost" className="text-sm text-gray-900">${yearlyCost}</span>
</div>
</div>
<div className="mt-8">
<button
id="calculateButton"
onClick={calculateCosts}
className="w-full bg-blue-600 text-white py-2 rounded-md shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
>
Calculate
</button>
</div>
</div>
);
}

3
src/index.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

11
src/index.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Gas Cost Calculator</title>
</head>
<body>
<h1>Loading app...</h1>
</body>
</html>

7
src/index.jsx Normal file
View File

@ -0,0 +1,7 @@
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';
const root = createRoot(document.body);
root.render(<App />);

53
src/main.js Normal file
View File

@ -0,0 +1,53 @@
const { app, BrowserWindow } = require('electron');
const path = require('node:path');
// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) {
app.quit();
}
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
},
autoHideMenuBar: true,
title: "Gas Cost Calculator",
});
// and load the index.html of the app.
mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
// Open the DevTools.
// mainWindow.webContents.openDevTools();
};
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow();
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.

2
src/preload.js Normal file
View File

@ -0,0 +1,2 @@
// See the Electron documentation for details on how to use preload scripts:
// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts

31
src/renderer.js Normal file
View File

@ -0,0 +1,31 @@
/**
* This file will automatically be loaded by webpack and run in the "renderer" context.
* To learn more about the differences between the "main" and the "renderer" context in
* Electron, visit:
*
* https://electronjs.org/docs/tutorial/application-architecture#main-and-renderer-processes
*
* By default, Node.js integration in this file is disabled. When enabling Node.js integration
* in a renderer process, please be aware of potential security implications. You can read
* more about security risks here:
*
* https://electronjs.org/docs/tutorial/security
*
* To enable Node.js integration in this file, open up `main.js` and enable the `nodeIntegration`
* flag:
*
* ```
* // Create the browser window.
* mainWindow = new BrowserWindow({
* width: 800,
* height: 600,
* webPreferences: {
* nodeIntegration: true
* }
* });
* ```
*/
import './index.jsx';
console.log('👋 This message is being logged by "renderer.js", included via webpack');

9
tailwind.config.js Normal file
View File

@ -0,0 +1,9 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js,jsx}"],
theme: {
extend: {},
},
plugins: [],
}

11
webpack.main.config.js Normal file
View File

@ -0,0 +1,11 @@
module.exports = {
/**
* This is the main entry point for your application, it's the first file
* that runs in the main process.
*/
entry: './src/main.js',
// Put your normal webpack config below here
module: {
rules: require('./webpack.rules'),
},
};

24
webpack.renderer.config.js Normal file
View File

@ -0,0 +1,24 @@
const rules = require('./webpack.rules');
rules.push({
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
},
},
],
});
module.exports = {
// Put your normal webpack config below here
module: {
rules,
},
};

54
webpack.rules.js Normal file
View File

@ -0,0 +1,54 @@
const path = require("path");
module.exports = [
// Add support for native node modules
{
// We're specifying native_modules in the test because the asset relocator loader generates a
// "fake" .node file which is really a cjs file.
test: /native_modules[/\\].+\.node$/,
use: 'node-loader',
},
{
test: /[/\\]node_modules[/\\].+\.(m?js|node)$/,
parser: { amd: false },
use: {
loader: '@vercel/webpack-asset-relocator-loader',
options: {
outputAssetBase: 'native_modules',
},
},
},
{
// Loads js/jsx files with babel for transpilation
test: /\.jsx?$/,
use: {
loader: "babel-loader",
options: {
exclude: /node_modules/,
presets: ["@babel/preset-react"],
},
},
},
{
// Loads .css files
test: /\.css$/,
include: [path.resolve(__dirname, "app/src")],
use: ["style-loader", "css-loader", "postcss-loader"],
},
// Put your webpack loader rules in this array. This is where you would put
// your ts-loader configuration for instance:
/**
* Typescript Example:
*
* {
* test: /\.tsx?$/,
* exclude: /(node_modules|.webpack)/,
* loaders: [{
* loader: 'ts-loader',
* options: {
* transpileOnly: true
* }
* }]
* }
*/
];