Adds feature #220 - support for printing from the web browser.

It's a little tricky, as to choose the paper source (left/right) you need to use the "Print using system dialog" - no idea yet if this works on unix.

Binner/Binner.Web/ClientApp/src/pages/Inventory.css

@@ -1,3 +1,30 @@
+@media print {
+  *:not(#printarea) {
+    visibility: hidden !important;
+		width: 0 !important;
+		height: 0 !important;
+		position: fixed !important;
+		top: 0 !important;
+		left: 0 !important;
+  }
+  #printarea {
+    visibility: visible !important;
+    position: fixed !important;
+		margin: 0 !important;
+		padding: 0 !important;
+    left: 30px !important;
+    top: 10px !important;
+		z-index: 99999 !important;
+		float: none !important;
+		display: block;
+		border-style: none;
+		/*width: auto !important;*/
+		/*height: auto !important;*/
+		zoom: 1;
+		scale: 1;
+  }
+}
+
 .inventory .render-disabled {
 	background-color: #f0f0f0 !important;
 	background-image: linear-gradient(#fff, #bbb);

Binner/Binner.Web/ClientApp/src/pages/Inventory.js

@@ -850,7 +850,13 @@ export function Inventory(props) {
   const printLabel = async (e) => {
     e.preventDefault();
     e.stopPropagation();
-    await fetchApi(`api/part/print?partNumber=${encodeURIComponent(part.partNumber.trim())}&generateImageOnly=false`, { method: "POST" });
+    if (systemSettings.printer.printMode === 0){
+      // direct print
+      await fetchApi(`api/part/print?partNumber=${encodeURIComponent(part.partNumber.trim())}&generateImageOnly=false`, { method: "POST" });
+    }else{
+      window.print();
+    }
+
   };
 
   const handleChooseAlternatePart = (e, part) => {
@@ -1469,7 +1475,7 @@ export function Inventory(props) {
           <Breadcrumb.Divider />
           <Breadcrumb.Section active>{isEditing ? part.partNumber : t('page.inventory.addtitle', "Add Inventory")}</Breadcrumb.Section>
         </Breadcrumb>
-        {part.partNumber && <Image src={`api/part/preview?partNumber=${encodeURIComponent(part.partNumber.trim())}&token=${getImagesToken()}`} width={180} floated="right" style={{ marginTop: "0px" }} />}
+        {part.partNumber && <Image src={`api/part/preview?partNumber=${encodeURIComponent(part.partNumber.trim())}&token=${getImagesToken()}`} id="printarea" width={180} floated="right" style={{ marginTop: "0px" }} />}
         <div style={{display: 'flex'}}>
           <FormHeader name={title} to=".." />
           {!isEditing &&

Binner/Binner.Web/ClientApp/src/pages/Settings.js

@@ -39,6 +39,20 @@ export const Settings = (props) => {
   const [confirmAuthIsOpen, setConfirmAuthIsOpen] = useState(false);
   const [authorizationUrl, setAuthorizationUrl] = useState(null);
   const [isDirty, setIsDirty] = useState(false);
+  const [printModes] = useState([
+    {
+      key: 1,
+      value: 0,
+      text: "Direct",
+      description: "Print using built-in SDK support"
+    },
+    {
+      key: 2,
+      value: 1,
+      text: "Web Browser",
+      description: "Print using the web browser's print dialog"
+    },
+  ]);
   const [labelSources] = useState([
     {
       key: 1,
@@ -305,6 +319,7 @@ export const Settings = (props) => {
       clientSecret: "",
     },
     printer: {
+      printMode: 0,
       printerName: "",
       partLabelSource: "",
       partLabelName: "",
@@ -468,7 +483,6 @@ export const Settings = (props) => {
         setLoading(false);
         setSettings({ ...data, barcode: {...data.barcode }});
         setSystemSettings(data);
-        console.log('settings', data);
         const digikeyTempSettings = getViewPreference("digikey");
         if (digikeyTempSettings) {
           setSettings({...data, digikey: digikeyTempSettings});
@@ -572,6 +586,7 @@ export const Settings = (props) => {
             control
           );
       } else {
+        console.log('set printer setting', control.name);
         setControlValue(newSettings.printer, "printer", control);
       }
     } else {
@@ -1594,6 +1609,26 @@ export const Settings = (props) => {
               {t('page.settings.printerConfigDescription', "Configure your printer name as it shows up in your environment (Windows Printers or CUPS Printer Name)")}
             </i>
           </p>
+          <Popup
+            wide
+            content={
+              <p>{t('page.settings.popup.printMode', "Choose if you would like to print directly to the printer (default) or using the web browser.")}</p>
+            }
+            trigger={
+              <Form.Field width={10}>
+                <label>{t('page.settings.printMode', "Print Mode")}</label>
+                <Dropdown
+                  name="printerPrintMode"
+                  placeholder="Select the print mode"
+                  selection
+                  required
+                  value={settings.printer.printMode}
+                  options={printModes}
+                  onChange={handleChange}
+                />
+              </Form.Field>
+            }
+          />
           <Popup
             content={
               <p>{t('page.settings.popup.printerPrinterName', "Your printer name as it appears in Windows, or CUPS (Unix).")}</p>

Binner/Binner.Web/Configuration/StartupConfiguration.cs

@@ -35,6 +35,7 @@ public static IConfigurationRoot Configure(IServiceContainer container, IService
             var printerConfiguration = serviceConfiguration.PrinterConfiguration;
             var printerSettings = new PrinterSettings
             {
+                PrintMode = printerConfiguration.PrintMode,
                 PrinterName = printerConfiguration.PrinterName,
                 PartLabelName = printerConfiguration.PartLabelName,
                 PartLabelSource = printerConfiguration.PartLabelSource,

Binner/Binner.Web/appsettings.Unix.Production.json

@@ -74,6 +74,8 @@
       }
     },
     "PrinterConfiguration": {
+      // Choose the print mode to use for printing labels. Values: Direct, WebBrowser
+      "PrintMode": "Direct",
       // DYMO LabelWriter 450, DYMO LabelWriter 450 Twin Turbo
       "PrinterName": "DYMO LabelWriter 450 Twin Turbo",
       // Default or Left,Right for DYMO LabelWriter 450 Twin Turbo

Binner/Binner.Web/appsettings.json

@@ -95,6 +95,8 @@
       }
     },
     "PrinterConfiguration": {
+      // Choose the print mode to use for printing labels. Values: Direct, WebBrowser
+      "PrintMode": "Direct",
       // DYMO LabelWriter 450, DYMO LabelWriter 450 Twin Turbo
       "PrinterName": "DYMO LabelWriter 450 Twin Turbo",
       // Auto or Left, Right for DYMO LabelWriter 450 Twin Turbo

Binner/Library/Binner.Common/MappingProfiles/SettingsRequestProfile.cs

@@ -56,6 +56,7 @@ public SettingsRequestProfile()
             CreateMap<SettingsRequest, PrinterConfiguration>(MemberList.None)
                 .ForMember(x => x.PartLabelName, options => options.MapFrom(x => x.Printer.PartLabelName))
                 .ForMember(x => x.PartLabelSource, options => options.MapFrom(x => x.Printer.PartLabelSource))
+                .ForMember(x => x.PrintMode, options => options.MapFrom(x => x.Printer.PrintMode))
                 .ForMember(x => x.PrinterName, options => options.MapFrom(x => x.Printer.PrinterName))
                 // complex mapping situation
                 .ForMember(x => x.PartLabelTemplate, options =>

Binner/Library/Binner.Common/MappingProfiles/SettingsResponseProfile.cs

@@ -96,6 +96,7 @@ public SettingsResponseProfile()
             CreateMap<PrinterConfiguration, PrinterSettingsResponse>(MemberList.None)
                 .ForMember(x => x.PartLabelName, options => options.MapFrom(x => x.PartLabelName))
                 .ForMember(x => x.PartLabelSource, options => options.MapFrom(x => x.PartLabelSource))
+                .ForMember(x => x.PrintMode, options => options.MapFrom(x => x.PrintMode))
                 .ForMember(x => x.PrinterName, options => options.MapFrom(x => x.PrinterName))
                 // complex mapping situation
                 .ForMember(x => x.Lines, options => options.MapFrom(x => new List<LineConfiguration> {
@@ -115,6 +116,7 @@ public SettingsResponseProfile()
             CreateMap<PrinterSettingsResponse, PrinterConfiguration>(MemberList.None)
                 .ForMember(x => x.PartLabelName, options => options.MapFrom(x => x.PartLabelName))
                 .ForMember(x => x.PartLabelSource, options => options.MapFrom(x => x.PartLabelSource))
+                .ForMember(x => x.PrintMode, options => options.MapFrom(x => x.PrintMode))
                 .ForMember(x => x.PrinterName, options => options.MapFrom(x => x.PrinterName))
                 .ForMember(x => x.LabelDefinitions, options => options.Ignore())
                 // complex mapping situation

Binner/Library/Binner.Model/Configuration/PrintModes.cs

@@ -0,0 +1,13 @@
+namespace Binner.Model.Configuration;
+
+public enum PrintModes
+{
+    /// <summary>
+    /// Print directly to the printer using internal SDK
+    /// </summary>
+    Direct,
+    /// <summary>
+    /// Print using the web browser's dialog
+    /// </summary>
+    WebBrowser
+}

Binner/Library/Binner.Model/Configuration/PrinterConfiguration.cs

@@ -4,6 +4,11 @@ namespace Binner.Model.Configuration
 {
     public class PrinterConfiguration
     {
+        /// <summary>
+        /// Choose the print mode to use for printing labels.
+        /// </summary>
+        public PrintModes PrintMode { get; set; } = PrintModes.Direct;
+
         /// <summary>
         /// Full name of printer
         /// Default: Dymo LabelWriter 450

Binner/Library/Binner.Model/IO/Printing/PrinterSettings.cs

@@ -1,7 +1,14 @@
-namespace Binner.Model.IO.Printing
+using Binner.Model.Configuration;
+
+namespace Binner.Model.IO.Printing
 {
     public class PrinterSettings : IPrinterSettings
     {
+        /// <summary>
+        /// Choose the print mode to use for printing labels.
+        /// </summary>
+        public PrintModes PrintMode { get; set; } = PrintModes.Direct;
+
         public string PrinterName { get; set; } = "Dymo LabelWriter 450 Twin Turbo";
 
         public string PartLabelName { get; set; } = "30346"; // LW 1/2" x 1 7/8"

Binner/Library/Binner.Model/Responses/PrinterSettingsResponse.cs

@@ -1,9 +1,15 @@
-using Binner.Model.IO.Printing;
+using Binner.Model.Configuration;
+using Binner.Model.IO.Printing;
 
 namespace Binner.Model.Responses
 {
     public class PrinterSettingsResponse
     {
+        /// <summary>
+        /// Choose the print mode to use for printing labels.
+        /// </summary>
+        public PrintModes PrintMode { get; set; } = PrintModes.Direct;
+
         /// <summary>
         /// Full name of printer
         /// </summary>