diff --git a/samples/react-azurefunction-northwind2/assets/sample.json b/samples/react-azurefunction-northwind2/assets/sample.json index 446c09110..8cc603468 100644 --- a/samples/react-azurefunction-northwind2/assets/sample.json +++ b/samples/react-azurefunction-northwind2/assets/sample.json @@ -30,13 +30,7 @@ "order": 100, "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-azurefunction-northwind2/assets/YOUR-IMAGE-NAME-HERE", "alt": "Web Part Preview" - }, - // { - // "type": "video", - // "order": 101, - // "url": "https://www.youtube.com/embed/FS-_0KENJkI", - // "alt": "Community demo of the web part" - // } + } ], "authors": [ { diff --git a/samples/react-flighttracker/.devcontainer/devcontainer.json b/samples/react-flighttracker/.devcontainer/devcontainer.json new file mode 100644 index 000000000..5c924ea0b --- /dev/null +++ b/samples/react-flighttracker/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.15.2", + "image": "docker.io/m365pnp/spfx:1.15.2", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "5432": { + // "protocol": "https", + // "label": "Workbench", + // "onAutoForward": "silent" + // }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-flighttracker/.devcontainer/spfx-startup.sh b/samples/react-flighttracker/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-flighttracker/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-flighttracker/README.md b/samples/react-flighttracker/README.md index b4686ea4e..817a2c8b4 100644 --- a/samples/react-flighttracker/README.md +++ b/samples/react-flighttracker/README.md @@ -1,15 +1,17 @@ - +# Flight Tracker ## Summary This WebPart allows to track all flights from a selected airport, date and information type. -The SPFx use external API (https://aerodatabox.p.rapidapi.com/flights/number/) to get data of flight, please see https://rapidapi.com/aedbx-aedbx/api/aerodatabox/ to get more information. There is some restritions on this API, the number of requests is limited (free version) +The SPFx use external API (https://aerodatabox.p.rapidapi.com/flights/number/) to get data of flight, please see https://rapidapi.com/aedbx-aedbx/api/aerodatabox/ to get more information. There are some restrictions on this API, the number of requests is limited (free version) -![SharePoint View](./src/assets/sharepoint.png "SharePoint View") +![SharePoint View](./src/assets/sharepoint.png "SharePoint View") ![Teams View](./src/assets/teams.jpg "Teams View") ![properties](./src/assets/properties.png "Teams View") - +## Compatibility + +This sample is optimally compatible with the following environment configuration: ![SPFx 1.15](https://img.shields.io/badge/SPFx-1.15-green.svg) ![Node.js v14 | v12](https://img.shields.io/badge/Node.js-v14%20%7C%20v12-green.svg) @@ -20,7 +22,6 @@ The SPFx use external API (https://aerodatabox.p.rapidapi.com/flights/number/) t ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) ![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) - ## Applies to * [SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview) @@ -28,8 +29,6 @@ The SPFx use external API (https://aerodatabox.p.rapidapi.com/flights/number/) t > Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram) - - ## Solution Solution|Author(s) @@ -44,15 +43,14 @@ Version|Date|Comments ## Minimal Path to Awesome -- Clone this repository -- Ensure that you are at the solution folder - - - in the command line run: - - `npm install` - - `gulp build --ship` - - `gulp bundle --ship` - - `gulp package-solution --ship` - - Browse to your SharePoint app catalog and load the SPFx package. +* Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-flighttracker) then unzip it) +* From your command line, change your current directory to the directory containing this sample (`react-flighttracker`, located under `samples`) +* in the command line run: + - `npm install` + - `gulp build --ship` + - `gulp bundle --ship` + - `gulp package-solution --ship` +* Browse to your SharePoint app catalog and load the SPFx package. ## Features @@ -74,18 +72,18 @@ We do not support samples, but this community is always willing to help, and we If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment. -You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-fluentui-9%22) to see if anybody else is having the same issues. +You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-flighttracker%22) to see if anybody else is having the same issues. -You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-fluentui-9) and see what the community is saying. +You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-flighttracker) and see what the community is saying. -If you encounter any issues using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-fluentui-9&template=bug-report.yml&sample=react-fluentui-9&authors=@techienickb&title=react-fluentui-9%20-%20). +If you encounter any issues using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-flighttracker&template=bug-report.yml&sample=react-flighttracker&authors=@joaojmendes&title=react-flighttracker%20-%20). -For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-fluentui-9&template=question.yml&sample=react-fluentui-9&authors=@techienickb&title=react-fluentui-9%20-%20). +For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-flighttracker&template=question.yml&sample=react-flighttracker&authors=@joaojmendes&title=react-flighttracker%20-%20). -Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-fluentui-9&template=suggestion.yml&sample=react-fluentui-9&authors=@techienickb&title=react-fluentui-9%20-%20). +Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-flighttracker&template=suggestion.yml&sample=react-flighttracker&authors=@joaojmendes&title=react-flighttracker%20-%20). ## Disclaimer **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** - + diff --git a/samples/react-flighttracker/assets/sample.json b/samples/react-flighttracker/assets/sample.json index e93835520..944ce1ccd 100644 --- a/samples/react-flighttracker/assets/sample.json +++ b/samples/react-flighttracker/assets/sample.json @@ -2,7 +2,7 @@ { "name": "pnp-sp-dev-fx-webparts-react-flighttracker", "source": "pnp", - "title": "React Flight Tracker Web Part", + "title": "Flight Tracker", "shortDescription": "Sample Web Part to track all flights from a selected airport, date and information type.", "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-flighttracker", "longDescription": [ diff --git a/samples/react-flighttracker/src/components/SelectAirport/SelectAirportPicker.tsx b/samples/react-flighttracker/src/components/SelectAirport/SelectAirportPicker.tsx index 4192c9047..3dbc9311b 100644 --- a/samples/react-flighttracker/src/components/SelectAirport/SelectAirportPicker.tsx +++ b/samples/react-flighttracker/src/components/SelectAirport/SelectAirportPicker.tsx @@ -46,8 +46,8 @@ export const SelectAirportPicker: React.FunctionComponent = () => { const pickerSuggestionsProps: IBasePickerSuggestionsProps = React.useMemo(() => { return { - suggestionsHeaderText: "Suggested AirPorts", - noResultsFoundText: "No AirPort found", + suggestionsHeaderText: "Suggested airports", + noResultsFoundText: "No matching airports found", }; }, []); diff --git a/samples/react-flighttracker/src/webparts/flightTracker/loc/en-us.js b/samples/react-flighttracker/src/webparts/flightTracker/loc/en-us.js index 27ef124e7..95834f7d3 100644 --- a/samples/react-flighttracker/src/webparts/flightTracker/loc/en-us.js +++ b/samples/react-flighttracker/src/webparts/flightTracker/loc/en-us.js @@ -1,7 +1,7 @@ define([], function() { return { - AirLineLabel: "Air Line", - AirportLabel: "AirPort", + AirLineLabel: "Airline", + AirportLabel: "Airport", AirPortPlaceholder: "Search for an airport", DateLabel: "Date", FlightLabel: "Flight", @@ -10,7 +10,7 @@ define([], function() { Remove: "Remove", SelectDate: "Select a date", SelecteAirport: "Select Airport", - SelectInformationType: "Select infomation type", + SelectInformationType: "Select information type", selectTime: "\"Time", StartTimeLabel: "Time", TerminalLabel: "Terminal", diff --git a/samples/react-group-membership-manager/assets/sample.json b/samples/react-group-membership-manager/assets/sample.json index 5f0e674ac..230e55f65 100644 --- a/samples/react-group-membership-manager/assets/sample.json +++ b/samples/react-group-membership-manager/assets/sample.json @@ -30,13 +30,7 @@ "order": 100, "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-group-membership-manager/assets/YOUR-IMAGE-NAME-HERE", "alt": "Web Part Preview" - }, - // { - // "type": "video", - // "order": 101, - // "url": "https://www.youtube.com/embed/FS-_0KENJkI", - // "alt": "Community demo of the web part" - // } + } ], "authors": [ {