dimanche 22 septembre 2019

How to filter one category with multiple strings from a dynamic checkbox into a pipe

I'm asking this question again because I did not get a clear answer before.

If this is done better without pipes, please, show me how, or point me to a source where I can learn to do so.

I have multiple filters in a pipe in order to filter out smartphones by characteristics. Currently, it works only for one checkbox per category, but I'd like to be able to include multiple filters per category (Ex. Search for both samsung and Apple brands) This checkbox is dynamically generated, based on an API call, so I'd like for the pipe to accept an indeterminate number of arguments. Thanks in advance!

I have attempted to do a for loop within the pipe, and apply an array of strings as an argument.

filter-component.html

<mat-drawer-container style="overflow-y: hidden;" class="example-container">
  <mat-drawer mode="side" opened>
    <div class="wrapper" #wrapper>
      <div class="sidebar" [ngStyle]="{'margin-left': marginSize, 'position': sideNavPosition, 'z-index':20, 'height':open===true? collapsedHeight : '100%'}">
        <ul class="list-sidebar bg-defoult">
          <li>
            <a href="#" data-toggle="collapse" data-target=".filtermenu" class="collapsed active">
              <i class="fa fa-th-large"></i>
              <span class="nav-label">Filter</span>
              <span class="fa fa-chevron-left pull-right"></span>
            </a>

            <ul class="sub-menu collapse filtermenu" data-toggle="collapse" data-target="#brandlabel" id="dashboard">
              <a href="#" data-toggle="collapse" data-target="#brand" class="collapsed active" id="brandlabel">
                <span class="nav-label">Brand</span>
                <span class="fa fa-chevron-left pull-right"></span>
              </a>
              <ul class="nav-label collapse" id="brand" *ngFor="let Product of brand; let i = index">
                <li class="nav-label text-light">
                  <input type="checkbox" name="f" value="f" (change)="setSearchBrand(Product)" /> 
                </li>
              </ul>

            </ul>
            <ul class="sub-menu collapse filtermenu" data-toggle="collapse" data-target="#batterylabel" id="dashboard">
              <a href="#" data-toggle="collapse" data-target="#battery" class="collapsed active" id="batterylabel">
                <span class="nav-label">Battery</span>
                <span class="fa fa-chevron-left pull-right"></span>
              </a>
              <ul class="nav-label collapse" id="battery" *ngFor="let Product of battery">
                <li class="nav-label text-light">
                  <input type="checkbox" name="options" value=""  (change)="setSearchBattery(Product)" /> 
                </li>
              </ul>

Product-ListComponent.ts

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../product.service'
import { Router } from '@angular/router';
import { Product } from '../../partner/Product';



@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
  open: boolean;
  marginSize: string;
  sideNavPosition: string;
  collapsedHeight: string;

  brand: Product["brand"];
  battery: Product["battery"];
  camera: Product["camera"];
  color: Product["color"];
  //phoneCondition: Product["phoneCondition"];
  ram: Product["ram"];
  resolution: Product["resolution"];
  storage: Product["storage"];

  searchBrand: string = "";
  searchBattery: string = "";
  searchCamera: string = "";
  searchCondition: string = "";
  searchColor: string = "";
  searchRam: string = "";
  searchResolution: string = "";
  searchStorage: string = "";



  constructor(private productService: ProductService, private router: Router) { }
  products: any[];
  prod: Object[];
  ngOnInit() {

    this.marginSize = '0px';
    this.sideNavPosition = "relative";
    this.open = false;``
    this.getProduct();


    this.productService.brandFilter().subscribe(data => {
      this.brand = data;
    });
    this.productService.batteryFilter().subscribe(data => {
      this.battery = data;
    });
    this.productService.cameraFilter().subscribe(data => {
      this.camera = data;
    });
    this.productService.colorFilter().subscribe(data => {
      this.color = data;
    });
    this.productService.resolutionFilter().subscribe(data => {
      this.resolution = data;
    });
    // this.productService.conditionFilter().subscribe(data => {
    //   this.phoneCondition = data;
    // });
    this.productService.ramFilter().subscribe(data => {
      this.ram = data;
    });
    this.productService.storageFilter().subscribe(data => {
      this.storage = data;
    });

  }
  clearFilters() {
    this.setSearchBrand('');
    this.searchBattery = '';
    this.setSearchCamera('');
    this.setSearchCondition('');
    this.setSearchColor('');
    this.searchRam = '';
    this.setSearchResolution('');
    this.searchStorage = '';
  }
  getProduct() {
    this.productService.getProduct().subscribe(
      product => {
        this.products = product.body;
        console.log(product);
      });

  }
  setSearchBrand(name: string) {

    this.searchBrand = name;
    return this.searchBrand;

  }
  setSearchBattery(name: string) {

    this.searchBattery;
    return this.searchBattery;

  }
  setSearchCamera(name: string) {

    this.searchCamera = name;
    return this.searchCamera;

  }
  setSearchCondition(name: string) {

    this.searchCondition = name;
    return this.searchCondition;

  }
  setSearchColor(name: string) {

    this.searchColor = name;
    return this.searchColor;

  }
  setSearchRam(name: string) {

    this.searchRam = name;
    return this.searchRam;

  }
  setSearchResolution(name: string) {

    this.searchResolution = name;
    return this.searchResolution;

  }
  setSearchStorage(name: string) {

    this.searchStorage = name;
    return this.searchStorage;

  }
  viewProducts() {
    this.router.navigate(["/customers/home"])
  }

  detailss(product: any) {
    this.productService.setProductDetails(product);
    console.log(product)
    this.router.navigate(["/customers/details"]);
  }
  details(products) {
    this.router.navigate(["/customers/home"]);
  }

brand-filter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'brandFilter'
})
export class BrandFilterPipe implements PipeTransform {

  transform(items: any[], searchBrand: string[], searchBattery: string, searchCamera: string, searchColor: string
  ,searchRam: string,searchResolution: string,searchStorage: string ): any[] {
    if (items && items.length){
      return items.filter(item =>{
          if (searchBrand && item.brand.toLowerCase().indexOf(searchBrand) === -1){
              return false;
          }
          if (searchBattery && item.battery.toString().indexOf(searchBattery) === -1){
              return false;
          }
          if (searchCamera && item.camera.toLowerCase().indexOf(searchCamera.toLowerCase()) === -1){
              return false;
          }
          if (searchColor && item.color.toLowerCase().indexOf(searchColor.toLowerCase()) === -1){
            return false;
          }
          // if (searchCondition && item.phoneCondition.toLowerCase().indexOf(searchCondition.toLowerCase()) === -1){
          //   return false;
          // }
          if (searchRam && item.ram.toString().indexOf(searchRam) === -1){
            return false;
          }
          if (searchResolution && item.resolution.indexOf(searchResolution) === -1){
            return false;
          }
          if (searchStorage && item.storage.toString().indexOf(searchStorage) === -1){
            return false;
          }

          return true;
     })
  }
    else{
        return items;
    }

  }
}

As I said. The code currently allows for filtering of one option out of each category. I would like to refactor, or redo this to make it so that each category can have multiple filters (ex. search for brand, and filter phones from both apple and samsung)




How do I make cells interactively change values in Google Sheets/Microsoft Excel?

Senario (you can skip this to the question part):

I have a main task A1 and 3 subtasks B1, B2 and B3. A1 is complete iff all the 3 subtasks are complete. I want to record my progress so I created a new Google spreadsheet and 4 checkboxes, 1 for each task. Then, I made A1=AND(B1,B2,B3). I tried to check all the tasks one by one and after the 3rd one is checked A1 became checked. Everything was simple and easy so far.

Later I found the main task needs to be done again periodly, so I want to reset all the checkboxes and start over. Here comes the problem. The only way for me to reset everything is to uncheck the 3 subtasks. I cannot directly check/uncheck the main taksk of course, because I explicitly set it to be a value which is decided by the values of other 3 cells.

Click the mouse 3 times may not sound like a big deal, but what if I have 10 subtasks next time? how about 100? Is there a way to allow the unchecking of A1, which can even uncheck the subtasks all at once?

Question:

I have 4 cells of checkbox, A1, B1, B2 and B3. I want the following to become true:

  1. Check. I can check any of them. If I check A1 directly, B1-3 will be automatically checked at the same time(if any of them is already checked then nothing will happen to it; only the unchecked ones change). If I check any of the subtasks(B1, B2 or B3), and if the other 2 subtasks are already checked, A1 becomes checked automatically.

  2. Uncheck. I can uncheck any of them. Similarly, if I uncheck A1 directly, B1-3 will be automatically unchecked at the same time(if any of them is already unchecked then nothing will happen to it; only the checked ones change). If I uncheck any of the subtasks(B1, B2 or B3), and if all the other cells are checked, A1 becomes unchecked automatically.

How do I do this in Google Sheets/Microsoft Excel?




How to automate direct output from different checkboxes?

Example with output

I already have the code to extract direct onscreen output after selecting different checkboxes. But I want the output to be categorized with some formatting of the text (see picture): COUNTRY 1/2/3/4 should be on separate lines depending on the checkbox number 1/2/3/4 selected, and if possible I want to remove some of the redundant commas.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>

<script>
$(document).ready(function(){
$("input[name='A']").change(function(){
    var checkedCountries = $("input[name='A']:checked");
    var countries = [];
    for(var i = 0; i<checkedCountries.length; i++) {
        countries.push(checkedCountries[i].value + ",");
    }
    $("#countryList").val(countries.join(" "));


});


$("#copyBtn").click(function() {
    var copyText = document.getElementById("countryList");
    copyText.select();
    document.execCommand("Copy");
    alert("Copied the text: " + copyText.value);
});
});
</script>
</head>
<body>


<div class="mainpage_box"><h3><input type="checkbox" name="A" value="COUNTRY 1:"><span>COUNTRY 1:</span></h3>
<div id="mainpage-admins" title="System administrators" class="items">
<input type="checkbox" name="A" value="America">America<br>
<input type="checkbox" name="A" value="Burma">Burma<br>
<input type="checkbox" name="A" value="China">China<br>
<input type="checkbox" name="A" value="Denmark">Denmark<br>
<input type="checkbox" name="A" value="England">England<br>
<input type="checkbox" name="A" value="France">France<br>
</div></div>

<div class="mainpage_box"><h3><input type="checkbox" name="A" value="COUNTRY 2:"><span>COUNTRY 2:</span></h3>
<div id="mainpage-admins" title="System administrators" class="items">
<input type="checkbox" name="A" value="America">America<br>
<input type="checkbox" name="A" value="Burma">Burma<br>
<input type="checkbox" name="A" value="China">China<br>
<input type="checkbox" name="A" value="Denmark">Denmark<br>
<input type="checkbox" name="A" value="England">England<br>
<input type="checkbox" name="A" value="France">France<br>
</div></div>


<textarea id="countryList" rows="20" cols="150"></textarea></br>

The red arrow in the picture show the output screen I'm looking for.




samedi 21 septembre 2019

Checkbox checked list item - Xamarin android

I am new to Android. I have a listview which contains checkbox in each list item. And I have a button under the listview. On button click event I have to capture all the list view items where checkbox is checked.

Here is my Adaptor code.

  class ListAdapter : BaseAdapter<Package>
    {
        List<Package> routeSheet;
        Activity activity;
        public ListAdapter(Activity activity, List<Package> routeSheetRequests)
        {
            this.activity = activity;
            this.routeSheet = routeSheetRequests;
        }

        public override Package this[int position]
        {
            get
            {
                return routeSheet[position];
            }
        }
        public override Java.Lang.Object GetItem(int position)
        {
            return position;
        }

        public override long GetItemId(int position)
        {
            return position;
        }

        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            var view = convertView;


            if (view == null)
            {
                view = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.CheckoutListRow, 
    parent, false);

                var stopId = view.FindViewById<TextView>(Resource.Id.txtStopId);
                var shipperName = view.FindViewById<TextView>(Resource.Id.txtShipperName);
                var checkBoxMove = view.FindViewById<CheckBox>(Resource.Id.chkCheckout);
                checkBoxMove.CheckedChange += CheckBoxMove_CheckedChange;

                view.Tag = new ListAdapterViewHolder() { StopId = stopId, DeliveryCompany = shipperName, 
            CheckBox = checkBoxMove };
            }
            else
            {

            }
            var holder = (ListAdapterViewHolder)view.Tag;

            holder.StopId.Text = Convert.ToString(routeSheet[position].ControlNumber);
            holder.DeliveryCompany.Text = Convert.ToString(routeSheet[position].DeliveryCompany);

            return view;
        }


        private void CheckBox_CheckedChange(object sender, CompoundButton.CheckedChangeEventArgs e)
        {
            if (e.IsChecked)
            {
             // Here I want to get the list item details
            }

        }

        public override int Count
        {
            get
            {
                if (routeSheet != null)
                    return routeSheet.Count();
                else
                    return 0;
            }
        }
    }

    class ListAdapterViewHolder : Java.Lang.Object
    {

        public TextView DeliveryCompany { get; set; }
        public TextView StopId { get; set; }
        public CheckBox CheckBox { get; set; }
    }

Here is my Fragment code.

public class CheckoutExcFragment : Android.Support.V4.App.Fragment
    {
        ListView ExcList;
        private List<Package> routesheet = null;

        public override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            Package package;
            routesheet = new List<Package>();

                var Packages = Arguments.GetParcelableArrayList("PakageList");
                if (Packages != null)
                {
                    foreach (var pkg in Packages)
                    {
                        PackageParcelable parcelable = (PackageParcelable)pkg;
                        package = parcelable.Package;
                        routesheet.Add(package);
                    }

                }

        }

        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            var view = inflater.Inflate(Resource.Layout.CheckoutExcFragment, container, false);

            InitListView(view);
            return view;

        }

        public override void OnAttach(Context context)
        {
            base.OnAttach(context);

        }
        private void InitListView(View view)
        {
            ExcList = (ListView)view.FindViewById(Resource.Id.lstCheckoutExc);
            ExcList.ItemClick += ExcList_ItemClick;
            var adapter = new ListAdapter(this.Activity, routesheet);
            ExcList.Adapter = adapter;

        }

        private void ExcList_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
        {

            Package package = routesheet[e.Position];
            if (package !=null)
            {
                var json = Newtonsoft.Json.JsonConvert.SerializeObject(package);
                Intent intent = new Intent(this.Activity, Java.Lang.Class.FromType(typeof(PackageInfo)));
                intent.PutExtra("PackageDetails", json);
                StartActivity(intent);
            }
        }
    }

Main Activity code:

 private void MoveSelectedClick_Click(object sender, EventArgs e)
        {
            try
            {
             // Here I need checkbox selected list items

                string[] controlNumbers = DataHolder.GetReRoutedPackages();

            }
            catch (Exception ex)
            {

            }

        }

I added checkbox checked event where I want to get the selected list item details. Here I have no clue how to get the details. I verified numerous articles but I couldn't find the answer. Please help. Thank you.




WooCommerce extra fee on shipping cost if checkbox ship to other address is enabled

Is there an option that, say if a customer wants to ship to another address other than his billing address, can there be an extra fee based on that checkbox? I want that if a customer unchecks that checkbox, a extra fee of € 12.50 is added on the shipping cost. If anyone knows, please let me know :)

The checkbox is the default woocommerce checkbox btw. See attached file.

WooCommerce default shipping checkbox




vendredi 20 septembre 2019

Checkbox not showing once checked on our website

I am trying to get the checked checkbox to show up on our website. At the bottom of this page: https://www.shiftdivorceguide.com/submit-listing/ we have two check boxes, "I agree" and "Already have an account".

When I check them they disappear and I want them to show with a check mark in them.

HTML <input id="policycheck" type="checkbox" name="policycheck" value="true">

CSS:

.checkbox input[type=checkbox] {
    display: none;
}

If I change this to to display:inline a second smaller box displays and if I check it on I Agree it jumps to the right.

I would like the nicer larger box (not the smaller box) to remain and show as checked when someone checks it.

Can anyone point me in the right direction on how to fix this?

Thanks in advance!




DataTables / Checkboxes Plugin - How to return the amount of checkboxes checked

I have a standard DataTable with checkboxes and I cannot figure out how to count the amount of checkboxed that at checked through the entire dataset on change.

Library: https://datatables.net/

Plugin: https://www.gyrocode.com/projects/jquery-datatables-checkboxes/

HTML:

<table id="myTable" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>01</td>
            <td>Alpha</td>
        </tr>
        <tr>
            <td></td>
            <td>02</td>
            <td>Bravo</td>
        </tr>
        <tr>
            <td></td>
            <td>03</td>
            <td>Charlie</td>
        </tr>
        <tr>
            <td></td>
            <td>04</td>
            <td>Delta</td>
        </tr>
        <tr>
            <td></td>
            <td>05</td>
            <td>Echo</td>
        </tr>
    </tbody>
</table>

JS:

resultsTable = $("#myTable").DataTable({
    "columnDefs": [
        {
            "targets" : 0,
            "checkboxes": true,
            "orderable": false
        }
    ],
    "select": {
        "style": "multi"
    },
    "order": [[3, 'asc']]
});

The table renders fine, with the checkboxes in the tbody and thead. I can write simple onChange function outside of the DataTable init, but it only detects the checkboxes checked or not checked on the visible page of the table.

resultsTable.on('change', 'input[type="checkbox"]', function(e){
    var numChecked = $("#results-table").find("input[type='checkbox']:checked").length;
    console.log(numChecked);
});

How or WHERE can I write a function that will trigger when a checkbox is changed, and then return the amount of TOTAL checkboxes in the table that are checked?