MVP
This commit is contained in:
parent
22b1b3e150
commit
c11a135c8d
1
.gitignore
vendored
1
.gitignore
vendored
@ -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
63
forge.config.js
Normal 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
10
index.html
@ -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
33
index.js
@ -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
10789
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
48
package.json
48
package.json
@ -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
128
src/App.jsx
Normal 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
3
src/index.css
Normal file
@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
11
src/index.html
Normal file
11
src/index.html
Normal 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
7
src/index.jsx
Normal 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
53
src/main.js
Normal 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
2
src/preload.js
Normal 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
31
src/renderer.js
Normal 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
9
tailwind.config.js
Normal 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
11
webpack.main.config.js
Normal 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
24
webpack.renderer.config.js
Normal 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
54
webpack.rules.js
Normal 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
|
||||
* }
|
||||
* }]
|
||||
* }
|
||||
*/
|
||||
];
|
Loading…
Reference in New Issue
Block a user