diff --git a/package.json b/package.json index b5cbec4..fdb5d70 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "scripts": { "build": "wp-scripts build --webpack-src-dir=src/scale-section --output-path=build/scale-section && wp-scripts build --webpack-src-dir=src/weather --output-path=build/weather", "sync": "rsync -avz --exclude={'.github','node_modules','src','.*','package*','webpack*'} ./ $RSYNC_DESTINATION", - "start": "wp-scripts start --webpack-src-dir=src/scale-section --output-path=build/scale-section && wp-scripts start --webpack-src-dir=src/weather --output-path=build/weather", + "start:scale": "wp-scripts start --webpack-src-dir=src/scale-section --output-path=build/scale-section", + "start:weather": "wp-scripts start --webpack-src-dir=src/weather --output-path=build/weather", "lint:js": "wp-scripts lint-js", "lint:css": "wp-scripts lint-style", "format": "wp-scripts format" diff --git a/src/weather/block.json b/src/weather/block.json index 4b6b4a2..9603d2a 100644 --- a/src/weather/block.json +++ b/src/weather/block.json @@ -3,15 +3,24 @@ "apiVersion": 3, "name": "spearfishing-stuff/weather", "version": "0.1.0", - "title": "Weather Data", + "title": "Fishing Weather", "category": "widgets", - "icon": "smiley", - "description": "Live weather data from Barcelona.", + "description": "Weather stuff.", "example": {}, "supports": { "html": false }, "textdomain": "spearfishing-stuff", + "attributes": { + "content": { + "type": "string", + "default": "Heading" + }, + "height": { + "type": "number", + "default": 300 + } + }, "editorScript": "file:./index.js", "editorStyle": "file:./index.css", "style": "file:./style-index.css", diff --git a/src/weather/edit.js b/src/weather/edit.js deleted file mode 100644 index d17ea8d..0000000 --- a/src/weather/edit.js +++ /dev/null @@ -1,38 +0,0 @@ -/** - * Retrieves the translation of text. - * - * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/ - */ -import { __ } from '@wordpress/i18n'; - -/** - * React hook that is used to mark the block wrapper element. - * It provides all the necessary props like the class name. - * - * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops - */ -import { useBlockProps } from '@wordpress/block-editor'; - -/** - * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. - * Those files can contain any CSS code that gets applied to the editor. - * - * @see https://www.npmjs.com/package/@wordpress/scripts#using-css - */ -import './editor.scss'; - -/** - * The edit function describes the structure of your block in the context of the - * editor. This represents what the editor will render when the block is used. - * - * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit - * - * @return {Element} Element to render. - */ -export default function Edit() { - return ( -

- { __( 'Weather stuff goes here!', 'spearfishing-stuff' ) } -

- ); -} diff --git a/src/weather/edit.tsx b/src/weather/edit.tsx new file mode 100644 index 0000000..6abb594 --- /dev/null +++ b/src/weather/edit.tsx @@ -0,0 +1,61 @@ +import { __ } from "@wordpress/i18n"; +import { useBlockProps, InspectorControls } from "@wordpress/block-editor"; +import { PanelBody } from "@wordpress/components"; + +import { useWeatherData } from "./utils"; +import { Waves, Wind, Temperature } from "./icons"; +import "./editor.scss"; +import React, { useEffect } from "react"; + +export default function Edit({ attributes, setAttributes }) { + const blockProps = useBlockProps(); + const { data, isLoading } = useWeatherData(); + + return ( + <> +
+
+
+ +
+

{__("Wind\nSpeed", "wespearfish")}

+ {isLoading ? ( +

{__("Loading...", "wespearfish")}

+ ) : ( +

{data.wind.windspeed} m

+ )} +
+
+
+ +
+

{__("Wave\nHeight", "wespearfish")}

+ {isLoading ? ( +

{__("Loading...", "wespearfish")}

+ ) : ( +

{data.buoy.hm0} m

+ )} +
+
+
+ +
+

{__("Water\nTemperature", "wespearfish")}

+ {isLoading ? ( +

{__("Loading...", "wespearfish")}

+ ) : ( +

{data.buoy.watertemp} m

+ )} +
+
+
+
+ + + + + ); +} diff --git a/src/weather/editor.scss b/src/weather/editor.scss index afb8d9b..6ce1710 100644 --- a/src/weather/editor.scss +++ b/src/weather/editor.scss @@ -1,9 +1,3 @@ /** - * The following styles get applied inside the editor only. - * - * Replace them with your own styles or remove the file completely. - */ - -.wp-block-create-block-spearfishing-stuff { - border: 1px dotted red; -} + * Empty for now. + */ \ No newline at end of file diff --git a/src/weather/icons.tsx b/src/weather/icons.tsx new file mode 100644 index 0000000..791a8eb --- /dev/null +++ b/src/weather/icons.tsx @@ -0,0 +1,26 @@ +import { SVG, Path } from "@wordpress/components"; +import React from "react"; + +export const BlockIcon = () => ( + + + +); + +export const Waves = () => ( + + + +); + +export const Wind = () => ( + + + +); + +export const Temperature = () => ( + + + +); diff --git a/src/weather/index.js b/src/weather/index.js deleted file mode 100644 index ade1e47..0000000 --- a/src/weather/index.js +++ /dev/null @@ -1,39 +0,0 @@ -/** - * Registers a new block provided a unique name and an object defining its behavior. - * - * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ - */ -import { registerBlockType } from '@wordpress/blocks'; - -/** - * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. - * All files containing `style` keyword are bundled together. The code used - * gets applied both to the front of your site and to the editor. - * - * @see https://www.npmjs.com/package/@wordpress/scripts#using-css - */ -import './style.scss'; - -/** - * Internal dependencies - */ -import Edit from './edit'; -import save from './save'; -import metadata from './block.json'; - -/** - * Every block starts by registering a new block type definition. - * - * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ - */ -registerBlockType( metadata.name, { - /** - * @see ./edit.js - */ - edit: Edit, - - /** - * @see ./save.js - */ - save, -} ); diff --git a/src/weather/index.ts b/src/weather/index.ts new file mode 100644 index 0000000..e6d743e --- /dev/null +++ b/src/weather/index.ts @@ -0,0 +1,23 @@ + +import { registerBlockType } from '@wordpress/blocks'; + +import './style.scss'; + +import Edit from './edit'; +import save from './save'; +import metadata from './block.json'; +import { BlockIcon } from './icons'; + +// @ts-expect-error - TS doesn't know about the block.json +registerBlockType( metadata.name, { + icon: BlockIcon, + /** + * @see ./edit.js + */ + edit: Edit, + + /** + * @see ./save.js + */ + save, +} ); diff --git a/src/weather/save.js b/src/weather/save.js deleted file mode 100644 index b0fad9c..0000000 --- a/src/weather/save.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * React hook that is used to mark the block wrapper element. - * It provides all the necessary props like the class name. - * - * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops - */ -import { useBlockProps } from '@wordpress/block-editor'; - -/** - * The save function defines the way in which the different attributes should - * be combined into the final markup, which is then serialized by the block - * editor into `post_content`. - * - * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save - * - * @return {Element} Element to render. - */ -export default function save() { - return ( -

- { 'Spearfishing Stuff – hello from the saved content!' } -

- ); -} diff --git a/src/weather/save.tsx b/src/weather/save.tsx new file mode 100644 index 0000000..0042f11 --- /dev/null +++ b/src/weather/save.tsx @@ -0,0 +1,18 @@ +import { useBlockProps, RichText } from '@wordpress/block-editor'; + +import React from 'react'; + +export default function Save( { attributes } ) { + const { content, height } = attributes; + const blockProps = useBlockProps.save( { + style: { height: `${ height }px` }, + } ); + + return ( +
+
+ +
+
+ ); +} diff --git a/src/weather/style.scss b/src/weather/style.scss index 6f189c5..de1d2a4 100644 --- a/src/weather/style.scss +++ b/src/weather/style.scss @@ -1,12 +1,37 @@ -/** - * The following styles get applied both on the front of your site - * and in the editor. - * - * Replace them with your own styles or remove the file completely. - */ - -.wp-block-create-block-spearfishing-stuff { - background-color: #21759b; - color: #fff; - padding: 2px; -} +.wp-block-spearfishing-stuff-weather { + background-color: #f3f3f3; + margin-top: 20px; + width: 100%; + height: 200px; + + .wp-weather-content { + display: flex; + height: 100%; + gap: 5px; + + .weather-data { + color: #fff; + background-color: #000; + opacity: 0.7; + width: 100%; + display: flex; + justify-content: space-between; + border-radius: 5px; + + svg { + fill: #fff; + margin: 0 auto; + } + + div { + display: flex; + flex-direction: column; + width: 75%; + + p { + margin: 0; + } + } + } + } +} \ No newline at end of file diff --git a/src/weather/utils.ts b/src/weather/utils.ts new file mode 100644 index 0000000..d797a63 --- /dev/null +++ b/src/weather/utils.ts @@ -0,0 +1,72 @@ +import { useState, useEffect } from "react"; + +// Get the current UTC date in the format YYYYMMDD@HH00 +export const getCurrentDate = () => { + const date = new Date(); + const year = date.getUTCFullYear(); + const month = date.getUTCMonth() + 1; + const day = date.getUTCDate(); + const hour = date.getUTCHours(); + + return "20240520@1000"; + return `${year}${month.toString().padStart(2, "0")}${day + .toString() + .padStart(2, "0")}@${hour.toString().padStart(2, "0")}00`; +}; + +type BuoyData = { + utc: number; + watertemp: number; + hm0: number; + hmax: number; + tm02: number; + tp: number; + meandir: number; +}; + +const getBuoyData = (data): BuoyData => { + const keys = data.content[0]; + const values = data.content[1][0]; + + const transformedData = values.reduce((acc, value, index) => { + const theKey = keys[index].toLowerCase().split("(")[0]; + const theValue = Array.isArray(value) ? value[0] : value; + acc[theKey] = theValue; + return acc; + }, {}); + + return transformedData; +}; + +export const useWeatherData = () => { + const [data, setData] = useState(); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(); + + const fetchData = async () => { + try { + // Get the water data + const buoyResponse = await fetch( + `https://movil.puertos.es/cma2/app/CMA/adhoc/station_data?station=1731¶ms=WaterTemp,Hm0,Hmax,Tm02,Tp,MeanDir&from=${getCurrentDate()}`, + ); + const buoyData = await buoyResponse.json(); + + // Get the wind data + const windResponse = await fetch( + `https://movil.puertos.es/cma2/app/CMA/adhoc/station_data?station=4753¶ms=WindSpeed,WindSpeedMax,WindDir,WindDirMax&from=${getCurrentDate()}`, + ); + const windData = await windResponse.json(); + + setData({ buoy: getBuoyData(buoyData), wind: getBuoyData(windData)}); + setIsLoading(false); + } catch (error) { + setError(error); + } + }; + + useEffect(() => { + fetchData(); + }, []); + + return { data, isLoading, error }; +}; diff --git a/src/weather/view.js b/src/weather/view.js index 2197fc8..4a02b92 100644 --- a/src/weather/view.js +++ b/src/weather/view.js @@ -1,25 +1,3 @@ /** - * Use this file for JavaScript code that you want to run in the front-end - * on posts/pages that contain this block. - * - * When this file is defined as the value of the `viewScript` property - * in `block.json` it will be enqueued on the front end of the site. - * - * Example: - * - * ```js - * { - * "viewScript": "file:./view.js" - * } - * ``` - * - * If you're not making any changes to this file because your project doesn't need any - * JavaScript running in the front-end, then you should delete this file and remove - * the `viewScript` property from `block.json`. - * - * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script + * Empty for now. */ - -/* eslint-disable no-console */ -console.log( 'Hello World! (from create-block-spearfishing-stuff block)' ); -/* eslint-enable no-console */